注：此課程需要有Git的基礎(chǔ)才能學(xué)習(xí)
一、pnpm包管理工具
1、使用原因
? ? 1.1、速度快，遠(yuǎn)勝過(guò)yarn和npm
? ? 1.2、節(jié)省磁盤(pán)空間
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-848545.html
2、使用方式
? ? 2.1、安裝方式
? ? ? ? npm install -g pnpm
? ? 2.2、創(chuàng)建項(xiàng)目
? ? ? ? pnpm create vue
?
?
?二、Eslint配置代碼風(fēng)格
1、環(huán)境同步
1、禁用Prettier插件（如果安裝了）
2、安裝Eslint插件，并配置保存時(shí)自動(dòng)修復(fù)
? ? 2.1、步驟
? ? ? ? (1)打開(kāi)vscode設(shè)置
? ? ? ? (2)點(diǎn)擊右上角配置
? ? ? ? (3)設(shè)置"source.fixAll"為true
2、配置文件 .eslintrc.cjs
//將以下代碼加入到eslinterc.cjs鐘，實(shí)現(xiàn)代碼規(guī)范化配置
? ? ? rules: {
? ? 'prettier/prettier': [
? ? ? 'warn',
? ? ? {
? ? ? ? singleQuote: true, // 單引號(hào)
? ? ? ? semi: false, // 無(wú)分號(hào)
? ? ? ? printWidth: 80, // 每行寬度至多80字符
? ? ? ? trailingComma: 'none', // 不加對(duì)象|數(shù)組最后逗號(hào)
? ? ? ? endOfLine: 'auto' // 換行符號(hào)不限制（win mac 不一致）
? ? ? }
? ? ],
? ? 'vue/multi-word-component-names': [
? ? ? 'warn',
? ? ? {
? ? ? ? ignores: ['index'] // vue組件名稱(chēng)多單詞組成（忽略index.vue）
? ? ? }
? ? ],
? ? 'vue/no-setup-props-destructure': ['off'], // 關(guān)閉 props 解構(gòu)的校驗(yàn)
? ? // ?? 添加未定義變量錯(cuò)誤提示，create-vue@3.6.3 關(guān)閉，這里加上是為了支持下一個(gè)章節(jié)演示。
? ? 'no-undef': 'error'
? }
三、配置代碼檢查工作流
1、配置代碼提交前檢查
0、打開(kāi)bash終端
?
1、初始化git倉(cāng)庫(kù)
? ? ——執(zhí)行g(shù)it init
? ??
2、初始化husky工具配置
? ? ——執(zhí)行
? ? ? ? pnpm dlx husky-init && pnpm install
? ??
3、修改.husky/pre-commit文件
? ? 將npm test
? ? 修改為pnpm lint
? ? //pnpm lint會(huì)對(duì)所有文件進(jìn)行校驗(yàn)，并嘗試進(jìn)行修復(fù)
2、暫存區(qū)eslint校驗(yàn)
1、概念
? ? 由于lint是全量校驗(yàn)，而面對(duì)歷史問(wèn)題沒(méi)有辦法，所以引出了eslint校驗(yàn)
? ??
2、使用
? ? 2.1、安裝int-staged
? ? ? ? ? ? pnpm i lint-staged -D
? ? ? ? ? ??
? ? 2.2、在package.json中配置lint-staged命令
? ? ? ? //將以下命令添加到package.json中
? ? ? ? ? "lint-staged": {
? ? ? ? ? ? "*.{js,ts,vue}": [
? ? ? ? ? ? ? "eslint --fix"
? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ? ...
? ? ? ? //將以下命令添加到package.json下scripts之中
? ? ? ? "lint-staged": "lint-staged"
? ? ? ??
? ? 2.3、在.husky/pre-commit文件中進(jìn)行修改
? ? ? ? 將pnpm lint修改為pnpm lint-staged
四、目錄調(diào)整
1、刪除無(wú)用文件
2、添加utils目錄用于存放工具函數(shù)，api目錄用于存放請(qǐng)求模塊相關(guān)
3、拷貝全局樣式和圖片，安裝預(yù)處理器支持
4、安裝sass
? ? pnpm add sass -D文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-848545.html
?
到了這里，關(guān)于Vue3學(xué)習(xí)日記 Day4 —— pnpm，Eslint的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
