本文記錄通過cli腳手架搭建uniapp+vue3+vite+typescript項目過程。
背景
因為在開發uniapp項目時需要啟動HbuilderX來運行項目，但很多時候是習慣使用vscode去開發的，然后再在小程序IDE上打開查看效果，一個項目需要開3個軟件是很麻煩的一件事，所以看看能不能去掉HbuilderX這一環節，一看還真可以，uniapp官網已經寫出了使用cli創建項目的方法，我搭建了運行了一下沒有問題，這里去記錄一下搭建與完善過程。
創建項目
在uniapp文檔中有明確說明有創建命令：傳送門。我這里創建的是vite+ts的，我就直接貼代碼了
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
如果碰到以下報錯，需要去直接下載模板
[圖片上傳失敗...(image-50ab5d-1680707519977)]
可以去uni-preset-vue的vite分支下直接下載zip包，解壓后粘貼到自己的項目中。
完成后目錄結構是這樣
[圖片上傳失敗...(image-c44f18-1680707519977)]
查看package.json中的script命令，運行命令啟動小程序，這里我用微信小程序為例
pnpm run dev:mp-weixin
啟動起來后打開微信小程序IDE，選擇導入，然后選擇dist目錄下dev文件夾下的mp-weixin導入，這里運行不同的環境和不同的小程序平臺，打的包是不同的，所以注意區分。
項目打開后初始就是這樣，并且支持熱更新，還是很方便的。
[圖片上傳失敗...(image-df148a-1680707519977)]
配置eslint
接下來就要配置代碼檢查的東西了,
首先安裝eslint
pnpm add eslint -D
初始化eslint
pnpm eslint --init
我的選擇如下
[圖片上傳失敗...(image-71753e-1680707519977)]
安裝好后進入.eslintrc.js文件，在env中添加node:true解決報錯
在package.json中添加lint命令
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
接下來運行pnpm run lint發現代碼有錯誤我們一一解決。
- .vue文件解析錯誤，代碼錯誤如下
[圖片上傳失敗...(image-42a23b-1680707519977)]
解決方法
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
原因可以看這篇文章：
vue3+ts+vite項目中使用eslint+prettier+stylelint+husky指南 - 掘金
- vue文件命名不規范
[圖片上傳失敗...(image-e0325f-1680707519977)]
解決方法：在eslint中配置相應規則
"rules": {
'vue/multi-word-component-names':"off",
}
配置.eslintignore文件
**/node_modules/*
**/build/*
**/dist/*
配置prettier
添加prettier
pnpm add prettier -D
在根目錄新建.prettierrc.js
module.exports = {
// 一行的字符數，如果超過會進行換行，默認為80
printWidth: 100,
// 一個tab代表幾個空格數，默認為2
tabWidth: 2,
// 是否使用tab進行縮進，默認為false，表示用空格進行縮減
useTabs: false,
// 字符串是否使用單引號，默認為false，使用雙引號
singleQuote: false,
// 行位是否使用分號，默認為true
semi: false,
// 是否使用尾逗號，有三個可選值"<none|es5|all>"
trailingComma: 'none',
// 對象大括號直接是否有空格，默認為true，效果：{ foo: bar }
bracketSpacing: true
}
在package.json中配置format命令
"format": "prettier --write . && pnpm lint --fix"
解決eslint 與 prettier沖突問題
安裝eslint-config-prettier + eslint-plugin-prettier。
pnpm add eslint-config-prettier eslint-plugin-prettier -D
配置eslint
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
//新增
"plugin:prettier/recommended"
],
配置.prettierignore
dist
node_modules
配置husky
安裝
pnpm add husky -D
在package.json中配置命令
"postinstall": "husky install",
運行pnpm postinstall 后就會出現一個..husky目錄
再運行pnpm husky add .husky/pre-commit 命令添加一個pre-commit文件
pnpm husky add .husky/pre-commit
里面寫入
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm format
這樣在執行git commit 的時候就會現執行pnpm format 如果報錯則不會提交。
最后
如果有其他的調整，我也會第一時間更新這篇文章，希望可以幫助到大家，這個demo的代碼我已上傳到github，有興趣的小伙伴可以查看傳送門。=
參考
搭建中參考了兩篇很不錯的文章，感謝大佬們的文章給了我很大的啟發。
