【转载】uniapp开发小程序引入vant

[本文转载于Li_pk](www.cnblogs.com/lpkshuai/p/…)

1. 安装

	# 通过 npm 安装

	npm i @vant/weapp -S --production

	 

	# 通过 yarn 安装

	yarn add @vant/weapp --production

	 

	# 安装 0.x 版本

	npm i vant-weapp -S --production

	 

2. 引入项目

1. 首先在项目根目录创建文件夹 wxcomponents ，然后在其中创建 vant 文件夹。
2. 把node_modules中的vant中的dist文件夹复制到刚创建的 wxcomponents\vant 中。
   
3. 打开App.vue，引入vant的样式文件：

	<style lang="scss">

	@import '/wxcomponents/vant/common/index.wxss';

	</style>

4. 打开 pages.json 文件，在globalStyle中引入需要的组件：
   

	"usingComponents": {

	  "van-button": "wxcomponents/vant/button/index",

	  "van-tab": "wxcomponents/vant/tab/index",

	  "van-tabs": "wxcomponents/vant/tabs/index"

	}

在pages.json文件内添加组件引用

 

你可以选择在一个页面的配置文件里面配置，但是只能在这个页面内使用，你也可以选择在globalStyle里面配置，是的所有页面都可以直接使用 3、使用组件

注意notify的使用，她还需要在main.js配置一下，不然就会报$notify is undefined 错误。

1 import Notify from './wxcomponents/vant/dist/notify/notify';
2 
3 Vue.prototype.$notify = Notify

5. 使用：

	<van-button type="default">默认按钮</van-button>

组件用法见文档。如果使用的vue，要改成vue的写法。
如：

	<van-tabs active="{{ active }}" bind:change="onChange">

	  <van-tab title="标签 1">内容 1</van-tab>

	  <van-tab title="标签 2">内容 2</van-tab>

	  <van-tab title="标签 3">内容 3</van-tab>

	  <van-tab title="标签 4">内容 4</van-tab>

	</van-tabs>

改成

	<van-tabs :active="active" @change="onChange">

	  <van-tab title="标签 1">内容 1</van-tab>

	  <van-tab title="标签 2">内容 2</van-tab>

	  <van-tab title="标签 3">内容 3</van-tab>

	  <van-tab title="标签 4">内容 4</van-tab>

	</van-tabs>