通過(guò)官方腳手架初始化項(xiàng)目

第一種方式，這是使用vite命令創(chuàng)建，這種方式除了可以創(chuàng)建vue項(xiàng)目，還可以創(chuàng)建其他類型的項(xiàng)目，比如react項(xiàng)目

npm init vite@latest

第二種方式，這種方式是vite專門為vue做的配置，這種方式創(chuàng)建的項(xiàng)目在創(chuàng)建時(shí)會(huì)提示是否需要安裝各種插件配置

npm init vue@latest

第三種方式，直接快速通過(guò)參數(shù)生成

npm init vite@latest project-engineer --template vue-ts

定制化 plugins

@vitejs/plugin-vue-jsx

提供 Vue 3 JSX & TSX 支持（通過(guò)?專用的 Babel 轉(zhuǎn)換插件）。

安裝

npm i -D @vitejs/plugin-vue-jsx

配置?vite.config.ts

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vueJsx({// options 參數(shù)將傳給 @vue/babel-plugin-jsx}),],
})

rollup-plugin-visualizer

可視化并分析構(gòu)建包，查看哪些模塊占用空間大小，以此來(lái)優(yōu)化構(gòu)建包的大小。這是一個(gè) Rollup 的 plugin，推薦這個(gè)也是 vite 的一個(gè)特性，vite 默認(rèn)已經(jīng)支持大部分的 Rollup 的 plugin，從這點(diǎn)來(lái)看，vite 的 plugin 庫(kù)更加豐富了。

安裝

npm i -D rollup-plugin-visualizer

配置?vite.config.ts

import { defineConfig } from 'vite'
import visualizer from 'rollup-plugin-visualizer'export default defineConfig({plugins: [visualizer()],
})

vite-plugin-element-plus

為 ElementPlus 提供按需引入能力。全量導(dǎo)入 ElementPlus 導(dǎo)致構(gòu)建包的體積過(guò)大，按需引入有效的減小包的體積。此包的原理是動(dòng)態(tài)將每個(gè)按需引入的組件 css 寫入。

安裝

npm i -D vite-plugin-element-plus

配置?vite.config.ts

import { defineConfig } from 'vite'
import importElementPlus from 'vite-plugin-element-plus'export default defineConfig({plugins: [// @ts-ignore 此處暫時(shí)需要使用 ignore// 原因是包內(nèi)部的 options 未做非必填兼容// 目前已有人提了 PR，未合并，使用可以觀望下importElementPlus(),],
})

基于 husky + lint-staged 項(xiàng)目規(guī)范化

• Husky 支持所有 Git 鉤子，當(dāng)您提交或推送時(shí)，您可以使用 husky 來(lái)檢查您的提交消息、運(yùn)行測(cè)試、檢查代碼等。安裝后，它會(huì)自動(dòng)在倉(cāng)庫(kù)中的?.git/?目錄下增加相應(yīng)的鉤子，比如?pre-commit?鉤子就會(huì)在你執(zhí)行?git commit?的觸發(fā)。那么我們可以在?pre-commit?中實(shí)現(xiàn)一些比如?lint?檢查、單元測(cè)試、代碼美化等操作。當(dāng)然，pre-commit?階段執(zhí)行的命令當(dāng)然要保證其速度不要太慢，每次 commit 都等很久也不是什么好的體驗(yàn)。

• lint-staged，一個(gè)過(guò)濾出 Git 代碼暫存區(qū)文件（被 git add 的文件）的工具。這個(gè)很實(shí)用，因?yàn)槲覀內(nèi)绻麑?duì)整個(gè)項(xiàng)目的代碼做一個(gè)檢查，可能耗時(shí)很長(zhǎng)，如果是老項(xiàng)目，要對(duì)之前的代碼做一個(gè)代碼規(guī)范檢查并修改的話，這可能就麻煩了呀，可能導(dǎo)致項(xiàng)目改動(dòng)很大。所以?lint-staged，對(duì)團(tuán)隊(duì)項(xiàng)目和開源項(xiàng)目來(lái)說(shuō)，是一個(gè)很好的工具，它是對(duì)個(gè)人要提交的代碼的一個(gè)規(guī)范和約束。

Eslint

eslint?用于配置代碼風(fēng)格、質(zhì)量的校驗(yàn)，prettier用于代碼格式的校驗(yàn)，lint-staged?過(guò)濾文件。

本項(xiàng)目已經(jīng)默認(rèn)安裝 eslint、prettier，如果需要單獨(dú)安裝，執(zhí)行以下命令：

# 安裝 eslint
npm i eslint -D
# 利用 eslint 命令行工具生成基本配置
npx eslint --init

生成的 .eslintrc.cjs 文件，如下：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest'}
}

做一下配置補(bǔ)充

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,env: {browser: true,node: true,es6: true},'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest',sourceType: 'module',ecmaFeatures: {jsx: true}},plugins: ['@typescript-eslint'],rules: {}
}

這里為什么生成的配置文件名稱是.eslintrc.cjs而不是.eslintrc.js？

因?yàn)槲覀儗㈨?xiàng)目定義為 ESM，eslint --init?會(huì)自動(dòng)識(shí)別 type，并生成兼容的配置文件名稱，如果我們改回?.js?結(jié)尾，再運(yùn)行?eslint?將會(huì)報(bào)錯(cuò)。出現(xiàn)這個(gè)問(wèn)題是?eslint?內(nèi)部使用了?require()?語(yǔ)法讀取配置。

同樣，這個(gè)問(wèn)題也適用于其他功能的配置，比如后面會(huì)講到的 Prettier、Commitlin t等，配置文件都不能以 xx.js 結(jié)尾，而要改為當(dāng)前庫(kù)支持的其他配置文件格式，如：.xxrc、.xxrc.json、.xxrc.yml。

Prettier

Prettier 如果需要單獨(dú)安裝，執(zhí)行以下命令：

# 安裝 prettier
npm i prettier -D

.prettierrc.json 默認(rèn)配置如下（沒(méi)有這個(gè)文件的需要自行創(chuàng)建）

{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "none"
}

• semi:false 句末是否使用分號(hào)（false | true）

• singleQuote:true 是否使用單引號(hào)代替雙引號(hào)（false | true）

• trailingComma:'none' 最后一個(gè)對(duì)象元素是否加逗號(hào), 'none' 為不加

• tabWidth 設(shè)置工具每一個(gè)水平縮進(jìn)的空格數(shù)

• printWidth 換行字符串閾值

• bracketSpacing:true 對(duì)象，數(shù)組是否加空格（false | true）

• jsxBracketSameLine:true jsx > 是否另起一行（false | true）

• arrowParens :’always‘ (x) => {} 是否要有小括號(hào)，值為 ’always‘ 則需要

• requirePragma:false 是否需要寫文件開頭的 @prettier （false | true）

• insertPragma:false 是否需要自動(dòng)在文件開頭插入 @prettier

Prettierrc & ESLint 規(guī)則沖突的解決

eslint?用于配置代碼風(fēng)格、質(zhì)量的校驗(yàn)，prettier用于代碼格式的校驗(yàn)，lint-staged?過(guò)濾文件。

但兩者在使用過(guò)程中，會(huì)因?yàn)橐?guī)則不同，有出現(xiàn)沖突的可能性，所以需要通過(guò)插件加強(qiáng)兩者的配合：

• eslint-plugin-prettier?一個(gè) ESLint 插件， 由 prettier 生態(tài)提供，用于關(guān)閉可能與 prettier 沖突的規(guī)則

• eslint-config-prettier?使用 prettier 代替 eslint 格式化，防止 Prettier 和 ESLint 的自動(dòng)格式化沖突

安裝

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier -D

Husky

因?yàn)橐粋€(gè)項(xiàng)目通常是團(tuán)隊(duì)合作，我們不能保證每個(gè)人在提交代碼之前執(zhí)行一遍 lint 校驗(yàn)， 所以需要 git hooks 來(lái)自動(dòng)化校驗(yàn)的過(guò)程，否則禁止提交。

# 安裝 husky
npm i husky -D# 生成 .husky 文件夾（注意：這一步操作之前，一定要執(zhí)行 git init 初始化當(dāng)前項(xiàng)目倉(cāng)庫(kù)，.husky 文件夾才能創(chuàng)建成功）
npx husky-init install

在 package.json 中添加 'prepare' 指令

"scripts": {// 省略其它指令"prepare": "husky install"
}

.husky/pre-commit?文件修改如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm run lint

Commitlint

為什么需要 Commitlint，除了在后續(xù)生成的 changelog 文件和語(yǔ)義發(fā)版中需要提取 commit 中的信息外，也利于其他團(tuán)隊(duì)開發(fā)者分析你提交的代碼，所以我們要約定commit的規(guī)范。

安裝如下兩個(gè)插件：

• @commitlint/cli Commitlint 命令行工具

• @commitlint/config-conventional 基于 Angular 的約定規(guī)范

npm i @commitlint/config-conventional @commitlint/cli -D

最后將 Commitlint 添加到鉤子：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

創(chuàng)建?.commitlintrc，并寫入配置

{"extends": ["@commitlint/config-conventional"]
}

Angular 規(guī)范說(shuō)明：

• feat：新功能

• fix：修補(bǔ) BUG

• docs：修改文檔，比如 README, CHANGELOG, CONTRIBUTE 等等

• style：不改變代碼邏輯 (僅僅修改了空格、格式縮進(jìn)、逗號(hào)等等)

• refactor：重構(gòu)（既不修復(fù)錯(cuò)誤也不添加功能）

• perf：優(yōu)化相關(guān)，比如提升性能、體驗(yàn)

• test：增加測(cè)試，包括單元測(cè)試、集成測(cè)試等

• build：構(gòu)建系統(tǒng)或外部依賴項(xiàng)的更改

• ci：自動(dòng)化流程配置或腳本修改

• chore：非 src 和 test 的修改，發(fā)布版本等

• revert：恢復(fù)先前的提交

1