前言
为什么要使用 Vscode 来开发构建 uniapp 项目？从个人角度来讲，仅是想要 Vscode 丰富的插件生态，以及最重要的优秀的 TtypeScript 类型检查支持，因为本人是 TS 重度使用者。
如果你更习惯使用 js 进行开发，使用 HBuilderX 要比 Vscode 更加方便。
注：后面的操作，皆以微信小程序为例。
整体思路
- 通过 uni-app 提供的使用命令行构建项目的方式，构建出 Vue3 + TS 的 uni-app 项目（uni-app 自身就是基于 Vue.js 的跨平台开发框架）
- Vscode 中安装 uni-app 插件，弥补相比 HBuilderX 缺少的便捷操作
- 安装相关的 @types 依赖，更好的支持 typescript
- 通过提供的编译脚本，将项目编译成期望的最终格式：将 Vue3 + TS 开发的 uni-app 项目编译成微信小程序项目（wxml、wxss）
- 微信开发者工具导入编译后的小程序项目，展示最终效果。
恭喜：此时在 Vscode 中对于代码变动，可以立即更新在微信开发者工具中
实践
1. 通过命令行构建
官网教程
创建以 typescript 开发的工程：
npx degit dcloudio/uni-preset-vue#vite-ts your-project-name
如果超时被墙了，提示：
! could not fetch remote https://github.com/dcloudio/uni-preset-vue
! could not find commit hash for vite-ts
打开 https://github.com/dcloudio/uni-preset-vue 切换到 vite-ts 分支下载 zip 后缀的压缩文件，解压到本地再次打开。
成功、失败截图：
项目导入 vscode：
2. vscode 安装 uni-app 插件
- uni-create-view：快速创建 uniapp 视图与组件
- uni-helper：uni-app 代码提示
- uniapp小程序扩展：自动提示标签可用属性，鼠标悬浮查询属性文档，新增支持 uview 的组件提示
3. 项目引入 @types 依赖
npm i -D @uni-helper/uni-app-types @types/wechat-miniprogram
- @uni-helper/uni-app-types：官网地址
- @types/wechat-miniprogram：微信小程序的类型提示依赖
tsconfig.json 引入类型：
{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"moduleResolution": "node","esModuleInterop": true,"sourceMap": true,"skipLibCheck": true,"importHelpers": true,"allowSyntheticDefaultImports": true,"useDefineForClassFields": true,"resolveJsonModule": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext","dom"],"types": ["@dcloudio/types","@types/wechat-miniprogram","@uni-helper/uni-app-types","@uni-helper/uni-ui-types"]},"vueCompilerOptions": {"plugins": ["@uni-helper/uni-app-types/volar-plugin"]},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","*.d.ts"]
}
4. 编译
npm run dev:mp-weixin
5. 实时在微信开发者工具预览
微信开发者工具中导入编译后的项目
vscode 中修改 index.vue：
切回微信开发者工具：
引入官方 uni-ui 库
1. 安装 uni-ui 依赖：
npm i sass -D
npm i sass-loader
npm i @dcloudio/uni-ui
2. 配置 easycom（Vue 文件中自动导入 ui 组件）：
// pages.json
{"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},// 其他内容pages:[// ...]
}
3. 安装类型依赖：
npm i -D @uni-helper/uni-ui-types
4. tsconfig.json 引入类型：
引入 pinia 全局状态管理库
npm i pinia --force
npm i pinia-plugin-persistedstate --force
使用 --force 参数是因为避免检测失败而导致无法下载依赖：pinia 用了 peerDependency 配置了 @vue/composition-api，这是为了兼容了vue2的选项式语法来设置的，npm没有识别，还是会检测它的版本与当前版本不符合。
注意！在配置 pinia store 的持久化时，必须重写行为（不在使用 localStorage，而是使用 uni-app 的跨平台 api）：
{persist: {storage: {setItem(key, value) {uni.setStorageSync(key, value)},getItem(key) {return uni.getStorageSync(key)}}}
}
否则微信开发工具控制台会抛出异常：
