微信小程序入门【一】:安装VantUI组件库

一、通过npm安装

 

1、初始化

npm init

 

2、安装npm包

npm install

 

3、安装vantUI

npm i @vant/weapp -S --production

 

二、将 app.json 中的 "style": "v2" 去除

 

三、修改project.config.json

{

  "setting": {

    "packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./miniprogram/"

      }

    ]
}

 

四:打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项

 

大功告成!

 

56b723e670344a0984bb3c1a3102dc72.png

 

五:简单举例

app.jsonindex.json中引入组件

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

 在index.wxml增加控件


<van-button plain type="info" >朴素按钮</van-button>

效果图预览

d3ed245f3732464a9a83dddb372524f3.png

 

参考链接:Vant Weapp快速上手


 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值