一個高仿追書神器的vue閱讀器。已成功作成app

應屆畢業生，目前正在找工做，簡歷須要因此開發了這個app。剛開始開發也是一臉懵逼，由於沒得後臺，一些邏輯功能也不知道怎麼拓展。好在看到了追書神器api接口，頓時讓我決心作出這一款app來。
開發一個閱讀器系統難度確實不小，幾乎不可能給一個應屆生完整的開發出來。因此本次開發借鑑了幾個前輩開發的vue閱讀項目，加以改進，便作出了一個完整的vue閱讀app。原創30%，基本上是界面，新加了七八個功能，解決了前輩閱讀器上的絕大部分bug，併成功添加路徑打包成app。廢話很少說，開始講項目：

項目地址：https://github.com/charCR2/vu...
但願幫我點星，謝謝

---

前言

本次開發是vue全家桶模式，項目結構簡單，而且作了大量的優化。因此啓動很是迅速下載項目後

//install dependencies
npm install

//serve with hot reload at localhost:8080
npm run dev

//build for production with minification
npm run build

就能夠打包項目，下面是技術棧

技術棧：vue + vue-router + vuex + muse-ui + mint-ui + axios

目錄分析以及功能簡介

下面是項目結構圖

實現功能：

1. 小說模糊搜索
2. 書架功能（通過優化）
3. 章節跳轉
4. 小說分類（修改界面）
5. 小說詳情
6. 閱讀器背景、字體、字體大小更改(修改加優化)
7. 換源（通過優化）
8. 排行榜功能（沒作好）
9. 小說刪除
10. 目錄

截圖：

遇到的問題以及解決方法

1.項目組件複用致使再次帶入參數不會渲染頁面
使用監聽事件，監聽路由是否進入當前頁面，是就執行更新頁面的函數

'$route' (to, from) {
      if(to.name === 'reader'){
        this.getChapters();
        this.getSources();
        this.$store.commit()
      }
    }

2.項目組件多，加載不快

(1).圖片使用懶加載 v-lazy="url" ，注意這是mint-ui的插件
(2).路由使用懶加載

path: '/',
      name: 'home',
      component:  resolve => require(['@/components/home'], resolve),

(3).在父組件的<router-view>中套上緩存標籤<keep-alived>

//頁面設置
<template>
  <div>
    <keep-alive >
    <router-view v-if="$route.meta.keepAlive"></router-view> //須要緩存
    </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view> //不須要
    <m-foot></m-foot>
  </div>
</template>

//路由設置

   path:'/...',
      name:'...',
      component: resolve => require(['...'], resolve),
      meta:{
        keepAlive:true    //true表示須要，false不須要
      }

其餘的啥服務端渲染就算了，比較難並且也用不到。畢竟只是一個學習項目

3.跨域問題
本次開發使用的是代理追書神器api，是不須要後臺認證直接能夠跨域的接口，以實如今移動端顯示的效果。而我所給的代碼裏是沒有代理的追書神器api，只能在開發模式下運行。我會把代理api的連接完整地址註釋在原api.js裏，接口地址在fetch.js裏。
最新修改：才發現手機上無跨域問題，因此從新寫了代碼，速度飛快了，哈哈
原版api跨域實現方法，在項目config->index.js里加入下面紅框代碼（已在代碼中實現）：

4.靜態資源問題

靜態資源分爲靜態js，css文件一類和圖片、字體一類。通常前者直接放在src裏的文件夾裏沒事，但後者須要注意，由於vue是單頁面程序，圖片、字體之類的東西是須要引入到頁面之中的。尤爲是圖片（沒有寫在css屬性background裏的），若是寫src的絕對地址不會出現錯誤（webpack會把這種寫法的圖片轉換成流處理模式），但若是是：src=「‘../../static/’+index」列表渲染在手機上是實現不出來的，由於打包成app後目錄結構改變，而列表渲染後你的url是原項目的絕對地址，你須要去特意看一下app下的資源結構，目前沒解決這問題。

字體安裝方法：
首先在assets文件夾導入字體，而後在同級reset.css裏引入字體

接着須要在webpack.base.conf.js裏設置limit（單位是byte），大於你的字體文件大小就能夠了，值得一提的是最好不要導入大於4m的字體文件，最好不到導入超過5個字體文件。這樣會讓項目加載變慢，手機好任性我無話可說。嘿嘿。
由於在打包項目中目錄結構改變，還須要加入publicPath（你引用的css文件和你字體文件的位置）具體以下：

圖片css引入簡單多了但也要設置publicPath，是在bulid——>utils.js裏，這是靜態文件夾static下目錄的圖片位置設置：

5.打包
使用工具Hbuilder，界面簡單，操做方便，具體細節戳下面連接。最後一道工做，修改config->index.js裏的build規範下的一個屬性，「/」改爲「./」。注意是build下的規範：

感謝

借鑑過的前輩的東西，附上連接：
vue的APP打包：https://blog.csdn.net/zhoudan...
wum閱讀：https://github.com/windjourne...
n閱讀：https://github.com/zimplexing...
追書神器api：https://github.com/zimplexing...