Vue2.0简易案例

作者: hzrWeber | 来源:发表于2017-01-19 22:03 被阅读768次

效果图:

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. 如果项目对你有所帮助,不妨star一下,你的支持是我前进的动力。
  5. 知乎:https://www.zhihu.com/people/huzerui/activities 欢迎随时私信交流

相关文章

网友评论

  • 酱油_:楼主,问个问题。请问那些豆瓣的API都是怎么找的呀?求指导,授我鱼吧
    hzrWeber: @不只是个看客 网易api需要用爬虫爬取,具体很难细说,你可以谷歌搜下有大牛提供。关于axios不能跨域的问题,我用了bird.io代理,你也可以使用你自己的服务器代理,参考根目录下的proxy.php,或者你可以用vue-resource支持jsonp请求
    酱油_:@前端空城师 star了楼主,那那些网易云的API呢,是用什么方法找到的呢?还有使用axios做请求的时候不会遇到跨域的问题吗?
    hzrWeber:这是豆瓣官方提供的开放api,有单位时间请求次数的限制,你可以用百度搜索一下“豆瓣API”即可找到。
  • 会飞小超人:作者这个不错,点赞
    hzrWeber: @会飞小超人 没毛病…
  • 1f043c2a546d:楼主 md-button 这类的标签是什么写法呢 什么框架
    hzrWeber: @92year 这是vue-material中的组件

本文标题:Vue2.0简易案例

本文链接:https://www.haomeiwen.com/subject/hztwbttx.html