使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

1.创建一个 vue3+ts 的uniapp项目

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

2.下载uniapp相关插件

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

uni-helper uni-app ：代码提示

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

3.下载ts相关配置

pnpm i -D @types/wechat-miniprogram       // 针对微信小程序的声明类型文件提示

pnpm i -D @uni-helper/uni-app-types      // uniapp增强的类型文件提示

 4.在tsconfig.json文件中添加新增的ts相关配置

1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types.

2.添加vueCompilerOptions选项

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 在types中添加 下载的配置
    "types": ["@dcloudio/types","@uni-helper/uni-app-types","@types/wechat-miniprogram"]
  },
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 runtime-uni-app`
    "experimentalRuntimeMode": "runtime-uni-app"       
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5.JSON注释问题 (在pages.json 和 manifest.json中的注释警告问题)

①在VS Code中找到设置

②在设置中搜索文件关联

③添加这两个文件名，值为 jsonc (jsonc表示json文件可以写注释)