Vue2.0简易案例

转载自：http://www.jianshu.com/p/4863eb15d3be

效果图：

Vue2.0简易案例

Vue2.0简易案例

Vue2.0简易案例

使用微信或手机浏览器扫描二维码预览

aa.png

在线地址：https://www.huzerui.com/vue2.0-demo

源码：https://github.com/alex1504/vue2.0-demo

说明：
2017.1.13 主导航电影、音乐、图书、图片使用router跳转电影模块使用tab菜单切换各个列表模块下拉滚动加载图片模块使用flex布局实现瀑布流效果
2017.1.17 增加了电影详情模块，优化路由跳转
2017.1.18 增加了登录、登出模块，使用leancloud数据存储功能
2017.1.19 增加了图片详情模块，增加了新的生产依赖vue-touch
2017.2.6 新增用户注册模块

使用vue-cli构建

生产环境依赖包：
"axios": "^0.15.3",//发送请求
"vue": "^2.1.0",
"vue-material": "^0.5.2", //谷歌material概念的Ui框架
"vue-router": "^2.1.1", //路由
"vue-swipe": "^2.0.2", //slide插件
"vuex": "^2.1.1" // 状态管理
"vue-touch": "^2.0.0-beta.3",//触摸插件

开发依赖：请看源码中package.json文件的devDependencies

使用了几个开放的接口（各个接口地址请在components中各个list组件的loadMore方法中查看）：
豆瓣- 电影图书 （注意：豆瓣的接口有每分钟40次的限制，超过调用貌似会冻结几分钟，所以电影模块和图书模块有时候会出现没有东西的情况）
网易- 音乐列表音乐搜索
gankio- 福利图

其他说明：

1 Vue-material组件中的spinner（加载组件）在安卓机下面的浏览器有些无法正常显示，ios下面测试正常，chrome以及微信中体验效果较好。
2 由于众所周知的原因，谷歌字体只能过墙后才能被正常加载，而Vue-material中的原生icon使用了谷歌字体，在这个案例中改为使用iconfont。
3 代码存在github，国内访问速度没那么快，初次加载较慢请耐心等待。
4如果项目对你有所帮助，可以在github中star一下啦，不甚感激。
5 知乎:https://www.zhihu.com/people/huzerui/activities 欢迎随时私信交流

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加笑笑微信：iamaixiaoxiao，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。