本文记录通过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，有兴趣的小伙伴可以查看传送门。=
参考
搭建中参考了两篇很不错的文章，感谢大佬们的文章给了我很大的启发。
