微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
不久前,我意识到我正在用一些重复使用的后盾根底模板,节约了我一些摸鱼工夫,我忽然想到 – 为什么不把这些可重复使用的局部从新利用起来,把它们简略地堆在一个模板里呢?🤔
技术栈
这个后盾模板中,用到了如下的框架或库:
- Vite
- Pinia
- Vue Router
- Tailwind CSS
- Vite SVG loader
前提
开始之前,首先要装置 Node.js,这个自行百度解决。
疾速入门 – Vue, Router & Store
咱们先从初始化模板开始:
npm init vue@latest
接着输出项目名称 vue3-boilerplate
,而后在性能提醒中抉择装置 Pinia
和 Vue Router
:
✔ Project name: vue3-boilerplate
...
✔ Add Vue Router for Single Page Application development? Yes
✔ Add Pinia for state management? Yes
依据提醒,抉择所需性能后,执行如下命令:
cd vue3-boilerplate
npm install
npm run dev
运行后在本地开发环境中查看 http://127.0.0.1:5173
此示例页面:
增加 Tailwind CSS
有了根底后,当初咱们须要一些款式。依照这个指南,咱们装置 Tailwind CSS,而后初始化配置文件。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
装置完后,在根目录中,会有一个 tailwind.config.js
文件,填充内容如下:
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {extend: {},
},
plugins: [],};
接下来,咱们须要加载 @tailwind
指令,所以在 /src/assets
文件夹中创立tailwind.css
,其中蕴含以下内容(指令):
@tailwind base;
@tailwind components;
@tailwind utilities;
而后在 /src/assets/main.css
顶部导入它:
@import "./tailwind.css";
因为咱们曾经在 /src/main.js
中导入了 /src/assets/main.css
文件,所以,当初就能够在我的项目中应用 Tailwind 的实用类了。
咱们在 /src/views/AboutView.vue
中的 h1
标签增加一些实用类来测试一下:
<template>
<div class="about">
<h1 class="text-xl font-medium text-white">This is an about page</h1>
</div>
</template>
咱们也能够在上面独自定义咱们的 CSS 属性。要做到这一点,须要装置这个 PostCSS 插件 – postcss-import
。
npm install -D postcss-import
接着,在实用类中应用 @apply
:
<style lang="scss">
.about {
@apply lg:min-h-screen lg:flex lg:items-center;
h1 {@apply text-xl font-medium text-white;}
}
</style>
增加 SVG loader(可选)
我比拟喜爱 SVG,🥁恰好,咱们新的模板能够很容易地导入 SVG 图像,但有一个问题 – 咱们必须把它作为组件应用,这意味着须要手动在模板标签中增加 SVG 代码,而后像这样导入。
侥幸的是,有这样一个 vit-svg-loader 包,它基本上能够让咱们在 Vue 模板中简略地导入 .svg
文件作为组件。
首先,装置它:
npm install vite-svg-loader --save-dev
在 vite.config.js
配置文件中增加这个插件:
import svgLoader from 'vite-svg-loader'
export default defineConfig({plugins: [vue(), svgLoader()],
...
})
最初,为了测试,把/src/assets/logo.svg
中的 Vue logo 代码改成这个,而后保留:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2454.32 2457.41"><defs><linearGradient id="a" x1="285.11" y1="1790.44" x2="285.7" y2="1789.74" gradientTransform="matrix(2454.32, 0, 0, -2187.24, -699180.9, 3916163.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="285.22" y1="1790.33" x2="285.29" y2="1789.46" gradientTransform="matrix(1125.42, 0, 0, -2051.66, -319596.68, 3673197.31)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffea83"/><stop offset="0.08" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient></defs><path d="M2464.14,381.6,1311.22,2443.21c-23.8,42.57-85,42.82-109.12.46L26.33,381.79C0,335.63,39.47,279.72,91.78,289.08L1245.93,495.37a62.88,62.88,0,0,0,22.27,0l1130-206C2450.35,279.87,2490,335.35,2464.14,381.6Z" transform="translate(-17.94 -17.87)" style="fill:url(#a)"/><path d="M1795.71,18.48,942.53,185.66a31.33,31.33,0,0,0-25.25,28.9L864.8,1101a31.33,31.33,0,0,0,29.41,33.14,31.77,31.77,0,0,0,8.91-.75l237.54-54.82a31.32,31.32,0,0,1,37.73,36.79l-70.57,345.59a31.33,31.33,0,0,0,39.8,36.24l146.72-44.57a31.34,31.34,0,0,1,39.79,36.32L1222,2031.73c-7,33.95,38.14,52.47,57,23.36l12.59-19.44L1986.77,648.19c11.65-23.23-8.44-49.72-33.94-44.79l-244.52,47.18a31.33,31.33,0,0,1-36-39.44L1831.86,57.91a31.34,31.34,0,0,0-36.14-39.43Z" transform="translate(-17.94 -17.87)" style="fill:url(#b)"/></svg>
而后在 /src/App.vue
文件中,把它作为 SVG 组件导入,并用 <img class="logo" />
替换它。
<script setup>
...
import LogoSVG from './assets/logo.svg?component'
</script>
<template>
...
<LogoSVG alt="Vite logo" class="logo" />
...
</template>
至此,一个简略的模板框架就搭建完啦。
下一步是什么?
你能够将它,公布到 npm 上,而后能够相似的命令装置:
npm i @richardecom/vue3-boilerplate
上面还有份清单,你能够选择性增加进去:
- NuxtJS
- Vue Meta
- VeeValidate
- Vue Toastification
编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
作者:Andy Chen 译者:小智 起源:medium
https://medium.com/js-dojo/cu…
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。