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组件库了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容