Vscode 构建 uniapp vue3 + ts 微信小程序项目

前言

为什么要使用 Vscode 来开发构建 uniapp 项目？从个人角度来讲，仅是想要 Vscode 丰富的插件生态，以及最重要的优秀的 TtypeScript 类型检查支持，因为本人是 TS 重度使用者。

如果你更习惯使用 js 进行开发，使用 HBuilderX 要比 Vscode 更加方便。

注：后面的操作，皆以微信小程序为例。

整体思路

1. 通过 uni-app 提供的使用命令行构建项目的方式，构建出 Vue3 + TS 的 uni-app 项目（uni-app 自身就是基于 Vue.js 的跨平台开发框架）
2. Vscode 中安装 uni-app 插件，弥补相比 HBuilderX 缺少的便捷操作
3. 安装相关的 @types 依赖，更好的支持 typescript
4. 通过提供的编译脚本，将项目编译成期望的最终格式：将 Vue3 + TS 开发的 uni-app 项目编译成微信小程序项目（wxml、wxss）
5. 微信开发者工具导入编译后的小程序项目，展示最终效果。恭喜：此时在 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 插件

1. uni-create-view：快速创建 uniapp 视图与组件
2. uni-helper：uni-app 代码提示
3. uniapp小程序扩展：自动提示标签可用属性，鼠标悬浮查询属性文档，新增支持 uview 的组件提示

3. 项目引入 @types 依赖

npm i -D @uni-helper/uni-app-types @types/wechat-miniprogram

1. @uni-helper/uni-app-types：官网地址
   
2. @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)
            }
        }
    }
}

否则微信开发工具控制台会抛出异常：