Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本。本文将简单介绍如何在小程序中使用它。
新建项目
在微信开发工具中,新建项目,项目名你随便取,我就取名为vantProject。
项目初始化
根目录下,终端执行npm init
,根据个人情况填写相关信息,你不想填就一直按Enter
键,直到生成package.json文件。
安装vant weapp
根目录下,终端执行npm i @vant/weapp -S --production
构建 npm 包
构建成功会生成miniprogram_npm文件夹,如下图:
使用
引入组件
以Button组件为例,在app.json
或 index.json
配置 Button 对应的路径即可。
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
使用组件
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>