定制一个 Vue 3 模板 - 集成 Vite, Pinia, Vue Router 与 Tailwind CSS

发布时间：2025-11-05 15:32:29 来源：创站工坊 作者：应用开发

不久前，定制我意识到我正在用一些重复使用的模板后台基础模板，浪费了我一些摸鱼时间，集成我突然想到--为什么不把这些可重复使用的定制部分重新利用起来，把它们简单地堆在一个模板里呢？模板

技术栈

这个后台模板中，用到了如下的集成框架或库：

前提

开始之前，首先要安装 Node.js，定制这个自行百度解决。模板

快速入门 - Vue,集成 Router & Store

我们先从初始化模板开始：

接着输入项目名称 vue3-boilerplate，然后在功能提示中选择安装 Pinia和 Vue Router:

✔ Project name: vue3-boilerplate

...

✔ Add Vue Router for Single Page Application development?定制 Yes

根据提示，选择所需功能后，模板执行如下命令：

cd vue3-boilerplate

npm install

运行后在本地开发环境中查看 http://127.0.0.1:5173 此示例页面：

添加 Tailwind CSS

有了基础后，集成现在我们需要一些样式。定制按照这个指南，模板我们安装Tailwind CSS，集成然后初始化配置文件。

npm install -D tailwindcss postcss autoprefixer

安装完后，在根目录中，会有一个 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;

然后在 /src/assets/main.css 顶部导入它：

由于我们已经在 /src/main.js 中导入了 /src/assets/main.css 文件，所以，现在就可以在项目中使用 Tailwind 的实用类了。

我们在 /src/views/AboutView.vue 中的 h1 标签添加一些实用类来测试一下：

This is an about page

我们也可以在下面单独定义我们的CSS属性。要做到这一点，需要安装这个PostCSS插件 - postcss-import。

接着，在实用类中使用 @apply:

.about {

@apply lg:min-h-screen lg:flex lg:items-center;

h1 {

@apply text-xl font-medium text-white;

}

}

添加 SVG loader （可选）

我比较喜欢SVG，恰好，我们新的模板可以很容易地导入SVG图像，但有一个问题--我们必须把它作为组件使用，这意味着需要手动在模板标签中添加SVG代码，然后像这样导入。

幸运的源码库是，有这样一个 vit-svg-loader 包，它基本上可以让我们在Vue模板中简单地导入 .svg 文件作为组件。

首先，安装它：

在 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组件导入，并用<img class="logo" />替换它。

...

import LogoSVG from ./assets/logo.svg?component

...

...

至此，一个简单的模板框架就搭建完啦。

下一步是什么？

你可以将它，发布到 npm 上，然后可以类似的命令安装：

下面还有份清单，你可以选择性添加进去：

相关文章