本文记录通过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
distnode_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，有趣味的小伙伴能够查看传送门。=
参考
搭建中参考了两篇很不错的文章，感激大佬们的文章给了我很大的启发。
实战--为vite-vue3-ts我的项目增加 eslint + prettier + lint-staged 我的项目标准
vue3+ts+vite我的项目中应用eslint+prettier+stylelint+husky指南