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

这篇具有很好参考价值的文章主要介绍了使用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"]
}