uniapp开发小程序引入vant

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

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>

文档

vant-weapp官方文档