mpvue项目集成vant-weapp组件库

官网

https://youzan.github.io/vant-weapp/

安装依赖

cnpm i vant-weapp -S --production

app.json中引入组件

 {
  "pages": [
    "pages/index/main"

  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "iBook",
    "navigationBarTextStyle": "black"
  },

  "usingComponents": {
    "van-button": "vant-weapp/dist/button/index"
  }

}

使用组件

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

修改构建配置
修改webpack.base.config.js

if (/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

在页面加入van-button

image.png

在微信小程序端运行代码结果

image.png

至此，我们就成功集成了vant-weapp组件库了