微信小程序：安装Vant组件库

写在前面：为什么要写这篇文章？

今天自己在小程序中安装Vant时，按照官网的步骤来，没安装成功?。官网上的安装步骤有问题，经过网上查找资料加自己的思考和实践，得出了自认为简单正确的步骤，为了记录与分享自己的踩坑心得。

setp1: 初始化

首先新建个小程序目录，在该目录下执行以下命令，进行package.json快速初始化

# 快速初始化一个package.json
npm init -y
复制代码

setp2: 安装Vant

用下面的命令安装Vant

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production
复制代码

setp3: 构建npm

在详情->本地设置栏目中，勾选使用npm模块

然后在工具选项卡中，点击构建npm

构建成功后如图所示

构建完成后能看到项目中多了一个名为miniprogram_npm的目录，里面就是构建好的Vant

miniprogram_npm目录结构如下

.
├── miniprogram_npm
│   └── @vant
│       └── weapp
│           ├── xxxx-xxxx
│           │   ├── xxxx.js
│           │   ├── xxxx.json
│           │   ├── xxxx.wxml
│           │   └── xxxx.wxss
复制代码

setp4: 修改配置文件

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

setp5: 测试是否生效

在app.json中注册几个全局组件试试

{
    "usingComponents": {
        "van-button": "@vant/weapp/button/index",
        "van-rate": "@vant/weapp/rate/index"
      }
}
复制代码

在页面中使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
  渐变色按钮
</van-button>
<van-rate value="3" icon="like" void-icon="like-o" />
复制代码

效果如图：

OK?，大功告成。