自定义一个Vue3模板——集成Vite、Pinia、VueRouter和TailwindCSS

.about{@applylg:min-h-screenlg:flexlg:items-center;h1{@applytext-xlfont-mediumtext-white;}}不久前，我意识到我在使用一些重复使用的后台模板，浪费了我的一些钓鱼时间，我突然想到-为什么不呢？重新利用这些可重复使用的部分并将它们简单地堆叠在一个模板中？在技??术栈的后台模板中，使用了以下框架或库：VitePiniaVueRouterTailwindCSSViteSVGloader开始之前，首先要安装Node.js，自行百度解决。快速入门-Vue,Router&Store先从初始化模板开始：npminitvue@latest然后输入项目名称vue3-boilerplate，然后在功能提示中选择安装Pinia和VueRouter：?项目名称：vue3-boilerplate...?为单页应用程序开发添加Vue路由器？是?添加Pinia进行状态管理？是根据提示，选择需要的功能后，执行以下命令：cdvue3-boilerplatenpminstallnpmrundev运行后，在本地开发环境中查看http:///127.0.0.1:5173本示例页面：AddingTailwindCSSNow我们有了基础，我们需要一些造型。按照本指南，我们安装TailwindCSS，然后初始化配置文件。npminstall-Dtailwindcsspostcssautoprefixernpxtailwindcssinit-p安装完成后，根目录下会有一个tailwind.config.js文件，填充内容如下：/**@type{import('tailwindcss').Config}*/module.exports={content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"],theme:{extend:{},},插件:[],};接下来，我们需要加载@tailwind指令，因此在/src/assets文件夹中创建tailwind.css，内容如下（指令）：@tailwindbase;@tailwindcomponents;@tailwindutilities;然后在/src/assets/main.css的顶部导入它：@import"./tailwind.css";由于我们已经在/src/main.js中导入了/src/assets/main.css文件，所以，现在您可以在您的项目中使用Tailwind的实用程序类。我们在/src/views/AboutView.vue中的h1标签中添加一些实用类进行测试：我们也可以在下面单独定义我们的CSS属性。为此，需要安装PostCSS插件-postcss-import。npminstall-Dpostcss-import接下来，使用@apply:.about{@applylg:min-h-screenlg:flexlg:items-center;h1{@applytext-xlfont-mediumtext-white;}}添加SVG加载器（可选）我更喜欢SVG，碰巧我们的新模板可以轻松导入SVG图像，但是有一个问题——我们必须将它用作组件意味着手动添加SVG代码模板标签，然后像这样导入它。幸运的是，有这样一个vit-svg-loader包，它基本上允许我们简单地将.svg文件作为组件导入Vue模板中。首先，安装它：npminstallvite-svg-loader--save-dev在vi??te.config.js配置文件中添加这个插件：importsvgLoaderfrom'vite-svg-loader'exportdefaultdefineConfig({plugins:[vue(),svgLoader()],...})最后，为了测试，将/src/assets/logo.svg中的Vue徽标代码更改为此，并保存：然后在/src/App.vue文件中，将其作为SVG组件导入并替换为至此，一个简单的模板框架就搭建完成了。下一步是什么？你可以在npm上发布它，然后使用类似的命令安装它：npmi@richardecom/vue3-boilerplate下面还有一个列表，你可以选择添加它：NuxtJSVueMetaVeeValidateVueToastification