1 命令创建项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
2 下载依赖
npm install
3 填写appid
4 运行项目并且微信开发工具打开
npm run dev:mp-weixin
5 安装 vscode 插件
安装 **Vue Language Features (Volar)** ：Vue3 语法提示插件
安装 **TypeScript Vue Plugin (Volar)** ：Vue3+TS 插件工作区禁用** Vue2 的 Vetur 插件(Vue3 插件和 Vue2 冲突)
作区禁用** @builtin typescript 插件（禁用后开启 Vue3 的 TS 托管模式）uni-create-view ：快速创建 uni-app 页面
uni-helper uni-app ：代码提示
uniapp 小程序扩展 ：鼠标悬停查文档
6 TS 类型校验
6.1 安装
pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
6.2 tsconfig.js配置
7 代码统一风格
7.1 安装 eslint + prettier
npm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
7.2 新建 .eslintrc.cjs 文件，添加以下 eslint 配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,extends: ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier',],// 小程序全局变量globals: {uni: true,wx: true,WechatMiniprogram: true,getCurrentPages: true,getApp: true,UniApp: true,UniHelper: true,App: true,Page: true,Component: true,AnyObject: true,},parserOptions: {ecmaVersion: 'latest',},rules: {'prettier/prettier': ['warn',{singleQuote: true,semi: false,printWidth: 100,trailingComma: 'all',endOfLine: 'auto',},],'vue/multi-word-component-names': ['off'],'vue/no-setup-props-destructure': ['off'],'vue/no-deprecated-html-element-is': ['off'],'@typescript-eslint/no-unused-vars': ['off'],},
}
7.3 配置 package.json
{"script": {// ... 省略 ..."lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"}
}
7.4 自动格式化代码
npm run lint
8 GIT 工作规范流程
8.1初始化git
git init
8.2 安装并初始化 husky 会生成 .husky 文件
npx husky-init
8.3 安装 lint-staged
npm i -D lint-staged8.4 配置 package.json
{"script": {// ... 省略 ...},"lint-staged": {"*.{vue,ts,js}": ["eslint --fix"]}
}
8.5 修改 .husky/pre-commit 文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm run lint-staged
