本文已参与「新人创作礼」活动,一起开启掘金创作之路。
一、环境准备
检查是否具备 npm 环境。
Windows:打开 cmd 命令行工具,输入 npm -v 查看。
出现版本号则为已安装。
二、安装 Vant Weapp
在小程序根目录执行命令:
- 初始化
package.json
npm init -y
- 下载 Vant Weapp
npm i @vant/weapp -S --production
三、微信开发者工具配置
- 使用
npm模块
【微信开发者工具】-【详情】-【本地配置】-【使用 npm 模块】
- 构建
npm
【微信开发者工具】-【工具】-【构建 npm】
四、引入组件
这里以引入 button 组件为例,引入其它组件同理,在 app.json 中加入相应组件的引入即可:
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
五、使用组件
引入组件后,可以在 wxml 中直接使用组件:
<van-button type="primary">按钮</van-button>
六、其它
删除 app.json 中的 "style": "v2" 配置。
将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
相关链接