微信小程序调用Vant Weapp组件配置

首先先说明下Vant Weapp是一种轻量、可靠的小程序UI组件库,使用网址为:https://youzan.github.io/vant-weapp
打开网址我们可以看到Vant Weapp的安装方式,接下来对Vant Weapp的配置详细介绍下
在这里插入图片描述

  1. 打开小程序项目,右键点击miniprogram----->在终端打开,这里也可以选在在外部终端打开,效果一样的
  2. 在打开的界面输入npm init
    在这里插入图片描述
    然后直接enter,默认配置,知道弹出yes,再次enter即可
    在这里插入图片描述
    这时候我们会发现miniprogram包下多了个package.json
  3. 继续在终端中输入Vant Weapp网站上提供的安装方式,即在终端里输入
    npm i @vant/weapp -S --production即可
  4. 然后我们需要构建npn
    在项目界面顶部点击工具----->构建npm,这时候我们会发现在miniprogram包底下多了个miniprogram-npm包,说明构建成功
  5. 然后我们需要在项目界面右上角点击详情----->本地设置----->使用npm模块打勾
    在这里插入图片描述
  6. 测试代码
    随便选择Vant Weapp组件在项目界面中使用测试效果,但是需要注意的是,这里的组件应该要先引入才能够使用。这里我选择引入button
    在这里插入图片描述
    先将引入操作配置在我们的项目中,打开pages包下的,你需要引入组件的页面的json文件,将配置插入即可
    在这里插入图片描述
    然后再wxtm页面就可以使用组件代码了
    在这里插入图片描述
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值