小程序开发使用vant库，步骤分步详解，初次使用简单易懂

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 5 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

这里是vant 小程序版本的地址，点击直接进入即可浏览vant

第一步：创建小程序后，打开创建新项目的根目录

第二步：通过cmd运行当前项目

第三步：初始化当前项目

命令：npm init

初始化完成状态：

这时候在文件夹中会发现多出两个配置文件

第四步：下载vant包
在当前项目根目录下进行输入命令下载即可
npm下载命令：npm i @vant/weapp -S --production
cnpm下载命令：cnpm i @vant/weapp -S --production
下载完后会产生出依赖包node_modules

第五步：安装 miniprogram
npm下载命令：npm i miniprogram-sm-crypto --production
cnpm下载命令：cnpm i miniprogram-sm-crypto --production

第六步：修改配置（这里重要，不要省略）

①：将 app.json 中的 “style”: “v2” 这行代码删除（原因是小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱）

②：使用微信开发者工具所创建的项目，miniprogramRoot 默认为 miniprogram，而package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

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

第七步：构建npm工具
打开微信开发者工具，鼠标移入到 工具 这栏，找到构建Npm然后点击


第八步：使用组件
到这里配置vant就已经ok了，这里建议大家，在开发的不同页面下的json文件中按需引入
比如说：我需要在index这个页面中需要用到button这个按钮，可以在json文件中引入button

在index.wxml中使用

样式如下

然后就可以根据不同功能api进入按需引入使用就好啦

PS:提醒一下大家，大家在新创建项目后，进入微信开发者工具里面，有的默认版本会使用旧版本，会报错，记得换成新版本开发

打开微信开发者工具-》详情-》本地配置-》调试基础库（进行选择）