VSCode+Vue3+TS构建uniapp

创建

命令行创建

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

编译运行为微信小程序

pnpm dev:mp-weixin

安装uniapp插件

uni-create-view 快速创建页面

uni-helper uni-app代码提示

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

引入uniapp组件库

npm i @dcloudio/uni-helper-json

// pages.json
{
  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" 
    }
  },
  "pages": [
    // …省略
  ]
}

TS类型校验

安装类型声明文件

pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types

配置tsconfig.json

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
+     "@uni-helper/uni-ui-types" 
    ]
  },
    // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"],
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

安装SASS

CSS预处理器，帮助我们减少重复的CSS代码。

npm i sass -D
//制定版本
npm i sass-loader@10.1.1 -D

JSON注释问题

在设置-文件关联处将manifest.json 和pages.json 的值设置为jsonc