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 目录下
"""

uniapp使用vant_第1张图片


3.uniapp配置

App.vue的style中导入样式

uniapp使用vant_第2张图片

pages.json中配置usingComponents

uniapp使用vant_第3张图片
代码如下:

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

4.页面使用

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

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

你可能感兴趣的:(微信小程序,vue.js,前端,javascript)