微信小程序三步操作引入Vant Weapp

前言

最近在开发微信小程序，确定使用 Vant Weapp 这个库，安装方式如下：

准备工作

创建一个微信小程序

命令行操作

# 项目初始化
npm init -y
# 通过 npm 安装
npm i @vant/weapp -S --production

构建npm和使用npm

目录如下，构建 npm 会生成 miniprogram_npm 文件夹

使用Vant Weapp

• 全局引入组件

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

• 单个页面引入组件

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

使用组件

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

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

效果如下