uniapp使用vant

uniapp使用vant组件

1.下载vant组件包

https://github.com/vant-ui/vant-weapp/releases

2.导入至uniapp项目中

"""
2.1	解压下载的vant压缩包
2.2	在uniapp项目中新建wxcomponetns目录,然后再建立 vant 目录
2.3	将vant解压后的文件中的 dist 文件夹移动到 vant 目录下
"""

在这里插入图片描述


3.uniapp配置

App.vue的style中导入样式

在这里插入图片描述

pages.json中配置usingComponents

在这里插入图片描述
代码如下:

"usingComponents": {
			"van-button": "/wxcomponents/vant/dist/button/index"
		}

4.页面使用

<template>
	<view>
		<van-button type="info">信息按钮</van-button>
	</view>
</template>

注意事项:上述配置完成后,记得关闭微信开发者 工具,然后重新利用uniapp启动微信开发者工具,才能看到效果。需要重加载包文件。

版权声明:本文为qq_44718932原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。