uniapp使用vant

背景

操作

1.下载文件

https://github.com/andurils/vant-weapp-uniapp
解压后如图

2.复制文件

在uniapp项目根目录创建wxcomponents 目录，并将上图中标红的dist整个复制到改文件夹下，并改为为vant,如图：

3.文件引用

3.1pages.json 引入组件

在 uniapp 项目的 pages.json 文件中的 globalStyle 属性中使用 usingComponents 引入 vant 组件

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index",
			"van-cell": "/wxcomponents/vant/cell/index",
			"van-cell-group": "/wxcomponents/vant/cell-group/index",
			"van-icon": "/wxcomponents/vant/icon/index",
			"van-image": "/wxcomponents/vant/image/index",
			"van-row": "/wxcomponents/vant/row/index",
			"van-col": "/wxcomponents/vant/col/index",
			"van-popup": "/wxcomponents/vant/popup/index",
			"van-toast": "/wxcomponents/vant/toast/index"
		}

3.2 App.vue引入样式表

@import '/wxcomponents/vant/common/index.wxss';

如图

3.3 vant组件使用

在使用页面就可以进行使用了

<van-button type="default">默认按钮</van-button>

易错

流程上不算复杂，但是确实有些繁琐，不是很友好，其中出现的问题主要是文件夹的命名上，之前我将dist文件夹放在components下，引用就不行，一定要在wxcomponents下，这点对资源管理其实不是很友好，但是也懒得去排查和修改了。易错的问题主要就是在于文件的引用上。