阅读 130

微信小程序:安装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模块

iShot2021-06-21 22.44.53.png 然后在工具选项卡中,点击构建npm

iShot2021-06-21 22.45.26.png 构建成功后如图所示

iShot2021-06-21 22.45.53.png 构建完成后能看到项目中多了一个名为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" />
复制代码

效果如图:

iShot2021-06-21 23.10.23.png

OK👌,大功告成。

文章分类
前端