微信小程序:Vant Weapp组件库的使用

santu2年前 (2023-02-14)微信小程序804

官方文档:Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)



  1. npm初始化,根据需求填写内容,或者一路回车即可。

npm init


2.安装Vant Weapp组件库

npm i vant-weapp -S --production


3.构建npm

4.引入组件

    以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。

// app.json
"usingComponents": {
"van-button": "vant-weapp/button" }

5.使用组件

    引入组件后,可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

6.注意事项

    如果使用无效,尝试重新打开此项目

7.扫码查看官方模板

qrcode-201808101114.jpg


相关文章

微信小程序:组件的onLoad()实现

微信小程序:组件的onLoad()实现

onLoad()函数是页面加载时自动运行的,组件component使用另外一种方式达成同样的效果    // 组件生命周期声明对象(最重要的生命周期是...