【mpvue1】使用mpvue的开发准备

最近在玩mpvue开发微信小程序，在技术选型的时候纠结了一下，目前好像比较流行的就是原生、Wepy、mpvue这三种了，考虑到mpvue接近Vue一些，所以选了mpvue作为技术框架。

写在前面的话

小程序是我很早之前申请的了，所以申请的具体过程不太记得了，当时申请的是个人的小程序。那个时候还写了一个原生的，比较简陋也是看着视频学习写的。关于小程序的申请推荐大家看看其他人的。

开始mpvue

mpvue的官网有个五分钟快速上手的教程，照着那上面实践，基本上一个大致的框架就会出来了。此处是mpvue的传送门。
大致的命令贴一下：

 1 # 全局安装 vue-cli
   $ npm install --global vue-cli
 
 2 # 创建一个基于 mpvue-quickstart 模板的新项目
   $ vue init mpvue/mpvue-quickstart xxxxx(xxxxx为项目名称)

 3 # 安装依赖
   $ cd xxxxx(xxxxx为项目名称)
   $ npm install 

 4 # 启动构建 
   $ npm run dev

PS：安装过程中可能会有一些配置，基本上按照提示语来选择配置就没事了，和当初vue-cli的差不多。
然后打开微信开发者工具，目录为刚才那个项目构建生产的dist目录。
这个时候，微信开发者工具会出现这样的画面。

mpvue项目初始化

关于第三方ui库的引入

搜了下目前比较出名的三套UI。
WeUI: 一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。(github)

Vant-UI: 有赞移动 Web UI 规范 ZanUI 的小程序现实版本。以前叫ZanUI，现在改名为Vant-UI(github)

iView Weapp: 与iView（基于 Vue.js 的开源 UI 组件库）同一组织产出的微信小程序UI组件库。(github)

然后我比较了一下，我选的是WeUI，贴一下引用的过程。因为自己在这一块走了挺多的弯路的。

1.先去git将WeUI项目下载下来。
2.然后将weui-wxss-master\dist\style下的weui.wxss复制到mpvue项目的/static/目录下。
3.去mpvue项目的main.js(紧贴着App.vue的那个)全局引入
  import '../static/weui.wxss'。
4.引入插件的模板可见weui-wxss-master\dist\example。

比如说我引入了一个button。
模板结构是这样的：

没错就是这么一句话！

粗来啦！

---

本来还封装了flyio，但是还没看到封装效果，没法验证自己是不是封装正确了，所以打算后面正式接入接口的时候试一下，如果正确就把封装的过程和代码贴出来。