微信小程序集成vant

   微信小程序集成vant，大概的过程先通过npm 安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm

   开发环境 macOS ，微信小程序模版【支持腾讯云】

1. 安装vant包

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

2. 配置微信小程序的样式，去除miniprogram/app.json中"style":"v2"

3. 配置项目config中的packageJsonPath 和miniprogramNpmDistDir
   packageJsonPath -> npm 的package.json文件的位置
   miniprogramNpmDistDir -> 生成miniprogramNpm的文件目录位置

 //下面供参考，开发中按照实际的位置填写
  "packNpmRelationList": [
      {
        "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]

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

npm构建.png

5 测试vant包
   在index界面中添加一个button

 // app.json 配置button包
   "usingComponents": {
  "van-button": "@vant/weapp/button/index"
   }   
  
  // 在index.wxml中添加Button
     <van-button type="primary">按钮</van-button>

showButton.png

6. 完整的项目结构

   
   project.png