Vue2.0版英雄聯(lián)盟助手
vuejs League of Legends project
1. 技術(shù)棧
由 vue-cli + muse-ui 構(gòu)建,使用 axios 進(jìn)行數(shù)據(jù)的請(qǐng)求,使用 vuex 進(jìn)行狀態(tài)管理,圖片懶加載: 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. 已經(jīng)完成的模塊
- [x] Landing page
- [x] 英雄列表頁
- [x] 英雄詳情頁
- [x] 召喚師搜索頁面
- [x] 召喚師詳情頁(內(nèi)含戰(zhàn)績(jī)列表)
- [x] 召喚師詳情頁戰(zhàn)績(jī)列表的下拉刷新(還不流暢)
- [x] 單場(chǎng)比賽對(duì)局信息
- [x] 關(guān)于頁面
- [x] 新建新聞頁,作為首頁
- [x] 視頻頁加載iframe卡 (用正則匹配出視頻地址)
- [x] UI優(yōu)化 (替換成muse-ui)
- [x] 英雄詳情布局
- [x] 點(diǎn)擊返回按鈕時(shí)tab的正確顯示
4. 效果圖









5. 待完成與優(yōu)化
- [ ] 單場(chǎng)比賽信息的完善
- [ ] 完善API文檔
- [ ] 召喚師搜索頁內(nèi)容的豐富
- [ ] 頁面切換時(shí)的動(dòng)畫效果
- [ ] footerfixed,輸入法問題
- [ ] 豐富視頻頁內(nèi)容
- [ ] 視頻頁播放時(shí)候是否考慮直接在當(dāng)前頁面彈出層播放,方便關(guān)閉
6. 結(jié)語
在github上看了那么多的vue項(xiàng)目,自己的看過其中的部分,當(dāng)然肯定也仿過,可是一直沒堅(jiān)持下去。本項(xiàng)目是自己第一個(gè)完整的開源小項(xiàng)目,然后會(huì)有很多的不足,也是自己第一次使用vuex,希望大家可以多提意見,我也會(huì)一直更新這個(gè)項(xiàng)目,喜歡的朋友可以star一下。最后感謝帶玩游戲平臺(tái)提供的API!