2023-02-13_有赞小程序UI框架vant weapp之安

前言

• 有赞小程序UI框架vant weapp是一款面向小程序的UI框架，提供了很多常用的UI组件，免除了重新造轮子。组件也很漂亮，只是使用自带的风格，基本可以不用写css文件。

1. 通过npm安装

• 注意，如下命令需要在小程序所在的根目录下执行，就是如图目录

  
  image.png

npm i @vant/weapp -S --production

2. 修改app.json，去掉默认样式

• 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3. 构建npm包

• 打开微信开发者工具，点击 工具 -> 构建 npm，开发者工具会自动引入npm安装的包。

  
  image.png

4. 引用组件

• 构建了nmp包后，自定义组件还是不能直接使用，需要引入才能使用。在app.json添加如下引用即可

  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-field": "@vant/weapp/field/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-cascader": "@vant/weapp/cascader/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-tag": "@vant/weapp/tag/index"
  }

5. 使用

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

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

参考文章

1. Vant Weapp 快速上手