在uniapp 中使用 vant weapp

如何在uniapp 中使用 vant ui

现如今各大博客 一堆堆的水文 复制粘贴 翻来翻去 一点有用的都没有.

首先到 插件市场 直接导入这个案例

Vantui Weapp For Uni-app - DCloud 插件市场

这个vant 是被大佬们优化转化的,  uniapp 中可直接使用

直接把案例里的 wxcomponents 文件夹copy到自己项目

打开 pages.json 文件 

在 style 对象中添加组件 路径一样就好

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingComponents":{
				"van-button": "/wxcomponents/vant/button/index" // 注册组件即可使用
				}
			}
		}
	],
	...
}

index.vue 中就能使用 van-button 了 

 

注意:如果报错 重新运行到 微信开发者工具