Uniapp 导入 Vant 组件库

Vant Weapp

开发文档

Vant Weapp - 轻量、可靠的小程序 UI 组件库

创建 wxcomponents 目录

在 uniapp 项目的根目录下，创建一个新的 wxcomponents 目录

下载 vant-weapp 项目

$ git clone [email protected]:vant-contrib/vant-weapp.git

下载下来后，把 vant-weapp 项目下的 dist 目录整个拷贝到上面新建的目录 wxcomponets 中，并把 dist 目录改名为 vant

pages.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"
		}

使用 vant 组件

在页面中使用组件

<view>
			<van-button type="default">默认按钮</van-button>
			<van-button type="primary">主要按钮</van-button>
			<van-button type="warning">警告按钮</van-button>
			<van-button type="danger">危险按钮</van-button>
		</view>

---

引入 vant 样式

在 App.vue 文件中的 style 处增加 vant 样式

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

导入后，就可以在页面中使用 vant 的样式了

<view class="van-ellipsis">
			  这是一段宽度限制 250px 的文字，后面的内容会省略。
			</view>