在小程序中使用Vant组件

Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://vant-contrib.gitee.io/vant-weapp/#/quickstart一、安装

1、进入项目根目录，执行下面代码：

初始化（创建package.json文件）：npm init

下载Vant组件库：npm i @vant/weapp -S --production

2、修改app.json

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

 3、修改project.config.json

        开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

        需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
       // cv 下面代码即可
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
      // cv上面代码即可
  }
}

      上述配置在源代码中是存在的，所以需要找到他们，然后替换即可。

4、构建npm

        打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

         一旦构建npm成功，将会在miniprogram目录下新增miniprogram_npm文件夹，里面就是打包好的组件源码，接下来就可以直接引入，使用。

二、使用Vant组件

         注意：在小程序中使用组件时，一定要避免全部引入。

1、引入

        在app.json（全局）或index.json（当前页面）中引入组件

{
  "usingComponents": {
    "my-button":"/components/mybutton/mybutton",
    "van-button": "@vant/weapp/button/index"
  }
}

2、使用

 引入组件之后，就可以在我们的.wxml页面中使用组件了

 // 如果引入后没有出现效果：清除编译缓存 -> 重新编译  即可。