Giter Site home page Giter Site logo

vue2.0lol's Introduction

Vue2.0版英雄联盟助手

vuejs League of Legends project

项目源码 在线地址 (该地址目标暂时有问题,请直接下载项目运行)

Version: 2.0 更新内容:

重写了vuex部分 添加了周免英雄

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. 已经完成的模块

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

4. 效果图

5. 待完成与优化

  • 单场比赛信息的完善
  • 完善API文档
  • 召唤师搜索页内容的丰富
  • footerfixed,输入法问题
  • 丰富视频页内容
  • 视频页播放时候是否考虑直接在当前页面弹出层播放,方便关闭
  • 周免
  • 段位图标
  • 英雄的搜索
  • 一些图片请求的bug

6. 结语

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.