mp-Vue 配合使用Vant Weapp使用

目前好像还不支持npm安装依赖
1.使用git下载

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码，本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

2.在需要引入的页面目录下的main.json文件中

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

3.页面中使用

<van-button>测试button</van-button>

注意事项

需要打开小程序开发者工具的ES6转ES5功能.. (这点与wepy相反 wepy不允许开启此项)

修改webpack打包项 新增vant文件夹

// build（文件夹）-->webpack.base.config.js-->module-->rules配置
 {
       test: /\.js$/,
        // -- include: [resolve('src'), resolve('test')],
        // ++ include: [resolve('src'), resolve('test'), resolve('static/vant')],添加vant文件目录
        include: [resolve('src'), resolve('test'), resolve('static/vant')],
        use: [
          'babel-loader',
          {
            loader: 'mpvue-loader',
            options: Object.assign({checkMPEntry: true}, vueLoaderConfig)
          },
        ]
 },

遇到BUG 可以看看相关文章
Mpvue中使用Vant Weapp组件库及相关坑