前言：
介绍：这是一个【基本不会CSS的后端java码农】开发的简单的Vue应用，之所以选用vue是之前有一点点了解，而以前的一大堆做前端的同事用过react和vue之后都说vue比react要好，好了。talk is cheap, show me the code：
https://github.com/aaavieri/xl-product
特别说明：本文中引用的gif动图大小比例均有所失真，实际情况请以下面的视频为准
劝退语：如果不喜欢Material Design风格或者觉得视频中的拙作很糟糕的同学，这篇文章对你应该是没有什么意义的，可以右上角点叉了。
正文：
1，既然是做开发，就面临技术选型的问题，开发前我调研了一些基于VUE的移动端UI框架，也作一个简单的介绍方便大家了解：
mint-ui(点击查看官网)：饿了么出品，文档详细，示例齐全，缺点在我看来就太丑了，再加上我不怎么会CSS，所以在尝试过一下之后发现挺难看就果断放弃。效果图如下（丑出天际有木有）
iView(点击查看官网)：这个很喜欢，文档示例更齐全，组件丰富，效果也挺好。准备下手的时候发现没有适配移动端需要自己写布局来适配，这个我也不会果断放弃（没错，我就是这也不会那也不会）
vonic(点击查看官网)：这个采用了ionic样式(主要是引用css文件)的UI框架，我个人并不是太喜欢ionic风格的，组件不算多，但是有一部分常用的组件被做成了服务存放在Vue对象中(比如说this.$tabbar之类的)，对于我来说蛮新颖的一个功能，没有尝试就放弃了。
Muse-UI(点击查看官网)：非常喜欢的一个UI框架，PC端和移动端都支持，正是看到它我才觉得MINT-UI丑的，我之前居然一直不觉得Orz，果然是没有对比就没有伤害。放弃它的原因有两个：当我辛苦把它的源码跑起来之后，发现它的DEMO居然挤成一坨，这意味着我要自己规划布局；更重要的原因是这个时候我遇到了Vue-matirial。
Vux(点击查看官网)：特别棒的一个框架，是github上vue框架里面star最多的！！！，issue解决得超快，它的vux-loader据用过的朋友说是一个非常棒的东西，采用微信的weui的设计样式，不能说不漂亮，只是我欣赏不来。作者是很有意思的一个人，自己跑去知乎提问觉得他的vux怎么样，他的官网介绍也非常有意思：
Vue-Material(点击查看官网)：虽然github上的星只有Vux的一半左右，但是我非常喜欢(此时响起伴奏：确认过眼神，我遇上对的人)，material-design的风格简直太棒了，控件丰富而且好看，文档齐全，动画效果非常棒，是之前那些框架都没有的，基本上可以不修改CSS就能做出很不出的应用，方便快捷地自定义主题。当然也有缺点：全E文文档，是1.0beta版(beta版就不可思议的这么好看)，把以前的0.x版的一些特别好的控件给干掉了(ps：后来我为了实现效果还翻出0.x的代码抄过来)
2，踩坑之旅开始了，说实话我也是为了把这次踩坑中遇到的问题和解决方法记录下来写的这篇介绍心得。
a. 页面布局：
基本上直接用框架控件md-app就可以了，略微调整一下盒子模型就可以完成布局了，非常好看，不用管flex和栅格之类的布局。
b. 几个不错的UI设计：
elevation，让控件浮动出来，看起来非常立体
ink-ripple，点击之后背景色变色(0.x版本才有的，1.0暂时没有加，我是拿老版本的源码照着写的)
c. 自定义主题：
为了显示效果好看，我在tab切换的时候进行主题切换，于是自定义了几个主题，官网有详细的写法说明。提供的主题制作引擎是基于scss的，所以要添加scss的支持，我用的是sass-loader，参考下面链接中的expamle的写法即可(这里有个坑：vue脚手架模版里面的util.js也有一个scss的loader，要删除掉才能正常运行)
https://www.npmjs.com/package/sass-loader
另外你还需要一个配色表，定好主色调之后去找里面的搭配就好了非常方便：
http://tool.c7sky.com/webcolor/
d. 动画效果：
一个漂亮的应用是不能没有各种动画效果的，Vue本身提供了transition和transition-group标签来实现过渡和动画效果，需要自己写动画中各个效果的css或者钩子等。感谢官网介绍了可以直接拿来就用的animate.css和velocity-animate.js并给出了例子，结合起来可以做出非常不错的动画效果
Vue官网介绍动画的地址：https://cn.vuejs.org/v2/guide/transitions.html
animate.css官网地址：https://daneden.github.io/animate.css
velocity-animate.js官网地址：http://velocityjs.org
额外的一点小把戏：点击就有随机颜色桃心出现的js，忘了在哪里找了的，只有放上我github上代码地址：https://github.com/aaavieri/xl-product/blob/master/src/assets/js/love.js
下图的tab切换就是采用transition+animate.css完成的(没有一点js代码)，不同的tab采用不同的自定义主题
而下图的飞入动画效果就是采用的velocity-animate.js完成的
e. 父子组件之间信息传递：
从这里起开始变得枯燥起来，组件越来越多之后，互相之间的消息传递开始变得多了起来，一般采用props和emit事件的形式互相传递数据，这个非常简单，详细请参考下面的文章：
父组件传向子组件：http://www.cnblogs.com/xiaohuochai/p/7388866.html
子组件传向父组件：http://www.cnblogs.com/xiaohuochai/p/7389934.html
f. 动态添加组件：
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。有人觉得这个平淡无奇啊，其实不是这样子的，在稍微大点的应用中，挂载点的组件是有很多的，并且可能根据业务需要改变、升级的，所以最好不要固定写死，而是根据后台或者其它地方传来的数据动态绑定的，参考：http://www.cnblogs.com/xiaohuochai/p/7395694.html
g. 非父子组件之间相互信息传递：
父子之间相互传递是很容易的，而非父子之间传递是比较困难的，vue1.0时代提供了boardcast方法来进行广播，但是在vue2.0中已经被取消了，可以采用以下两种方式来进行传递信息：
简单的方式：https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换
复杂但更推荐的方式：https://vuex.vuejs.org/zh/
后者vuex通过提供一个全局store的方式来存储和传递数据，支持同步和异步，支持模块化管理、命名空间管理(即把存储的数据和对应的存取操作切分成不同的模块，当然也可以不切分，每个模块定义或者不定义命名空间)，官网介绍很详细，只是用例写得有点绕，我整理了一下，把无模块、有模块无命名空间、有模块有命名空间三者都实现了，可以参考github上我的代码：
无模块：https://github.com/aaavieri/xl-product/blob/master/src/event/SimpleEventHub.js
有模块无命名空间：https://github.com/aaavieri/xl-product/blob/master/src/event/MultiModuleEventHub.js
有模块有命名空间：https://github.com/aaavieri/xl-product/blob/master/src/event/NamespaceEventHub.js
调用的地方：https://github.com/aaavieri/xl-product/blob/master/src/components/Frame.vue
3. 本次踩坑没用到但是碰巧看到的一些值得推荐的
别人整理的好多的vue控件(不是框架就控件)：https://github.com/vuejs/awesome-vue
基于vue+canvas做的动画特效：https://github.com/chenxuan0000/vue-canvas-effect
线上示例：https://chenxuan0000.github.io/vue-canvas-effect/index.html#/router_1
我觉得效果非常棒，可惜我这个应用不知道把它加在哪里，作者也比较懒，只做了两个
饿了么有整合了vue的echart、地图，就在饿了么的github账号repo下面
https://github.com/elemefe
感言：
写到这里算是结束了，技术介绍算是完毕了，这几天的调查与开发真的很开心。说几点感言吧：
1，技术选型真的很重要，如果可以的话一定不要选自己不喜欢的，对我这个JAVA后台来说，做前端就好比吃屎，用mint-ui和muse-ui写的时候真是吃屎味的屎，而用vue-material的时候就变成了奶油味的屎了^_^，自己喜欢的才会更有动力写下去。
2，多上github，上面有很多很多不要钱的好东西，星多的不一定比星少的好，上了1K的都是好东西，没上的嘛就不好说了。
3，如果你真要做好前端而不是像我这样玩票的话，请学好css。
4，E文很重要。
5，我从来不画原型图，不要设计书，想到哪写到哪，想加什么功能就加什么功能，真的很爽，也许这就是敏捷开发吧，经常控制不住季几写到凌晨两三点。不要跟我一样(尴尬而又不失礼貌的微笑)^_^