uniApp中引入vant.ui

uniApp中引入vant.ui

在项目创建一个和pages同级的目录wxcomponents目录
在wxcomponents目录中创建vant目录
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210114123330125.jpg#pic_center
在vant-weapp的GitHub Releases版块下载最新的zip包：点击去下载
下载压缩后效果如下

复制dist文件到wxcomponents下的vant目录中

页面中使用引入的UI组件
在App.Vue目录中的style部分引入UI组件库的样式文件

<style>
	/*每个页面公共css */
	@import "/wxcomponents/vant/dist/common/index.wxss";
</style>

在pages.json配置文件的style中,注册页面需要的组件

{
	"path": "pages/index/index",
	"style": {
		"usingComponents": {
			"van-tag": "/wxcomponents/vant/dist/tag/index"
		}
	}
}

也可以在全局globalStyle中注册

//全局外观
"globalStyle": {
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "积分商城",
	"navigationBarBackgroundColor": "#5cacee",
	"backgroundColor": "#F8F8F8", //下拉刷新的背景色
	"backgroundTextStyle": "dark", //下拉刷新的三个点的颜色
	"usingComponents":{
		"van-tag": "/wxcomponents/vant/dist/tag/index",
		"van-button": "/wxcomponents/vant/dist/button/index",
		"van-card": "/wxcomponents/vant/dist/card/index"
	}
},

在页面中使用组件
使用看vant文档就行了,一样的

<van-tag type="primary" plain size="">标签</van-tag>
<van-button class="pro-btn" type="warning">按钮</van-button>

注：在web浏览器中打开无效果
如果报错没有找到文件,关掉编辑器和小程序重新打开