uni-app整合最新版vant-weapp,遇到的问题和解决办法

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查找到目标文件时,右键执行重排代码,也能成功