小程序导入Vant Weapp 流程

如何引用vant针对小程序的组件库？

1 在项目根目录下进行npm 初始化

\AppLet\miniprogram-2> npm init -y

2 调试好构造npm

打开后选择构建npm，会提示构建成功

3 npm 下载 vant weapp

# 通过 npm 安装
npm i @vant/weapp -S --production

4 去除app.json 中的 “style” : “v2” , 因为可能导致样式冲突

5 手动在 project.config.json 内添加如下配置

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

！ > 注意在新版本中当前目录下已创建miniprogram_npm ，
所以 “miniprogramNpmDistDir”: "./miniprogram/"配置项可更改为 ‘./’

之前这里引入出了错误， 大意了

6 引入
添加（全局添加在app.json中， 局部添加在页面json中），这里以添加button组件为例。

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

注意组件名称不要写错了

使用
页面中(wxml)

<van-button type="primary">按钮</van-button>

---

出错一定要要详细查找，避免出现因书写错误导致的报错