微信小程序引入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"
  }
}

<view>
 <van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">hellovan-tab>
  <van-tab title="标签 2">worldvan-tab>
  <van-tab title="标签 3">内容 3van-tab>
  <van-tab title="标签 4">内容 4van-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有没有安装这个组件