基于 Vue(2.6) + Vuex +Vue-Router + Axios + Vant UI + Scss + ES6 等開發(fā)一款小說 WebApp徒仓，UI 界面參考了移動版版的起點中文網(wǎng)巍糯、flex 布局適配常見移動端狈谊。
在線地址
因為服務器很不給力袱结，所以加載很慢渡讼，急性子的大神可以clone下來砸紊，運行看效果备燃。如果可以的話一會再訪問應該就沒什么問題了其做，出現(xiàn)這樣的問題顶考，實在抱歉。
項目演示地址：仿小說網(wǎng)WebApp妖泄。(純屬個人練手驹沿，鞏固知識，無其他用途)
項目源碼地址：vue-fiction蹈胡，覺得還可以的話給個star 在這先謝謝了~
推薦使用手機訪問渊季，電腦在 Chrome 調(diào)試模式下食用效果更佳，開啟調(diào)試模式的手機模式后罚渐，如果不能滾動却汉，刷新一下頁面即可。
預覽
開發(fā)目的
通過學習開發(fā)一個 Vue 全家桶項目荷并，讓自己更熟練的使用 Vue 全家桶合砂、模塊化開發(fā)、ES6 等等知識源织，提高自己的技術(shù)能力翩伪。
技術(shù)棧
前端
Vue：用于構(gòu)建用戶界面的 MVVM 框架
vue-router：為單頁面應用提供的路由系統(tǒng)微猖，使用了Lazy Loading Routes技術(shù)來實現(xiàn)異步加載優(yōu)化性能
vuex：Vue 集中狀態(tài)管理，在多個組件共享某些狀態(tài)時非常便捷
vue-lazyload：實現(xiàn)圖片懶加載缘屹，節(jié)省用戶流量凛剥，優(yōu)化頁面加載速度
vant ui：移動端ui框架，支持TypeScript轻姿，目前用過最好用的沒有之一犁珠，組件多而且實用。(源碼用TS寫的踢代，F(xiàn)ork出來盲憎，自己研究，擴展胳挎。蠻好的)
SCSS：css 預編譯處理器
ES6：ECMAScript 新一代語法饼疙，模塊化、解構(gòu)賦值慕爬、Promise窑眯、Class 等方法非常好用
后端
Node.js：利用 Express 搭建的本地測試服務器
vue-axios：用來請求后端 API?
chreeio：jquery核心功能的一個快速靈活而又簡潔的實現(xiàn)，主要是為了用在服務器端需要對DOM進行操作的地方
其他工具
vue-cli：Vue 腳手架工具医窿，快速初始化項目代碼
eslint：代碼風格檢查工具磅甩，幫助我們規(guī)范代碼書寫（一定要養(yǎng)成良好的代碼規(guī)范）
iconfont：阿里巴巴圖標庫，誰用誰知道
fastclick：消除 click 移動游覽器 300ms 的延
個人收獲
css方面
1姥卢、transition + transform-scale + ::before/::after偽元素 ： 實現(xiàn)圖標X效果
2卷要、text-align:justify：實現(xiàn)文段兩端對齊
3、counter-reset +?counter-increment + ::before {content: counter()}： 實現(xiàn)列表序列號
4独榴、animation + background-image:?linear-gradient()：實現(xiàn)加載時效果
js方面
1僧叉、window.requestAnimationFrame：實現(xiàn)限時免費倒計時
2、el.addEventListener('scroll') +?e.target.scrollTop: 實現(xiàn)記錄滾動位置 （e.target.scrollTo真機測試無效）
3棺榔、變量解構(gòu)賦值
4瓶堕、async/await 解決頁面多請求同步化
5、Object.freeze()：解決vue長列表數(shù)據(jù)影響性能和Object.prototype原型污染
等等
TODO
1症歇、添加登錄模塊
2郎笆、添加后臺管理系統(tǒng)
3、使用TS重構(gòu)項目
4忘晤、升級為vue3.0項目
最后
最后歡迎各路大神GitHub上Issues指出不足感激不盡宛蚓，歡迎star~~
