微信小程序引入VantWeapp开发

第一种方法直接下载官方源码(推荐)

git clone https://github.com/youzan/vant-weapp.git

新建个vant-weapp把dist打包文件拷贝到自己的项目目录中

把所需要的组件配置到index.json

{
  "usingComponents": {
    "van-tab": "../../vant-weapp/dist/tab/index",
    "van-tabs": "../../vant-weapp/dist/tabs/index"
  }
}

<!--index.wxml-->
<view>
 <van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">hello</van-tab>
  <van-tab title="标签 2">world</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
</view>

第二种方法使用npm配置(不推荐) 因为npm下载的组件没有直接从git上拉取的多，如果组件要求不多，当我没说在项目终端执行下面命令

npm i @vant/weapp -S --production

再执行初始化

npm init

在小程序开发工具中找到菜单栏/工具/构建npm 勾选使用npm模块

就会生成依赖包和组件目录

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

需要注意的是，如果你引用的时候开发工具报错找不到组件你就查看自己引用的的路径是否有问题再就是查看npm有没有安装这个组件