微信小程序引入Vant Weapp

使用Vant Weapp

  • 前言
  • 准备工作
  • 命令行操作
  • 构建npm和使用npm
  • 使用Vant Weapp
  • 使用组件
  • 效果如下

前言

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

准备工作

创建一个微信小程序

命令行操作

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

构建npm和使用npm

微信小程序引入Vant Weapp_第1张图片
微信小程序引入Vant Weapp_第2张图片
目录如下,构建 npm 会生成 miniprogram_npm 文件夹
微信小程序引入Vant Weapp_第3张图片

使用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>

效果如下

微信小程序引入Vant Weapp_第4张图片

你可能感兴趣的:(小程序,小程序引入Vant,小程序构建npm)