微信小程序引用VantWeappUI组件步骤及路径问题解决办法详解

微信小程序引用VantWeappUI组件

我今天在用微信小程序开发工具引用VantWeapp组件的时候遇到了一些问题,现在把解决的方法分享一下,可能只是我遇到了,但是想写成一个文章,方便跟我有同样问题的参考!

先说一下我遇到的问题,我遇到的问题是在引用的VantWeapp组件的引入后,说找不到路径,这就整的我很烦,以这个组件为示例:
在这里插入图片描述
这里我要引入一个button按钮组件,但是却报了这个错误:
在这里插入图片描述
当时我就很纳闷,我明明是按照文档的步骤操作的,怎么会找不到呢,经过我的各种方法尝试,后来才把这个问题解决了,现在把安装CantWeapp组件和解决的步骤都写在下面,可以参考一下!

1.在项目根目录miniprogram目录下,cmd调起终端
在这里插入图片描述
2.然后初始化一个package.json文件:输入命令:npm init
在这里插入图片描述

项目就回产生一个package.json文件:在这里插入图片描述

3.接着到VantWeapp官网找到引入命令 npm i vant-weapp -S --production,在终端中输入安装命令,回车即可
在这里插入图片描述
官网的安装命令在快速上手里,这里就不过多提及了

4.构建npm,微信小程序开发者工具,找到工具,然后点击,可以看到一个构建npm的按钮,点一下就可以了
在这里插入图片描述其中miniprogram_npm下就是vant-weapp组件库;

5.最后,在微信开发者工具的详情里面将“使用npm模块"勾选上,如下:

在这里插入图片描述

6.重点来了,操作到这里我们就算已经安装了VantWeapp组件了,但是在引用组件的时候就开始暴露各种问题了,问题我在一开始已经说了这里就不多做赘述了,直接说解决办法

感觉官网的路径有点不对,官网是这样写的

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

但是引入的时候就会报路径错误
所有我想到了一个办法,我直接找到我想要用的组件的地址,然后直接用自己的地址引用,没想到还真成功了!

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

你们也可以尝试一下,但是这只是我遇到的问题,可能会跟你们的有出入当做一个参考吧!

Guess you like

Origin blog.csdn.net/qq_45699784/article/details/114868012