定制一個(gè) Vue 3 模板 - 集成 Vite, Pinia, Vue Router 與 Tailwind CSS
不久前，我意識(shí)到我正在用一些重復(fù)使用的后臺(tái)基礎(chǔ)模板，浪費(fèi)了我一些摸魚(yú)時(shí)間，我突然想到--為什么不把這些可重復(fù)使用的部分重新利用起來(lái)，把它們簡(jiǎn)單地堆在一個(gè)模板里呢？
技術(shù)棧
這個(gè)后臺(tái)模板中，用到了如下的框架或庫(kù)：
- Vite
- Pinia
- Vue Router
- Tailwind CSS
- Vite SVG loader
前提
開(kāi)始之前，首先要安裝 Node.js，這個(gè)自行百度解決。
快速入門(mén) - Vue, Router & Store
我們先從初始化模板開(kāi)始：
npm init vue
接著輸入項(xiàng)目名稱(chēng) vue3-boilerplate，然后在功能提示中選擇安裝 Pinia和 Vue Router:
? Project name: vue3-boilerplate
...
? Add Vue Router for Single Page Application development? Yes
? Add Pinia for state management? Yes
根據(jù)提示，選擇所需功能后，執(zhí)行如下命令：
cd vue3-boilerplate
npm install
npm run dev
運(yùn)行后在本地開(kāi)發(fā)環(huán)境中查看 http://127.0.0.1:5173 此示例頁(yè)面：
添加 Tailwind CSS
有了基礎(chǔ)后，現(xiàn)在我們需要一些樣式。按照這個(gè)指南，我們安裝Tailwind CSS，然后初始化配置文件。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
安裝完后，在根目錄中，會(huì)有一個(gè) tailwind.config.js文件，填充內(nèi)容如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
接下來(lái)，我們需要加載 @tailwind 指令，所以在 /src/assets 文件夾中創(chuàng)建tailwind.css，其中包含以下內(nèi)容(指令):
base;
components;
utilities;
然后在 /src/assets/main.css 頂部導(dǎo)入它：
"./tailwind.css";
由于我們已經(jīng)在 /src/main.js 中導(dǎo)入了 /src/assets/main.css 文件，所以，現(xiàn)在就可以在項(xiàng)目中使用 Tailwind 的實(shí)用類(lèi)了。
我們?cè)?nbsp;/src/views/AboutView.vue 中的 h1 標(biāo)簽添加一些實(shí)用類(lèi)來(lái)測(cè)試一下：
<template>
<div class="about">
<h1 class="text-xl font-medium text-white">This is an about page</h1>
</div>
</template>
我們也可以在下面單獨(dú)定義我們的CSS屬性。要做到這一點(diǎn)，需要安裝這個(gè)PostCSS插件 - postcss-import。
npm install -D postcss-import
接著，在實(shí)用類(lèi)中使用 @apply:
<style lang="scss">
.about {
lg:min-h-screen lg:flex lg:items-center;
h1 {
text-xl font-medium text-white;
}
}
</style>
添加 SVG loader （可選）
我比較喜歡SVG，恰好，我們新的模板可以很容易地導(dǎo)入SVG圖像，但有一個(gè)問(wèn)題--我們必須把它作為組件使用，這意味著需要手動(dòng)在模板標(biāo)簽中添加SVG代碼，然后像這樣導(dǎo)入。
幸運(yùn)的是，有這樣一個(gè) vit-svg-loader 包，它基本上可以讓我們?cè)赩ue模板中簡(jiǎn)單地導(dǎo)入 .svg 文件作為組件。
首先，安裝它：
npm install vite-svg-loader --save-dev
在 vite.config.js 配置文件中添加這個(gè)插件:
import svgLoader from 'vite-svg-loader'
export default defineConfig({
plugins: [vue(), svgLoader()],
...
})
最后，為了測(cè)試，把/src/assets/logo.svg 中的 Vue logo 代碼改成這個(gè)，然后保存:
<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組件導(dǎo)入，并用<img class="logo" />替換它。
<script setup>
...
import LogoSVG from './assets/logo.svg?component'
</script>
<template>
...
<LogoSVG alt="Vite logo" class="logo" />
...
</template>
至此，一個(gè)簡(jiǎn)單的模板框架就搭建完啦。
下一步是什么？
你可以將它，發(fā)布到 npm 上，然后可以類(lèi)似的命令安裝：
npm i /vue3-boilerplate
下面還有份清單，你可以選擇性添加進(jìn)去：
- NuxtJS
- Vue Meta
- VeeValidate
- Vue Toastification
