Vue2.0版掌上英雄联盟助手,希望大家多多指导
发布于 4 个月前 作者 arronf2e 1803 次浏览 来自 分享

Vue2.0版英雄联盟助手

vuejs League of Legends project 项目地址:https://github.com/arronf2e/Vue2.0LOL

在线地址

http://o9xap42x4.bkt.clouddn.com/lol.png

1. 技术栈

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

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] 新建新闻页,作为首页

4. 效果图

http://o9xap42x4.bkt.clouddn.com/landing.png http://o9xap42x4.bkt.clouddn.com/news.png http://o9xap42x4.bkt.clouddn.com/w2.png http://o9xap42x4.bkt.clouddn.com/w3.png http://o9xap42x4.bkt.clouddn.com/w4.png http://o9xap42x4.bkt.clouddn.com/w5.png http://o9xap42x4.bkt.clouddn.com/w6.png http://o9xap42x4.bkt.clouddn.com/w7.png http://o9xap42x4.bkt.clouddn.com/w8.png

5. 待完成与优化

  • [ ] UI优化
  • [ ] 移动端布局的优化
  • [ ] 单场比赛信息的完善
  • [ ] 完善API文档
  • [ ] 召唤师搜索页内容的丰富
  • [ ] 页面切换时的动画效果
  • [ ] footerfixed,输入法问题
  • [ ] 视频页加载iframe卡 (准备用正则匹配出视频地址)
  • [ ] 丰富视频页内容
  • [ ] 点击返回按钮时tab的正确显示
  • [ ] 英雄详情布局

6. 结语

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

22 回复

详情页样式还可以再优化下就更好了,启动图不错

source vue-cnode mobile 2.0

手动点赞<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@1340641314 谢谢大神指导,我最近会把todolist中的没做的一直优化完

@1340641314 挺厉害的,关注了你github中的好几个开源项目

不错,赞一个

@1340641314 我这样使用 vuex 的姿势正确吗? 第一次用到vuex来管理

vuex我一般都是用来存储一些全局的数据

source vue-cnode mobile 2.0

请问你是购买的token吗?我看免费版的token一天就过期了

@luogue 我也看了。一天就过期,开发出来只能爽一天。。。买个token有感觉不划算。

@yangjaixi 每天都领不一样的token啊,我觉得太麻烦了,而且整理出来的API并不规范,还经常改动

回到顶部