[“usingComponents“][“van-button“]: “@vant/weapp/dist/button/index“ 未找到(env: Windows,mp,1.06.230

[ miniprogram/pages/index/index.json 文件内容错误] miniprogram/pages/index/index.json: ["usingComponents"]["van-button"] 未找到(env: Windows,mp,1.06.2301160; lib: 2.30.2)

如上错误，我用的typescript 写的微信小程序，js的走开吧，看看也可以

1. 项目目录：

2. 项目引入依赖，在本项目的根目录下，执行一下命令：

#下载vant 依赖
npm i @vant/weapp -S --production
# 通过 npm 安装 如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。
npm i -D miniprogram-api-typings

3. 修改app.json文件

将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

4. 修改project.config.json文件 在setting 里面添加如下代码，不会看图

  "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",   
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ]

解释：packageJsonPath 指定package.json文件，这个文件是用来记录依赖的

miniprogramNpmDistDir这个是用来指定 npm 构建后的内容 输出的位置。

5. 配置tsconfig.json文件 在compilerOptions里面 添加如下内容 "lib":[] 这里文件本来有吧2020修改 ES6就好了

    "lib": ["ES6"],
 
    "baseUrl": ".",
    "types": ["/node_modules/miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*":["/node_modules/@vant/weapp/dist/*"]
    }

6. 解释：我记得paths 的意思 ，就是把@vant/weapp/* 的替代成 /node_modules/@vant/weapp/dist/* 这个的作用是在引入vant组件时候 不用写那么长的路径

types是用来指定声明文件的路径的。在上面的例子中，它指定了使用了一个名为miniprogram-api-typings的声明文件，它位于当前项目的node_modules目录下。这个声明文件包含了小程序API的类型定义。

通过指定types，我们可以在代码中使用类型检查和自动补全等功能，从而提高代码的可读性和可维护性。

提示：如果这个types 没有指定正确也会报错，入标题那样，解决办法是重新点击 构建npm 会自动创建文件 miniprogram-api=typeings

7. 点击构建npm

好了，现在应该可以使用了，如何使用

随便一个页面，

引入如图内容

{"usingComponents": {
  "van-button":"@vant/weapp/button/index"
}}

然后在index.wxml里面使用

 <van-button>hello</van-button>

效果：

好了，那为什么会出错呢？

["usingComponents"]["van-button"]: "@vant/weapp/dist/button/index" 未找到(env: Windows,mp,1.06.230

看到我标红的吗，其实是引入的路径写错了，我自己手动引入，但是呢，刚刚我们是ts.config.js文件里写了映射对吗，就是那个替换，paths那个选项，它把@vant/weapp替换了，但是我们的dist 就写的多余了，我们