從0到1,帶你搭建Vite+Vue3+Pinia+Naive UI後臺(二) - 配置篇(中)
highlight: nnfx-dark theme: cyanosis
預覽地址:vue-naive-admin
前言
此篇是系列文章第三篇,如沒有看過前兩篇文章建議先食用前兩篇文章
系列歷史文章: 1. 從0到1,帶你搭建Vite+Vue3+Pinia+Naive UI後臺(一) - 前置篇 - 掘金 (juejin.cn) 2. 從0到1,帶你搭建Vite+Vue3+Pinia+Naive UI後臺(二) - 配置篇(上) - 掘金 (juejin.cn)
配置篇
配置篇分上中下三部分,本篇主要介紹外掛配置 1. 環境配置 + vite配置 2. 外掛配置 3. eslint+prettier配置
外掛配置
本篇將介紹如何整合以下幾個外掛:
- vite-plugin-vue-setup-extend:擴充套件setup外掛,支援在script標籤中使用name屬性
- rollup-plugin-visualizer:rollup打包分析外掛
- vite-plugin-html:一個針對 index.html,提供壓縮和基於 ejs 模板功能的 vite 外掛
- unocss: 出自antfu的原子化css
在後續文章中也會按進度整合圖示外掛、元件庫按需引入外掛及mock外掛
整合 vite-plugin-vue-setup-extend
第一步:安裝vite-plugin-vue-setup-extend
sh
pnpm i vite-plugin-vue-setup-extend -D
第二步:在build資料夾下建立plugin/index.js
build/plugin/index.js ```js import vue from '@vitejs/plugin-vue'
/ * 擴充套件setup外掛,支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), ]
return plugins } ```
第三步: 修改vite.config.js
vite.config.js ```js import { defineConfig, loadEnv } from 'vite' import path from 'path'
import { wrapperEnv, createProxy } from './build/utils' import { createVitePlugins } from './build/plugin'
export default defineConfig(({ command, mode }) => { const isBuild = command === 'build' const env = loadEnv(mode, process.cwd()) const viteEnv = wrapperEnv(env) const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
return {
plugins: createVitePlugins(viteEnv, isBuild),
base: VITE_PUBLIC_PATH || '/',
resolve: {
// 設定別名
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
css: {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: @import '@/styles/variables.scss';
,
},
},
},
server: {
host: '0.0.0.0', // 預設為'127.0.0.1',如果將此設定為 0.0.0.0
或者 true
將監聽所有地址,包括區域網和公網地址
port: VITE_PORT, // 埠
proxy: createProxy(VITE_PROXY), // 代理
}
}
})
``` 檔案修改處如下圖所示:
整合rollup-plugin-visualizer
第一步:安裝rollup-plugin-visualizer
sh
pnpm i rollup-plugin-visualizer -D
第二步:修改build/plugin/index.js
build/plugin/index.js
```js import vue from '@vitejs/plugin-vue'
/ * 擴充套件setup外掛,支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'
export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), ]
if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }
return plugins } ```
第三步:打包驗證下外掛是否生效
sh
pnpm run build
正常應該會在根目錄產生一個stats.html
檔案,通過瀏覽器開啟這個檔案,會看到如下頁面,由於目前還算是一個空專案,所有還沒有太多的依賴項
第四步:將stats.html
新增到git忽略項
.gitignore ```sh ...
stats.html ```
stats.html
每次打包都會生成一個新的,無需通過git新增提交
整合vite-plugin-html
整合 vite-plugin-html
主要是為了對 index.html
進行壓縮和注入動態資料,例如替換網站標題和cdn
第一步:安裝vite-plugin-html
sh
pnpm i [email protected] -D
第二步:建立build/plugin/html.js
build/plugin/html.js ```js import html from 'vite-plugin-html'
export function configHtmlPlugin(viteEnv, isBuild) { const { VITE_APP_TITLE } = viteEnv const htmlPlugin = html({ minify: isBuild, inject: { data: { title: VITE_APP_TITLE, }, }, }) return htmlPlugin } ```
第三步:修改build/plugin/index.js
build/plugin/index.js ```js import vue from '@vitejs/plugin-vue'
/ * 擴充套件setup外掛,支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'
import { configHtmlPlugin } from './html'
export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), configHtmlPlugin(viteEnv, isBuild), ]
if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }
return plugins } ```
第四步:修改 index.html
的title,並重新啟動,驗證外掛是否整合成功
html
<title><%= title %></title>
如無意外將看到頁面的title已經被替換成我們配置好的title了
整合unocss
第一步:安裝依賴
sh
pnpm i unocss @unocss/preset-attributify @unocss/preset-icons @unocss/preset-uno -D
第二步:新建檔案 build/plugin/unocss.js
build/plugin/unocss.js ```js import Unocss from 'unocss/vite' import { presetUno, presetAttributify, presetIcons } from 'unocss'
export function unocss() { return Unocss({ presets: [presetUno(), presetAttributify(), presetIcons()], }) } ```
第三步:修改檔案 build/plugin/index.js
build/plugin/index.js ``` import vue from '@vitejs/plugin-vue'
/ * 擴充套件setup外掛,支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'
import { configHtmlPlugin } from './html' import { unocss } from './unocss'
export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), configHtmlPlugin(viteEnv, isBuild), unocss() ]
if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }
return plugins } ```
第四步:新建 styles/reset.scss
、styles/public.scss
、styles/index.scss
styles/reset.scss ```scss html { box-sizing: border-box; }
*, ::before, ::after { margin: 0; padding: 0; box-sizing: inherit; }
a { text-decoration: none; color: #333; }
a:hover, a:link, a:visited, a:active { text-decoration: none; }
ol, ul { list-style: none; }
input, textarea { outline: none; border: none; resize: none; }
body { font-size: 14px; font-weight: 400; } ```
styles/public.scss ```scss html { font-size: 4px; // * 1rem = 4px 方便unocss計算:在unocss中 1字型單位 = 0.25rem,相當於 1等份 = 1px }
html, body { width: 100%; height: 100%; overflow: hidden; background-color: #f2f2f2; font-family: 'Encode Sans Condensed', sans-serif; }
/ 滾動條樣式 / ::-webkit-scrollbar { width: 8px; background-color: #eee; }
::-webkit-scrollbar-thumb { background-color: #c1c1c1;
&:hover { background-color: #a8a8a8; } } ```
styles/index.scss
scss
@import './reset.scss';
@import './public.scss';
第步:修改 src/main.js
引入uno.css
src/main.js ```js import '@/styles/index.scss' import 'uno.css'
import { createApp } from 'vue' import App from './App.vue'
createApp(App).mount('#app') ```
第五步:修改 src/App.vue
,使用unocss以驗證unocss是否整合成功
src/App.vue ```vue
```
重新啟動看到以下頁面就證明整合成功了,另外 src/components/HelloWorld.vue
檔案可以直接刪除了
外掛篇暫時就介紹到這裡,本篇內容較多,但除了unocss其他都相對簡單,unocss的整合相對複雜,但整合後使用起來還是很爽的,重點是它足夠輕
如有跟著一起做的朋友可以git提交一下程式碼,如有錯誤之處請在評論區提醒指正,下一篇再見~
總結
開源不易,還請各位賞個star
原始碼-github:vue-naive-admin (github.com)
原始碼-gitee:vue-naive-admin (gitee.com)
下一篇計劃: 從0到1,帶你搭建Vite+Vue3+Pinia+Naive UI後臺(二) - 配置篇(下)