Vue2.0 版英雄联盟助手,LOL 与 Vuejs 的激情碰撞

Vue2.0版英雄联盟助手

vuejs League of Legends project

项目源码

1. 技术栈

vue-cli + muse-ui 构建,使用 axios 进行数据的请求,使用 vuex 进行状态管理,图片懒加载: vue-lazyload,轮播组件:vue-awesome-swiper,上拉加载: vue-infinite-scroll

2.Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8888
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

3. 已经完成的模块

  • [x] Landing page
  • [x] 英雄列表页
  • [x] 英雄详情页
  • [x] 召唤师搜索页面
  • [x] 召唤师详情页(内含战绩列表)
  • [x] 召唤师详情页战绩列表的下拉刷新(还不流畅)
  • [x] 单场比赛对局信息
  • [x] 关于页面
  • [x] 新建新闻页,作为首页
  • [x] 视频页加载iframe卡 (用正则匹配出视频地址)
  • [x] UI优化 (替换成muse-ui)
  • [x] 英雄详情布局
  • [x] 点击返回按钮时tab的正确显示

4. 效果图









5. 待完成与优化

  • [ ] 单场比赛信息的完善
  • [ ] 完善API文档
  • [ ] 召唤师搜索页内容的丰富
  • [ ] 页面切换时的动画效果
  • [ ] footerfixed,输入法问题
  • [ ] 丰富视频页内容
  • [ ] 视频页播放时候是否考虑直接在当前页面弹出层播放,方便关闭

6. 结语

在github上看了那么多的vue项目,自己的看过其中的部分,当然肯定也仿过,可是一直没坚持下去。本项目是自己第一个完整的开源小项目,然后会有很多的不足,也是自己第一次使用vuex,希望大家可以多提意见,我也会一直更新这个项目,喜欢的朋友可以star一下。最后感谢带玩游戏平台提供的API!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组...
    鲁大师666阅读 43,534评论 5 97
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库...
    卞卞村长L阅读 5,697评论 0 8
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,296评论 8 124
  • 我每天都想给你说话 我每天都在压抑 我每天都想看见你 我每天又在逃着你的目光 我所有的热情与冷淡 现在已归为自闭症...
    粮食和花圈阅读 2,944评论 0 4
  • 能被你思念的感觉 真好 晚安 先生 希望你在我这里 终究成为一个特别幸福的人
    guijuan_Guo阅读 2,600评论 0 0