技術(shù)棧
- Vite 3 - 構(gòu)建工具（就是快！）
- Vue 3 - 漸進(jìn)式 JavaScript 框架
- Vue Router - 官方路由管理器
- Pinia - 值得你喜歡的 Vue Store
- TDesign - TDesign 適配桌面端的組件庫(kù)
- Less - CSS 預(yù)處理器
- Axios - 一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和 node.js
- Husky + Lint-Staged - Git Hook 工具
- EditorConfig + ESLint + Prettier + Stylelint - 代碼規(guī)范
- Commitizen + Commitlint - 提交規(guī)范
- GitHub Actions - 自動(dòng)部署
基礎(chǔ)搭建
請(qǐng)確保你的電腦上成功安裝 Node.js，本項(xiàng)目使用 Vite 構(gòu)建工具，需要 Node.js 版本 >= 12.0.0。
使用 Vite 快速初始化項(xiàng)目雛形
npm init @vitejs/app
yarn create @vitejs/app
然后按照終端提示完成以下操作：
1.輸入項(xiàng)目名稱
2.選擇Vue3生態(tài)
3.安裝依賴
4.啟動(dòng)項(xiàng)目
如上圖，表示 Vite + Vue3 + TypeScript + Router + Pinia 簡(jiǎn)單的項(xiàng)目骨架搭建完畢，下面我們來為這個(gè)項(xiàng)目集成 Element Plus、Axios、Stylus/Sass/Less。
修改 Vite 配置文件
Vite 配置文件 vite.config.ts 位于根目錄下，項(xiàng)目啟動(dòng)時(shí)會(huì)自動(dòng)讀取。
本項(xiàng)目先做一些簡(jiǎn)單配置，例如：設(shè)置 @ 指向 src 目錄、 服務(wù)啟動(dòng)端口、打包路徑、代理等。
關(guān)于 Vite 更多配置項(xiàng)及用法，請(qǐng)查看 Vite 官網(wǎng) vitejs.dev/config/ 。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果編輯器提示 path 模塊找不到，則可以安裝一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 設(shè)置 `@` 指向 `src` 目錄
}
},
base: './', // 設(shè)置打包路徑
server: {
port: 4000, // 設(shè)置服務(wù)啟動(dòng)端口號(hào)
open: true, // 設(shè)置服務(wù)啟動(dòng)時(shí)是否自動(dòng)打開瀏覽器
cors: true // 允許跨域
// 設(shè)置代理，根據(jù)我們項(xiàng)目實(shí)際情況配置
// proxy: {
// '/api': {
// target: 'http://xxx.xxx.xxx.xxx:8000',
// changeOrigin: true,
// secure: false,
// rewrite: (path) => path.replace('/api/', '/')
// }
// }
}
})
規(guī)范目錄結(jié)構(gòu)
├── publish/
└── src/
├── assets/ // 靜態(tài)資源目錄
├── common/ // 通用類庫(kù)目錄
├── components/ // 公共組件目錄
├── router/ // 路由配置目錄
├── store/ // 狀態(tài)管理目錄
├── style/ // 通用 CSS 目錄
├── utils/ // 工具函數(shù)目錄
├── views/ // 頁面組件目錄
├── App.vue
├── main.ts
├── shims-vue.d.ts
├── tests/ // 單元測(cè)試目錄
├── index.html
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json
集成 UI 框架 Element Plus
1.安裝支持 Vue3 的 UI 框架 Element Plus
npm i element-plus
2.在 main.ts 文件中掛載 Element Plus
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
集成 HTTP 工具 Axios
安裝 Axios（Axios 跟 Vue 版本沒有直接關(guān)系，安裝最新即可）
集成 CSS 預(yù)編譯器 Stylus/Sass/Less
1.安裝
npm i stylus -D
# or
npm i sass -D
npm i less -D
2.使用
<style lang="less ">
...
</style>
至此，一個(gè)基于 TypeScript + Vite + Vue3 + Vue Router + Pinia + Element Plus + Axios + Stylus/Sass/Less 的前端項(xiàng)目開發(fā)環(huán)境搭建完畢
代碼規(guī)范
隨著前端應(yīng)用逐漸變得大型化和復(fù)雜化，在同一個(gè)項(xiàng)目中有多個(gè)人員參與時(shí)，每個(gè)人的前端能力程度不等，他們往往會(huì)用不同的編碼風(fēng)格和習(xí)慣在項(xiàng)目中寫代碼，長(zhǎng)此下去，勢(shì)必會(huì)讓項(xiàng)目的健壯性越來越差。解決這些問題，理論上講，口頭約定和代碼審查都可以，但是這種方式無法實(shí)時(shí)反饋，而且溝通成本過高，不夠靈活，更關(guān)鍵的是無法把控。不以規(guī)矩，不能成方圓，我們不得不在項(xiàng)目使用一些工具來約束代碼規(guī)范。
本文講解如何使用 EditorConfig + Prettier + ESLint 組合來實(shí)現(xiàn)代碼規(guī)范化。
這樣做帶來好處：
- 解決團(tuán)隊(duì)之間代碼不規(guī)范導(dǎo)致的可讀性差和可維護(hù)性差的問題。
- 解決團(tuán)隊(duì)成員不同編輯器導(dǎo)致的編碼規(guī)范不統(tǒng)一問題。
- 提前發(fā)現(xiàn)代碼風(fēng)格問題，給出對(duì)應(yīng)規(guī)范提示，及時(shí)修復(fù)。
- 減少代碼審查過程中反反復(fù)復(fù)的修改過程，節(jié)約時(shí)間。
- 自動(dòng)格式化，統(tǒng)一編碼風(fēng)格，從此和臟亂差的代碼說再見。
集成 Prettier 配置、 ESLint 配置
官網(wǎng)：prettier.io/ESLint（具體配置查看官網(wǎng)）
解決 Prettier 和 ESLint 的沖突
手動(dòng)集成，會(huì)出現(xiàn)兩者沖突問題，需要用到 eslint-plugin-prettier 和 eslint-config-prettier。
- eslint-plugin-prettier 將 Prettier 的規(guī)則設(shè)置到 ESLint 的規(guī)則中。
- eslint-config-prettier 關(guān)閉 ESLint 中與 Prettier 中會(huì)發(fā)生沖突的規(guī)則。
最后形成優(yōu)先級(jí)：Prettier 配置規(guī)則 > ESLint 配置規(guī)則。
安裝插件：
npm i eslint-plugin-prettier eslint-config-prettier -D
在 .eslintrc.js 添加 prettier 插件：
module.exports = {
...
extends: [
'plugin:vue/essential',
'airbnb-base',
'plugin:prettier/recommended' // 添加 prettier 插件
],
...
}
集成 husky 和 lint-staged
我們?cè)陧?xiàng)目中已集成 ESLint 和 Prettier，在編碼時(shí)，這些工具可以對(duì)我們寫的代碼進(jìn)行實(shí)時(shí)校驗(yàn)，在一定程度上能有效規(guī)范我們寫的代碼，但團(tuán)隊(duì)可能會(huì)有些人覺得這些條條框框的限制很麻煩，選擇視“提示”而不見，依舊按自己的一套風(fēng)格來寫代碼，或者干脆禁用掉這些工具，開發(fā)完成就直接把代碼提交到了倉(cāng)庫(kù)，日積月累，ESLint 也就形同虛設(shè)。
所以，我們還需要做一些限制，讓沒通過 ESLint 檢測(cè)和修復(fù)的代碼禁止提交，從而保證倉(cāng)庫(kù)代碼都是符合規(guī)范的。
為了解決這個(gè)問題，我們需要用到 Git Hook，在本地執(zhí)行 git commit 的時(shí)候，就對(duì)所提交的代碼進(jìn)行 ESLint 檢測(cè)和修復(fù)（即執(zhí)行 eslint --fix），如果這些代碼沒通過 ESLint 規(guī)則校驗(yàn)，則禁止提交。
實(shí)現(xiàn)這一功能，我們借助 [husky](https://link.juejin.cn?
husky —— Git Hook 工具，可以設(shè)置在 git 各個(gè)階段（
pre-commit、commit-msg、pre-push等）觸發(fā)我們的命令。
lint-staged —— 在 git 暫存的文件上運(yùn)行 linters。
配置 husky
使用 husky-init 命令快速在項(xiàng)目初始化一個(gè) husky 配置。
npx husky-init && npm install
這行命令做了四件事：
1.安裝 husky 到開發(fā)依賴
2.在項(xiàng)目根目錄下創(chuàng)建 .husky 目錄
3.在 .husky 目錄創(chuàng)建 pre-commit hook，并初始化 pre-commit 命令為 npm test
4.修改 package.json 的 scripts，增加 "prepare": "husky install"
上面這個(gè) pre-commit hook 文件的作用是：當(dāng)我們執(zhí)行 git commit -m "xxx" 時(shí)，會(huì)先對(duì) src 目錄下所有的 .vue、.js、.ts 文件執(zhí)行 eslint --fix 命令，如果 ESLint 通過，成功 commit，否則終止 commit。
但是又存在一個(gè)問題：有時(shí)候我們明明只改動(dòng)了一兩個(gè)文件，卻要對(duì)所有的文件執(zhí)行 eslint --fix。假如這是一個(gè)歷史項(xiàng)目，我們?cè)谥型九渲昧?ESLint 規(guī)則，那么在提交代碼時(shí)，也會(huì)對(duì)其他未修改的“歷史”文件都進(jìn)行檢查，可能會(huì)造成大量文件出現(xiàn) ESLint 錯(cuò)誤，顯然不是我們想要的結(jié)果。
我們要做到只用 ESLint 修復(fù)自己此次寫的代碼，而不去影響其他的代碼。所以我們還需借助一個(gè)神奇的工具 lint-staged 。
配置 lint-staged
lint-staged 這個(gè)工具一般結(jié)合 husky 來使用，它可以讓 husky 的 hook 觸發(fā)的命令只作用于 git add那些文件（即 git 暫存區(qū)的文件），而不會(huì)影響到其他文件。
1.安裝 lint-staged
npm i lint-staged -D
2.在 package.json里增加 lint-staged 配置項(xiàng)
"lint-staged": {
"*.{vue,js,ts}": "eslint --fix"
},
這行命令表示：只對(duì) git 暫存區(qū)的 .vue、.js、.ts 文件執(zhí)行 eslint --fix。
3.修改 .husky/pre-commit hook 的觸發(fā)命令為：npx lint-staged
現(xiàn)在我們提交代碼時(shí)就會(huì)變成這樣：
假如我們修改了 scr 目錄下的 test-1.js、test-2.ts 和 test-3.md 文件，然后 git add ./src/，最后 git commit -m "test..."，這時(shí)候就會(huì)只對(duì) test-1.js、test-2.ts 這兩個(gè)文件執(zhí)行 eslint --fix。如果 ESLint 通過，成功提交，否則終止提交。從而保證了我們提交到 Git 倉(cāng)庫(kù)的代碼都是規(guī)范的。
無論寫代碼還是做其他事情，都應(yīng)該用長(zhǎng)遠(yuǎn)的眼光來看，剛開始使用 ESint 的時(shí)候可能會(huì)有很多問題，改起來也很費(fèi)時(shí)費(fèi)力，只要堅(jiān)持下去，代碼質(zhì)量和開發(fā)效率都會(huì)得到提升，前期的付出都是值得的。
這些工具并不是必須的，沒有它們你同樣可以可以完成功能開發(fā)，但是利用好這些工具，你可以寫出更高質(zhì)量的代碼。特別是一些剛剛接觸的人，可能會(huì)覺得麻煩而放棄使用這些工具，失去了一次提升編程能力的好機(jī)會(huì)。
