vant ui安装及使用

vant ui

轻量、可靠的小程序 UI 组件库

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

安裝vant

1.进入文件根目录初始化

npm init // 初始化
1

2.通过 npm 安装

npm i @vant/weapp -S --production
1

3.安装组件包

npm i miniprogram-sm-crypto --production
1

4.删除app.json中的style属性

5.配置package.config.json

在setting中添加

"setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10

6.构建npm包

若构建npm包时报error，有可能是因为项目名称的原因，这时需要重新创建一个目录来存放npm包

7.引入组件

保证组件的路径与文件路径一致

1.正常构建npm的引入方式

2.自己创建了目录，来构建npm

到此就可以使用vant ui

8.vant ui

网址：Vant Weapp (gitee.io)

根据自己的需要选择合适的组件添加到代码中

ee.io)](https://vant-contrib.gitee.io/vant-weapp/#/home)

根据自己的需要选择合适的组件添加到代码中