vscode开发 vue3+ts 的 uni-app 微信小程序项目

news2024/11/18 1:33:11

创建uni-app项目：

# 创建用ts开发的uni-app
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
# 创建用js开发的uni-app
npx degit dcloudio/uni-preset-vue#vite 项目名称

VS Code 配置

为什么选择 VS Code ？

HbuilderX 对 TS 类型支持暂不完善
VS Code 对 TS 类型支持友好，熟悉的编辑器

1.将创建好的项目用vscode打开

2.安装uni-app插件：
在这里插入图片描述

3.安装类型声明文件

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

如下表示安装完成：
在这里插入图片描述

4.配置tsconfig.json

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

5.解决vscode中json文件注释报错问题
在vscode设置中搜索文件关联，点击添加项，然后配置如下两项
在这里插入图片描述

编译和运行 uni-app 项目

在这里插入图片描述

1.在manifest.json中添加微信小程序appid

/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "XXXXXX",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },