uniapp vue3+ts项目创建

命令行创建 uni-app 项目

优势

通过命令行创建 uni-app 项目，不必依赖 HBuilderX，TypeScript 类型支持友好。

命令行创建 uni-app 项目：

vue3 + ts 版

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

创建其他版本可查看：uni-app 官网

编译和运行 uni-app 项目

1. 安装依赖 pnpm install

2. 编译成微信小程序 pnpm dev:mp-weixin

3. 导入微信开发者工具

温馨提示: 在 manifest.json 文件添加小程序 appid 方便真机预览

用 VS Code 开发 uni-app 项目

为什么选择 VS Code？

• VS Code 对 TS 类型支持友好，前端开发者熟悉的编辑器 👍

• HbuilderX 对 TS 类型支持暂不完善，期待官方完善 👀

用 VS Code 开发配置

• 安装 uni-app 插件

  • uni-create-view ：快速创建 uni-app 页面

  • uni-helper uni-app ：代码提示

  • uniapp 小程序扩展 ：鼠标悬停查文档

• TS 类型校验

  • 安装类型声明文件 pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

  • 配置 tsconfig.json

• JSON 注释问题

  • 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
+      "@types/wechat-miniprogram",
+      "@uni-helper/uni-app-types"
    ]
  },
+  "vueCompilerOptions": {
+    "nativeTags": ["block", "component", "template", "slot"]
+  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

注意：原配置experimentalRuntimeMode现调整为 nativeTags。