vue3+ts+pinia小程序项目

vscode配置

安装插件

uni-helper、uni-vreate-view、uniapp小程序扩展

安装typescript校验

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

依赖安装完成后，tsconfig配置参考如下：

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

主要配置types和vueCompilerOptions 

*如果你看的黑马视频，按教程的来会报“值已弃用”，vueCompilerOptions参考上面的。

pnpm安装

通过npm安装：

npm i pnpm

配置淘宝镜像源：

pnpm config set registry https://registry.npmmirror.com

引入“秋云 ucharts”组件

项目需要展示图表，由于项目使用 cli+vue3+ts+小程序，同时满足的组件就只有 uniapp 插件市场的“秋云图表”，上链接：https://www.ucharts.cn/v2/#/

问题与解决：由于项目使用 ts，最终使用组件引入的方式实现。

步骤 1：下载组件，放到项目中，如下图我放到static 文件夹中

步骤 2：在 main.ts中导入和使用该组件