该方法只适合在h5端,也不建议微信小程序在uni-app中使用vant(BUG非常多,特别是每次更新HbuilderX的时候),如果你实在想小程序在uni-app中使用vant,可以用uni-app的插件市场的Vant UI Demo For Uni-app
1.前往github下载vant-weapp组件库,github地址
2.在HBuilderX中新建uni-app项目,并在新项目的根目录下新建个目录,用于存放vant-weapp组件,我新建的目录名为wxcomponents为例
3.将步骤1的dist文件复制粘贴到wxcomponents目录下,并改名为vant
4.使用uni-app提供的easycom组件模式,具体看uni-app文档
5.将自定义easycom配置示例复制粘贴到pages.json中,并修改
这一步可不看
解读: (.)代表任意字符,则"van-(.)"是对应组件名,而$1是获取(.)
例子: “van-button”,$1获取(.),则$1=button
而$1/后面的index.vue,打开vant下的button目录,发现并没看到index.vue,
别急,当你编译运行的时候,uni-app和HBuilderX会帮你自动生成的.
编译前:
编译后:
6.然后前往page/index/index.vue写一个vant-button的组件
7.点击运行到chrome,注意先运行到浏览器
8.发现报了一堆错,不要慌
9.复制url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff),在want下通过字符串搜索
10.原来是",url"的,后面没有空格,即", url",需要添加上空格
11.停止运行,然后再次运行,因为需要重新编译,然后就成功了
另一个方法,在步骤9查找到目标文件时,右键执行重排代码,也能成功
一些网友遇到的问题:
1.编译不生成.vue
有可能是编译器的版本问题,我的是2.6.8.20200330版本.那么你可以用HBuilder X的内置浏览器编译下,就会生成.vue了