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

这篇具有很好参考价值的文章主要介绍了[“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的走开吧，看看也可以

usingcomponents未找到,微信开放平台,微信小程序,Powered by 金山文档

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

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

修改app.json文件

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

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

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

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

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

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

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

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

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

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

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

点击构建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 就写的多余了，我们文章来源地址https://www.toymoban.com/news/detail-539633.html

到了这里，关于[“usingComponents“][“van-button“]: “@vant/weapp/dist/button/index“ 未找到(env: Windows,mp,1.06.230的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！