uniapp中使用vant-weapp

1.使用HBuilderX建立uniapp项目

2.从github下载vant包，zip格式的

vant组件包:https://github.com/youzan/vant-weapp/releases

 

3. 项目根目录下新建wxcomponents/@vant  两个文件夹

 

4.把下载好的压缩包解压， 把dist放在刚才创建好的@vant文件下，并重命名为weapp

 5.App.vue中引入vant的样式

注意引入的是.wxss文件

 // 引入vant-weapp样式
    @import '/wxcomponents/@vant/weapp/common/index.wxss';

6.在pages.json文件下的 "globalStyle" 下的 "usingComponents" 中按需引入

注意路径需要对应自己建立的文件夹路径

"globalStyle": {
...
		"usingComponents": {
			 "van-button": "/wxcomponents/@vant/weapp/button/index"
		}
	},

 7.页面中使用，如果没有样式从uniapp重启微信小程序

需要重启开发工具HBuilderX，重新编译到微信开发者工具才能正常使用

按钮

参考地址：uniapp使用Vant-weapp的最新方法教程_javascript技巧_脚本之家