【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】

①.微信小程序使用Vant

首先我们使用微信开发者工具创建一个空项目。
然后点击视图或者Ctrl+`进入终端
在这里插入图片描述
在终端输入npm init 初始化项目,选择全部回车就可以。
接着在命令行输入vant官网的 cnpm i vant-weapp -S --production 安装语句进行安装
在这里插入图片描述
完成后构建npm在这里插入图片描述
构建成功后就可以使用了。
那个页面需要使用引入即可,例如我的index页面引用button组件
在vant官网拿到想要使用的组件放到页面中在这里插入图片描述
然后在使用页面的json文件中引入vant组件
在这里插入图片描述

刷新页面就可以成功展示了!!!
在这里插入图片描述

注意—有时候刷新后未立刻出来----再重新构建npm三四次试一试!

②wepy使用Vant

首先进入任意文件夹,建议在桌面创建一个空文件夹方便找到。
在这里插入图片描述

cmd进入终端在这里插入图片描述
进入终端后 cnpm i vant-weapp -S --production下载依赖包!!!
在这里插入图片描述
在终端打开wepy创建的项目,wepy创建项目
$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 首次需要安装
$ wepy init standard myproj # 使用 standard 模板初始化项目
在这里插入图片描述

$ cd myproj # 进入到项目目录
$ npm install # 安装项目依赖包
$ npm run dev # 监听并且编译项目
启动成功后,我们先用微信开发者工具打开用于查看,用vscode打开进行编辑
在这里插入图片描述
在vscode中把初始化的不需要的东西都清空一下
在这里插入图片描述
现在再拿到我们开始时创建的依赖包lib和dist随便选择一个复制到components中
在这里插入图片描述
然后在需要所使用的页面引入
在这里插入图片描述
最后大功告成啦
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灰太狼大王灬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值