微信小程序引入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有没有安装这个组件
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读