vant部署_小程序开发工具使用 npm 安装 Vant Weapp UI 库

由于 Vant Weapp UI 官方推荐使用 NPM 安装,所以尝试了一下,确实方便。

首先生成一个 package.json 文件

在小程序前端目录下,执行

npm init

添加 vant-weapp 依赖

npm i vant-weapp -S --production

安装依赖,构建

之后,在小程序开发工具中,选择小程序前端的根目录,点击菜单中的 ‘工具’ - ‘构建 NPM’

OK,构建完成。可以看到,当前目录下多了一个目录 miniprogram_npm

> ls miniprogram_npm/

vant-weapp/

配置使用 Vant Weapp UI 组件

假设要使用 Vant 的 button 和 card 组件,只需要在小程序根目录下的 app.json 中加入

"usingComponents": {

"van-button": "/miniprogram_npm/vant-weapp/button/index",

"van-card": "/miniprogram_npm/vant-weapp/card/index"

}

即可。然后就可以直接在小程序模板文件中使用了。

no such file or directory, open 'xxx/miniprogram/package.json'

需要执行

npm init

构建 NPM 时,提示“没有找到 node_modules 目录”

需要选中微信小程序前端目录,而不是云开发目录。

Uncaught Error: module "miniprogram_npm/vant-weapp/picker/shared" is not defined

关闭小程序开发工具,再次打开,这个错误就消失了。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值