小程序ui框架Vant Weapp在项目中使用

1、Vant介绍

Vant 是一个轻量、可靠的移动端组件库,在小程序开发中用了会节省很多麻烦。
Vant weapp官网：https://youzan.github.io/vant-weapp/#/quickstart

.

2、下面是在项目中引入Vant的方法（这个项目是测试号项目）

第一步：在项目目录下打开cmd命令行（管理员模式）,执行 npm init -y (如果该目录下有package.json文件就不需要了，直接下一步)，注意：如果项目名含中文的话可能会失败

第二步：同样是在项目目录下打开cmd命令行（管理员模式），执行 npm i @vant/weapp -S --production ,成功就会出现如下两个文件

第三步：修改 app.json

第四步：修改 project.config.json，在相应位置添加如下内容

{
  ...
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

第五步：构建npm包

​ 构建成功之后，会出现下面这个文件夹

第六步：引入组件测试**

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

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

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

​ 测试结果，到此结束。。。