vue-fiction簡易版小說網

vue-fiction

基於 Vue(2.6) + Vuex +Vue-Router + Axios + Vant UI + Scss + ES6 等開發一款小說 WebApp，UI 界面參考了移動版的起點中文網、flex 佈局適配常見移動端。

在線地址

由於服務器很不給力，因此加載很慢，急性子的大神能夠clone下來，運行看效果。若是能夠的話一會再訪問應該就沒什麼問題了，出現這樣的問題，實在抱歉。

項目演示地址：仿小說網WebApp。(純屬我的練手，鞏固知識，無其餘用途)

項目源碼地址：vue-fiction。以爲還能夠的話給個star 在這先謝謝了~

推薦使用手機訪問，電腦在Chrome調試模式下效果更佳，開啓調試模式的手機模式後，若是不能滾動，刷新一下頁面便可。

預覽

圖片雖然壓縮過了，可是幾張加載一塊兒仍是有3MB左右，因此請耐心等待一下啦。感受不錯的能夠去上面的地址體驗一下呦~

開發目的

經過學習開發一個 Vue 全家桶項目，讓本身更熟練的使用 Vue 全家桶、模塊化開發、ES6 等等知識，提升本身的技術能力。

技術棧

前端

• Vue：用於構建用戶界面的 MVVM 框架
• vue-router：爲單頁面應用提供的路由系統，使用了Lazy Loading Routes技術來實現異步加載優化性能
• vuex：Vue集中狀態管理，在多個組件共享某些狀態時很是便捷
• vue-lazyload：實現圖片懶加載，節省用戶流量，優化頁面加載速度
• vant ui：移動端ui框架，支持TypeScript，目前用過最好用的沒有之一，組件多並且實用。(源碼用TS寫的，Fork出來，本身研究，擴展。蠻好的)
• SCSS：css 預編譯處理器
• ES6：ECMAScript 新一代語法，模塊化、解構賦值、Promise、Class 等方法很是好用

後端

• Node.js：利用 Express 搭建的本地測試服務器
• vue-axios：用來請求後端 API
• chreeio：jquery核心功能的一個快速靈活而又簡潔的實現，主要是爲了用在服務器端須要對DOM進行操做的地方

其餘工具

• vue-cli：Vue 腳手架工具，快速初始化項目代碼
• eslint：代碼風格檢查工具，幫助咱們規範代碼書寫（必定要養成良好的代碼規範）
• iconfont：阿里巴巴圖標庫，誰用誰知道
• fastclick：消除 click 移動遊覽器 300ms 的延

我的收穫

css方面

1. transition + transform-scale + ::before/::after僞元素 ： 實現圖標X效果
2. text-align:justify：實現文段兩端對齊
3. counter-reset + counter-increment + ::before {content: counter()}： 實現列表序列號
4. animation + background-image: linear-gradient()：實現加載時效果

js方面

1. window.requestAnimationFrame：實現限時免費倒計時
2. el.addEventListener('scroll') + e.target.scrollTop: 實現記錄滾動位置 （e.target.scrollTo真機測試無效）
3. 變量解構賦值
4. async/await：解決頁面多請求同步化
5. Object.freeze()：解決vue長列表數據影響性能和Object.prototype原型污染等等

TODO

1. 添加登陸模塊
2. 添加後臺管理系統
3. 使用TS重構項目
4. 升級爲vue3.0項目

最後

最後歡迎各路大神指出不足感激涕零，歡迎star~~