mpvue小程序使用iView Weapp全套流程

小程序原生的学习成本太高了，改学mpvue，这个要求有点vue的基础（主要是自己偷懒，用框架比较快）

用vue来写小程序的话，优点还是有很多的，比如：

1. 彻底的组件化开发能力：提高代码复用性 
2. 完整的 Vue.js 开发体验 
3. 快捷的 webpack 构建机制
4. 支持使用 npm 外部依赖 
5. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 
6. H5 代码转换编译成小程序目标代码的能力

主要是第6点，让我决心来学mpvue的

先搭建vue脚手架

按文档的来一步步：

创建一个基于 mpvue-quickstart 模板的新项目 ：vue init mpvue/mpvue-quickstart  hello（项目名）

然后后面的操作也写出来了---进入你的项目 cd hello，安装依赖 npm install ，运行  npm run dev

现在可以用小程序的开发者工具打开你的项目了

 我不知道你们会不会报这个错误，反正我的报了

这个在之前的文档中也没有出现过，这个的原因是小程序开发者工具是访问你的文件目录下的dist文件，但是点开你的dist文件夹里面，你会发现只有一个wx的文件夹，在wx这个文件夹里面才有你要访问的东西，这个时候你要把你的项目中的

改成dist/wx,然后就可以了：

当然现在你就可以用vue写你的小程序了（这里的头像就换一张图片），因为自己偷懒到了一定境界了，不想写css啊动画啊什么的，就想找个第三方UI组件，这里我用的是iView weapp,首先去GitHub上下载文件，链接：https://github.com/TalkingData/iview-weapp；

下载完了以后就得到了一个压缩包

解压以后把里面dist文件的东西拷贝一份，放到你hello中的static的文件中（这里我新建个iview的子文件）

然后把你所有vue文件里面的样式什么的全清掉，在你要用到的页面里面找到json文件（没有的话就自己建一个）

并在里面引用你要用到的组件，在页面中写相关的样式

如上图；这个时候你会发现你的开发者工具会报什么路径错误的信息，这个就是之前提到的，开发者工具访问你的项目中的dist文件夹，这就是为什么在json文件中引用的时候用的，因为你最终是要用到的时候你的dist文件夹的东西，所以是向上2级，也就是2个“../”。

"i-col": "../../static/iview/col/index"  而不是  

"i-col": "../../../static/iview/col/index"

这个时候报错，是因为你还没有打包，然后你打包一下你的项目  npm run build  再运行一下你的项目npm run dev，就ok了

这个时候就算玩完了，你在其他页面的时候引用的时候，就按照这样的流程引用其相关联的组件就可以，谢谢！