Mpvue+Vant-Weapp遇坑之解决系列

嗨，我是Kit，我来分享Mpvue小程序的踩坑问题，以及如何引入Vant-Weapp，下面开始我的表演，如有问题，可以写在下面的评论里面，只接受建议不接受评论，我很骄傲的~哈哈

相比很多时候我们写东西，需要引入一些第三方的UI库之类的，主要是快，但是第一次使用难免遇到问题，今天我就来说说我在写Mpvue+Vant-Weapp小程序的时候遇到的问题以及解决的方案，有更好的可以提出。

这几天写了mpvue的小程序，首先我们来看下怎样安装Mpvue,使用过vue的伙伴，就很简单了，操作如下

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

如下就已经启动成功

关于安装Mpvue我不做多余的解释了，不懂的点击链接直接看官网安装查看官网安装教程

下面我们主要做Vant-Weapp的安装说明，我先来说几点需要注意的，主要就是引入跟引入完成以后Es6以及Es5的出错问题，这也是很多伙伴遇到的问题。

首先我们来下载Vant-Weapp，你可以在github直接下载也可以命令下载,

官网地址https://youzan.github.io/vant-weapp/#/intro

github地址https://github.com/youzan/vant-weapp

git命令下载方式如下

$ git clone https://github.com/youzan/vant-weapp.git

获取下载地址如下

直接下载方式

 

ok，操作完以上步骤你会得到一个文件夹或者下面直接下载的你会得到一个压缩包，这样我们就得到了框架，需要复制他里面的vant-weapp\dist到我们的Mapvue项目当中的my-project\static\vant-weapp，这个改名是为了不跟项目里面的dist文件夹重名，名称你可以自定义......如下所示

很好，我们已经完成了初期的vant导入工作，接下来就是怎样在项目当中使用引入他的组件部分，需要你的src文件夹下面新建一个main.json文件，写入组件代码，我以按钮为例

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

重点来了，只是新建了main.json在项目当中引入了，但是你需要的页面相对应的目录下面也需要加入你刚才新建的main.json，负责没有效果，我以首页为例展示

嗯，现在是引入了你需要的样式，但是代码报错，也就是我在最开始提出的Es6问题，报错如下:

关于以上问题，需要打钩ES6转ES5以及增强编译，勾选完需要在mavue里面执行npm run dev重启项目即可生效

npm run dev

好了，其实前期后后就是这么些问题，希望可以帮助开发路上遇到此类问题的伙伴，一起学习共同进步。