【開箱即用腳手架】Vue2.7 + Vite + Eslint + Stylelint + Commitlint 工程化實踐

語言: CN / TW / HK

Vue2.7 已經發布正式版啦,不出意外的話這應該是 Vue2 的最後一個版本了,但是很多公司目前還沒有升級 Vue3 的打算(比如我們)。

所以封裝了這麼一個開箱即用的腳手架模板,腳手架的功能可以看下面的功能列表小節,並且配備完整的技術文檔。

JS 代碼格式化

在工作中,一個項目往往是很多人共同開發,因為每個人的編碼習慣都不一樣,就會增加後期維護成本。

為了解決這個問題,我們一般會定義一個開發規範文檔,使用約定的方式來統一項目的編碼規範。

有了規範文檔之後,我們就會在開發中小心翼翼的調整代碼風格,每行、每列、每個雙引號。這樣無疑也會影響開發效率,而且忙的時候可能還會忘記某些規範條例。

為了更好的統一團隊的編碼規範,在這裏我使用了 EditorConfig + ESLint + Prettier 這些工具來輔助解決規範性問題。

EditorConfig

EditorConfig 主要用於統一不同 IDE 編輯器的編碼風格。

當然每個團隊最好還是統一一個代碼編輯器。

在根目錄下添加 .editorconfig 文件:

```plain

EditorConfig is awesome: https://EditorConfig.org

top-most EditorConfig file

root = true

[*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = false insert_final_newline = false ```

很多 IDE 中會默認支持此配置,但是也有些不支持,如:VSCode、Atom、Sublime Text 等。

具體列表可以參考官網,如果在 VSCode 中使用需要安裝 EditorConfig for VS Code 插件。

ESLint

ESLint 是針對 EScript 的一款代碼檢測工具,它可以檢測項目中編寫不規範的代碼,如果寫出不符合規範的代碼會被警告。

由此我們就可以藉助於 ESLint 強大的功能來統一團隊的編碼規範。

  1. 安裝依賴

  2. eslint - Eslint 本體

  3. eslint-define-config- 改善 ESLint 規範編寫體驗
  4. eslint-plugin-vue- 適用於 Vue 文件的 ESLint 插件
  5. vue-eslint-parser- 使用 eslint-plugin-vue 時必須安裝的 eslint 解析器

bash pnpm add eslint eslint-define-config eslint-plugin-vue vue-eslint-parser -D

  1. 添加 ESLint 配置文件

在根目錄添加一個 .eslintrc.js 文件,內容如下:

```javascript const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({ root: true, env: { browser: true, node: true, es6: true }, parser: 'vue-eslint-parser', parserOptions: { ecmaFeatures: { jsx: true } }, extends: [ /* * 繼承 eslint-plugin-vue 插件的規則 * @link https://eslint.vuejs.org/user-guide/#installation / 'plugin:vue/recommended' ], rules: { 'vue/multi-word-component-names': 'off' } }) ```

關於配置文件中的選項大家去看官方文檔,已經寫得很詳細了。

  1. 添加 ESLint 過濾規則

在根目錄添加一個 .eslintignore 文件,內容如下:

plain public dist

Prettier

Prettier 是一款強大的代碼格式化工具,這裏我們使用 ESLint + Prettier 來格式化代碼。

  1. 安裝依賴

  2. prettier - prettier 本體

  3. eslint-config-prettier - 關閉 ESLint 中與 Prettier 中發生衝突的規則
  4. eslint-plugin-prettier - 將 Prettier 的規則設置到 ESLint 的規則中

bash pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D

  1. 添加 Prettier 配置文件

在根目錄添加一個 .prettierrc.js 文件,內容如下:

javascript module.exports = { semi: false, singleQuote: true, printWidth: 80, trailingComma: 'none', arrowParens: 'avoid', }

  1. 修改 ESLint 配置,使 Eslint 兼容 Prettier 規則

```javascript const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({ /// ... extends: [ 'plugin:vue/vue3-recommended', /* * 繼承 eslint-plugin-prettier 插件的規則 * @link https://github.com/prettier/eslint-plugin-prettier / 'plugin:prettier/recommended' ], // ... }) ```

自動格式化代碼

做好以上配置之後,在編碼時不符合規範的地方就會被編輯器標註出來,可以使我們更好的發現問題。

如果你用的是VScode,還可以工作區配置中,添加如下代碼,之後就可以享受保存時自動格式化的功能了:

json { "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": true } }

CSS 代碼格式化

Stylelint 是一個強大、先進的 CSS 代碼檢查器(linter),可以幫助你規避 CSS 代碼中的錯誤並保持一致的編碼風格。

  1. 安裝依賴

  2. stylelint - Stylelint 本體

  3. stylelint-config-prettier- 關閉 Stylelint 中與 Prettier 中會發生衝突的規則。
  4. stylelint-config-rational-order - 對 CSS 聲明進行排序
  5. stylelint-config-standard- Stylelint 官方推薦規則
  6. stylelint-order 使用 stylelint-config-rational-order 時依賴的模塊

bash pnpm add stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-order -D

  1. 添加 StyleLint 配置文件

在根目錄添加一個 .stylelintrc.js 文件,內容如下:

javascript module.exports = { root: true, extends: [ 'stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier' ], defaultSeverity: 'warning', plugins: ['stylelint-order'], rules: { 'no-empty-source': null, 'selector-class-pattern': null } }

在根目錄添加一個 .stylelintignore 文件,內容如下:

plain public dist

  1. 啟用 Vue 文件支持

stylelint v14 版本默認是不支持 vue 文件中的 style 代碼自動檢測,詳情我們可以查看官方遷移指南,具體配置如下:

  • stylelint-config-html 解析 vue 文件
  • postcss-html 使用 stylelint-config-html 依賴的模塊
  • postcss-less 對 less 文件進行解析

bash pnpm add stylelint-config-html postcss-html postcss-less -D

  1. 修改 .stylelintrc.js 文件:

javascript module.exports = { root: true, extends: [ 'stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier', 'stylelint-config-html/vue' // 需要放在最後一位 ], defaultSeverity: 'warning', plugins: ['stylelint-order'], rules: { 'no-empty-source': null, 'selector-class-pattern': null }, overrides: [ { files: ['*.vue', '**/*.vue'], rules: { 'selector-pseudo-class-no-unknown': [ true, { ignorePseudoClasses: ['deep', 'global'] } ], 'selector-pseudo-element-no-unknown': [ true, { ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'] } ] } } ] }

  1. 在 VSCode 工作區配置中,添加如下代碼:

json { "stylelint.validate": ["vue"] // Add "vue" language. }

Husky Git Hook 工具

husky Git Hook 工具,為 git 提供一系列鈎子函數,在提交前(pre-commit)、提交消息(commit-msg)等鈎子觸發時可以為我們執行一些腳本。

我們可以使用 husky 工具來進行代碼提交前的自動格式化,以及 commit message 的校驗。

提交前代碼格式化

  1. 首先安裝 husky

bash pnpm add husky -D

  1. 初始化 husky

bash pnpm husky install

並在 package.json 中添加如下內容

json { "scripts": { //... "prepare": "husky install" } }

  1. 添加 git hook

bash pnpm husky add .husky/pre-commit

到這裏之後我們還需要使用另外一個工具: lint-staged,它是對 git 暫存區文件進行 lint 檢查的工具。

  1. 安裝 lint-staged

bash pnpm add lint-staged -D

  1. package.json 中添加如下配置

json { //... "lint-staged": { "*.{js,ts,jsx,tsx}": [ "prettier --write", "eslint --fix" ], "*.vue": [ "stylelint --fix", "prettier --write", "eslint --fix" ], "*.{less,css}": [ "stylelint --fix", "prettier --write" ] } }

  1. .husky/pre-commit 文件中寫入以下內容

```shell

!/bin/sh

. "$(dirname "$0")/_/husky.sh"

pnpm lint-staged ```

經過以上配置之後,我們就可以在每次提交之前對所有代碼進行格式化,保證線上代碼的規範性。

在實際中如果遇見 Use the --allow-empty option to continue, or check your task configuration 這個問題。

我們可以修改 pnpm lint-stagedpnpm lint-staged --allow-empty 來暫時屏蔽這個問題。

Commitlint 提交信息校驗

我們在使用 git commit 時,git 會記錄每一次的 commit message(提交信息)。

正確的描述 commit message 在多人協同開發一個項目時,顯得尤其重要。

這裏我們可以看一下 angularcommit message,會發現它的描述特別的清晰明瞭。

commitlint 就是對 commit message 進行的檢查的一個工具,當不規範時會終止提交。

  1. 安裝依賴

  2. @commitlint/cli- Commitlint 本體

  3. @commitlint/config-conventional- 通用的提交規範

bash pnpm add @commitlint/cli @commitlint/config-conventional -D

  1. 創建 commitlint 配置

在根目錄添加一個 .commitlintrc.js 文件,內容如下:

javascript module.exports = { extends: ['@commitlint/config-conventional'] }

  1. 在 git commit-msg 時進行檢查

執行下面這條命令即可:

bash pnpm husky add .husky/commit-msg "pnpm commitlint --edit $1"

Commit Message 格式

配置完成之後就可以在每次 git commit 時對 commit message 進行校驗了,規範有兩種格式:單行信息和多行信息。

  1. 單行信息

用於業務代碼提交時使用,業務代碼一般來説更改比較多而且無法具體説明其信息,具體的還需要看產品文檔,所以用單行信息即可。

xml <type>(<scope>): <subject>

  1. 多行信息

用於提交一些不經常更改的功能型代碼時使用,如:某個功能函數的新增、修改或重構,目錄結構的調整(工程化調整),架構的更改等,這些我們需要進行詳細説明防止出現遺忘。

```xml (): // 空行

``` 字段描述: - `type` 類型 - `scope` 影響的範圍, 比如: \*(全局),route, component, utils, build,readme,css 等, - `subject` 概述, 建議符合 [50/72 formatting](https://link.zhihu.com/?target=https%3A//stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting) - `body` 具體修改內容,描述為什麼修改, 做了什麼樣的修改, 以及開發的思路等等,可以分為多行, 建議符合 [50/72 formatting](https://link.zhihu.com/?target=https%3A//stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting) - `footer` 一些備註, 通常是 Breaking Changes(重要改動) 或 Closed Issues(修復 Bug 的鏈接) `type` 類型有以下幾種: | 類型 | 描述 | | :------- | :----------------------------------- | | build | 發佈版本 | | chore | 改變構建流程、或者增加依賴庫、工具等 | | ci | 持續集成修改 | | docs | 文檔修改 | | feat | 新特性 | | fix | 修改問題 | | perf | 優化相關,比如提升性能、體驗 | | refactor | 代碼重構 | | revert | 回滾到上一個版本 | | style | 代碼格式修改 | | test | 測試用例修改 | 示例: ``` feat(eslint): 集成 eslint - xcder - 2022.07.01 1. Vscode 安裝 Eslint 插件即可在保存時自動格式化 2. 運行 pnpm lint:eslint 可全局進行代碼格式化 可以瀏覽 docs/1.工程化實踐/1.eslint 文件瞭解詳情。 ``` ## VueRouter 路由 Vue2.x 中只能使用 vue-router 3 版本。 ### 目錄説明 有關路由的功能都在以下的目錄中。 ```sh . ├── src # 主目錄 │ ├── main.js # 主入口 │ ├── router # 路由配置 │ │ ├── guard # 路由守衞 │ │ ├── modules # 路由模塊 │ │ └── index.js │ └── views # 頁面 ``` ### route modules 關於路由表,建議根據功能的不同來拆分到 modules 文件夾中。 這樣做的好處是: 1. 方便後期維護 2. 減少 Git 合併代碼時的衝突的可能 ### Composition-API 中使用 vue-router 3 版本目前對 Composition-API 的支持不是很友好,這裏在 hooks/useRouter 中封裝了兩個方法,還原 vue-router 4 中的使用方法: 1. `useRouter` 2. `useRoute` ```javascript import { watch } from 'vue' import { useRoute, useRouter } from '@/hooks/useRouter' export default { setup() { const route = useRoute() const router = useRouter() watch(route, () => { console.log('route 變化', route.value) }) function routeChange() { router.push({ path: '/home', query: { key: Date.now() } }) } return { routeChange } } } ``` ## 全局狀態管理 這裏全局狀態管理器選擇了 [Pinia](https://pinia.vuejs.org/),之所以沒有選擇 Vuex,對於我來説最主要的原因有兩點: 1. Vue3 官方文檔中,已經將 Pinia 放入官方推薦的核心庫位置中了。 2. 對 Composition-API 具有更好的支持。 接下來看一段官方的説明: > Pinia 最初是為了探索 Vuex 的下一次迭代會是什麼樣子,結合了 Vuex 5 核心團隊討論中的許多想法。最終,我們意識到 Pinia 已經實現了我們在 Vuex 5 中想要的大部分內容,並決定實現它 取而代之的是新的建議。 > > 與 Vuex 相比,Pinia 提供了一個更簡單的 API,具有更少的規範,提供了 Composition-API 風格的 API,最重要的是,在與 TypeScript 一起使用時具有可靠的類型推斷支持。 ### 目錄説明 有關全局狀態管理的功能都在以下的目錄中。 ```sh . ├── src # 主目錄 │ ├── main.js # 主入口 │ ├── store # store 配置 │ │ ├── modules # store 模塊 │ │ └── index.js │ └── views # 頁面 ``` ### store modules 我們在開發中需要將不同功能所對應的狀態,拆分到不同的 modules,好處在 route moduels 中已經描述過了。 ## 組件庫 關於組件庫可選擇的就有很多了,因為可能每個人需要的都不相同,這裏就不集成到腳手架模板中了。 有一點需要注意的是,Vue2.7 還是隻能使用 Vue2.x 相關的組件庫。 ## Axios 封裝及接口管理 這裏接口請求使用的是基於 Promise 封裝的請求庫 [Axios](https://axios-http.com/zh/),也是現在使用很廣泛的一個請求庫。 ### 目錄説明 有關請求庫的功能都在以下的目錄中。 ```sh . ├── src # 主目錄 │ ├── api # api 方法配置 │ │ └── demo.js # 演示方法 │ └── utils # 公共方法 │ └── request.js # axios 請求庫二次封裝 ``` 在開發時,我們先在 `utils/requset.js` 中配置好適合自己業務的請求攔截和響應攔截: ```javascript import axios from 'axios' const services = axios.create({ baseURL: '/api', timeout: 8000 }) // 請求攔截 services.interceptors.request.use( config => { /** * 在這裏一般會攜帶前台的參數發送給後台,比如下面這段代碼: * const token = getToken() * if (token) { * config.headers.token = token * } */ return config }, error => { return Promise.reject(error) } ) // 響應攔截 services.interceptors.response.use( response => { const res = response.data /** * 這裏使用的是自定義 Code 碼來做統一的錯誤處理 * code 等於 -1 則代表接口響應出錯(可根據自己的業務來進行修改) */ if (res.code === -1) { const msg = res.message || '未知錯誤,請聯繫管理員查看' console.error('[api]', msg) return Promise.reject(msg) } return res.data }, error => { const { response } = error if (response && response.data) { return Promise.reject(error) } else { const { message } = error console.error('[api]', message) return Promise.reject(error) } } ) export default services ``` 之後在 `api` 文件夾中定義請求方法,這裏我一般會以功能進行拆分,同一個功能的請求方法封裝在一個文件,之後在需要的地方進行調用。 ## Css 樣式處理 ### 統一瀏覽器默認樣式 在 Web 開發時,因為瀏覽器內核的不同,所以會導致某些 Html 元素默認的渲染樣式有所差別,雖然很細微,但是會影響我們在不同瀏覽器中的顯示效果。 為了解決這個問題,聰明的開發者就將某個元素在各個瀏覽器中表現不同的樣式,通過一段 CSS 進行重置,然後再進行開發,這樣就可以保證每個瀏覽器顯示效果的統一性。 目前常用的有兩種解決方案: 1. Normalize - [normalize.css](https://necolas.github.io/normalize.css/) 偏向於修復瀏覽器的默認 BUG 和一致性,但是保留元素的默認樣式。 2. Reset - [reset.css](https://meyerweb.com/eric/tools/css/reset/) 偏向於完全重置瀏覽器默認樣式,可控性更高。 在本項目中,我們結合兩種方案進行使用,代碼在 `styles/normalize.css` 和 `styles/reset.css` 中。 ### Less 預處理器 在 Vite 中使用 Less,我們只需要運行以下命令即可: ```bash pnpm add less -D ``` > 如果需要使用 sass 則把 less 換成 sass 就行。 安裝完成之後,無需多餘配置,vite 即可對 less 樣式進行解析。 在 Vue 文件中,我們如下,即可使用 less 進行樣式的編寫: ```vue ``` > 這裏 CSS 命名規範推薦 BEM 命名規範,具體可以自行搜索瞭解。 #### Less 全局變量/方法 一般在項目中會有自己的設計規範,比如像 Element、Antd,它就有一套自己的樣式規範。 其中像顏色、邊框、邊距等都有統一的規範,當我們改一處,所有地方都會改變,這就用到了 less 的變量和 mixin。 然而我們每處都 `@import` 就比較麻煩,這個時候我們可以使用在 vite 中進行 less 的全局樣式配置。 ```js import { defineConfig } from 'vite' import { resolve } from 'path' function pathResolve(dir) { return resolve(process.cwd(), '.', dir) } // 全局變量 const variablesLessPath = pathResolve('./src/styles/global/variables.less') // 全局方法 const utilsLessPath = pathResolve('./src/styles/global/utils.less') export default defineConfig({ css: { preprocessorOptions: { less: { modifyVars: { hask: ` true; @import (reference) "${variablesLessPath}"; @import (reference) "${utilsLessPath}"; ` }, javascriptEnabled: true } } } }) ``` ### Vue 樣式穿透 [官方文檔](https://vuejs.org/api/sfc-css-features.html#scoped-css) 在 Vue2.7 中,改變了以往樣式穿透的語法,如果繼續使用 `::v-deep`、`/deep/`、`>>>` 等語法的話,會出現一個警告,下面是新的語法: ```css /* 深度選擇器 */ :deep(selector) { /* ... */ } /* 插槽選擇器 */ :slotted(selector) { /* ... */ } /* 全局選擇器 */ :global(selector) { /* ... */ } ``` ## Vite 基礎配置 ### 目錄説明 有關 vite 配置的功能都在以下的目錄中。 ```sh . ├── build # 打包配置文件 ├── src # 主目錄 │ ├── utils │ │ └── env.js # 環境變量判斷方法 ├── .env # 基礎環境變量 ├── .env.development # 開發環境變量 ├── .env.production # 生產環境變量 └── vite.config.js # vite 配置 ``` ### 基礎配置 完整的 vite 配置如下所示,配置了大概有以下的功能: 1. 環境變量 2. alias 別名 3. 跨域配置 4. 構建兼容性 5. less 全局樣式 ```javascript import vue from '@vitejs/plugin-vue2' import legacy from '@vitejs/plugin-legacy' import serverProxy from './build/proxy' import { defineConfig, loadEnv } from 'vite' import { pathResolve, wrapperEnv } from './build/utils' const variablesLessPath = pathResolve('./src/styles/global/variables.less') const utilsLessPath = pathResolve('./src/styles/global/utils.less') // https://vitejs.dev/config/ export default ({ mode, command }) => { const root = process.cwd() const isBuild = command === 'build' // 在 vite 配置文件中使用環境變量,需要通過 loadEnv 來加載 const env = loadEnv(mode, root) const { VITE_PUBLIC_PATH, VITE_OUTPUT_DIR, VITE_PORT, VITE_LEGACY } = wrapperEnv(env) const plugins = [vue()] /** * vite 默認打包文件帶有 ES6 語法,在舊版瀏覽器中是不支持的。 * 為了支持舊版瀏覽器,可以在 .env.production 中開啟 VITE_LEGACY 設置 */ if (isBuild && VITE_LEGACY) { plugins.push(legacy()) } return defineConfig({ root, base: VITE_PUBLIC_PATH, plugins, resolve: { alias: { // @/xxxx => src/xxxx '@': pathResolve('./src') } }, server: { host: true, port: VITE_PORT, proxy: serverProxy }, build: { /** * 最終構建的瀏覽器兼容目標 * https://www.vitejs.net/config/#build-target */ target: 'es2015', outDir: VITE_OUTPUT_DIR, brotliSize: false, // 關閉 brotli 壓縮大小報告,可提升構建速度 chunkSizeWarningLimit: 2000 // chunk 大小警告的限制(以 kbs 為單位) }, css: { preprocessorOptions: { less: { modifyVars: { hask: ` true; @import (reference) "${variablesLessPath}"; @import (reference) "${utilsLessPath}"; ` }, javascriptEnabled: true } } } }) } ``` ### 跨域配置 這裏我們使用的是 vite 自帶的 [http-proxy](https://github.com/http-party/node-http-proxy) 來解決跨域,這也是我們在開發中比較常見的解決跨域的一種方式。 我們打開 `build/proxy.js` 文件可以看到其中有一個 `proxyList` 變量,我們的跨域配置寫在這裏即可。 ```javascript const proxyList = [ { prefix: '/demo', target: 'http://localhost:3000/demo', removePrefix: true }, { prefix: '/api', target: 'http://localhost:3000/api' } ] // 以上配置最終會被轉換為 vite 所需要的格式: { '/demo': { target: 'http://localhost:3000/demo', changeOrigin: true, ws: true, rewrite: path => path.replace(new RegExp('^/demo'), '') }, '/api': { target: 'http://localhost:3000/demo', changeOrigin: true, ws: true, } } ``` ### 環境變量 [官方文檔](https://www.vitejs.net/guide/env-and-mode.html) 在本腳手架中配置了2種環境: 1. development 開發環境 2. production 生產環境 環境變量數據在 vue 項目中可以直接使用 `import.meta.env` 這個變量獲取,比如 `src/utils/env.js` 中: ```javascript /** * 是否為開發環境 * @returns {Boolean} */ export function isDev() { return import.meta.env.DEV } /** * 是否為生產環境 * @returns {Boolean} */ export function isProd() { return import.meta.env.PROD } ``` 但是如果需要在 `vite.config.js` 中使用的話,需要用到 `loadEnv` 這個方法: ```javascript import { defineConfig, loadEnv } from 'vite' export default ({ mode }) => { // 通過 loadEnv 獲取環境變量數據 const env = loadEnv(mode, process.cwd()) return defineConfig({ /* vite 配置 */ }) } ``` ## 代碼規範 > 代碼規範大家可以參考 [Vue 官方風格指南](https://cn.vuejs.org/v2/style-guide/) 這裏寫的還是很詳細的。 下面簡單寫一下在項目中開發的一些規範: 1. 命名規範 - 整體採用小駝峯命名(JS 變量名,函數名等等); - 組件和類名採用大駝峯命名; - 文件採用全小寫命名,單詞之間由短橫線分割; - 變量,方法,文件命名保持語義化,使人一眼就能確定其作用。 1. 註釋規範 - 寫註釋的作用是使代碼更加方便閲讀,所以沒必要每行都寫註釋,大部分可以通過規範的命名來解決代碼閲讀問題; - 功能、算法相關的函數一定要寫註釋,採用 [JSDoc](https://www.html.cn/doc/jsdoc/tags-example.html) 規範。 1. 開發規範 - 在編寫代碼時,首先**保證代碼可讀性**。 - 功能開發時,遵守單一功能原則(每部分只負責一個功能),多進行拆分,保證可維護性; - 組件開發時,把通用、常用的組件進行拆分,保證可維護性。 ## 案例代碼 以上這些配置都是項目中比較常用而且沒有很大難度的工程化配置內容,只要用心走一遍,基本就可以掌握了。 這裏適配的為 Vue2.7 版本,如果需要使用 Vue3 的話,把以下 3 個依賴以及對應的功能修改一下,即可適用: 1. `vue` 2.7.0 -> 3.x 2. `vue-router` 3.5.4 -> 4.x 3. `@vitejs/plugin-vue2` -> `@vitejs/plugin-vue` 最後放上案例代碼:[vue2.7-vite-cli](https://github.com/Only-Xc/vue2.7-vite-cli)。 如果以上內容對您有幫助的話,請給我一個小🌟🌟,有什麼還需要改進的地方,也歡迎大家來指點。