基於Vue2開發的讀書WebAPP

TDON發表於2017-11-07

前置宣告

此篇文章在7月份已釋出在sf和個人部落格上，目前是在遷移部分之前的文章。

前言

初學vue.js，官網的文件寫的很清楚，看著不難。俗話說：光說不練假把式。程式猿學個新東西還是要敲出來看看效果比較好。最開始是想搞個音樂類的，畢竟天天都會聽歌，但發現搞音樂類的太多了，我再搞個多沒意思。考慮了一下，還是搞個看書的吧，這個還是很少有人搞的。找了找發現只有追書神器的api暴露出來了，起點之類的api找不到。最終效果因為api資料的限制，參考了起點中文網app、起點中文網web端，以及追書神器web端，再加上自己的一些想法搞出來的。專案中的小圖示使用的是阿里巴巴的向量圖示庫Iconfont。

技術棧

vue2 + vuex + vue-router + webpack + ES6 + axios + sass

原始碼地址

github.com/XNAL/ReadMo…

專案執行

git clone github.com/XNAL/ReadMo…
cd ReadMore
npm install

npm run dev（本地執行訪問：http://localhost:8080）

npm run build （部署上線生成的dist資料夾放到伺服器中即可：需要配置代理，如使用nginx，可參考下面問題中的配置）

說明

目前只做了第一個版本，還存在一些需要進行優化的細節問題，後續會繼續進行維護更新。如果發現什麼問題，也歡迎跟我聯絡反饋。

如果覺得做的還行，對您有所幫助，歡迎“start”一下。

開發中遇到的一些問題

多個子元件迴圈，父元件如何處理載入狀態（精選頁面）

每個子元件載入完後是同`this.$emit`通知父元件，父元件判斷所有子元件載入完成後隱藏loading。複製程式碼

跳轉頁面後active標記

最開始使用url.indexOf來處理，後來直接發現vue-router的exact屬性更好用。複製程式碼

呼叫第三方api介面時跨域的問題

1. 本地使用proxyTbale

    在config/index.js中新增配置：

    '/api': {
        target: 'http://api.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                
          '^/api': ''
        }   
    }


2. 部署伺服器後通過nginx代理

    nginx中配置：

    location /api/ {
         proxy_pass http://api.zhuishushenqi.com/;
     }

3. 呼叫介面時只需要以`/api`開頭就可以複製程式碼

伺服器部署後vue-router的虛擬路由在重新整理時出現404頁面

修改nginx配置：

location / {
     try_files $uri $uri/ @router;          //增加的內容
     root /home/don/book;
     index index.html;
}

location @router {                          //增加的內容
    rewrite ^.*$ /index.html last;          //增加的內容
}                                           //增加的內容複製程式碼