微信小程序 Vant Weapp

使用Vant Weapp 的组件

1、首先 # 通过 npm 安装

npm i @vant/weapp -S --production

在小程序的终端中 

 出现 node_modules

 2、 

 修改 app.json

将 app.json 中的 "style": "v2"   删除

3、

 修改 project.config.json

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./xiaochengxu/" // 这个是项目的路径
      }
    ]

4、

构建 npm 包

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

如果出现缺少

 

npm init  一直回车

在构建 NPM

就会构建成功 

如果构建 NPM后 不出现  等半分钟后 再次构建

构建成功就会出现一个 新的文件夹

最后一步

引入组件

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"  // 能够正确找到需要引入组件的路径
}

在wxml里  

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

完成