vscode+vue3+微信小程序开发快速引入\导入uni组件，附错误解决方法

创建uniapp-vue项目

打开命令行

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

初始化vue包

pnpm install 或者 npm install

没有pnpm 命令的

npm install -g pnpm

没有npm的可移步 安装npm

安装uni组件

pnpm i @dcloudio/uni-ui

在src/pagejs.json中组测组件

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

安装类型声明文件

pnpm i -D @uni-helper/uni-ui-types

配置类型声明文件

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types", // [!code ++]
      "@uni-helper/uni-ui-types" // [!code ++]
    ]
  }
}

引入组件uni-card

index.vue

<template>
  <div class="my">my</div>
 
    <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
	<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
</uni-card>
</template>

运行编译项目

npm run dev:mp-weixin

如果报错

则没有引入组件成功,重新引入，并且重新打开命令行，再运行

如报错

清理npm缓存

npm cache verify

安装sass

pnpm install sass --save-dev 

编译没报错后，在微信开发者工具中导入项目，修改appid