微信小程序引用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"
}
你们也可以尝试一下,但是这只是我遇到的问题,可能会跟你们的有出入当做一个参考吧!