微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
不久前，我意识到我正在用一些重复使用的后台基础模板，浪费了我一些摸鱼时间，我突然想到--为什么不把这些可重复使用的部分重新利用起来，把它们简单地堆在一个模板里呢？
技术栈
这个后台模板中，用到了如下的框架或库：
前提
开始之前，首先要安装 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 标签添加一些实用类来测试一下：
This is an about page
我们也可以在下面单独定义我们的CSS属性。要做到这一点，需要安装这个PostCSS插件 - postcss-import。
npm install -D postcss-import接着，在实用类中使用 @apply:
添加 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 代码改成这个，然后保存:
然后在 /src/App.vue 文件中，把它作为SVG组件导入，并用
...
至此，一个简单的模板框架就搭建完啦。
下一步是什么？
你可以将它，发布到 npm 上，然后可以类似的命令安装：
npm i @richardecom/vue3-boilerplate下面还有份清单，你可以选择性添加进去：
编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
作者：Andy Chen 译者：小智 来源：medium
https://medium.com/js-dojo/cu...
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
