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

miracledan 發布于2019-08-22 18:18 / 2475人閱讀

摘要：原創，基本上是界面，新加了七八個功能，解決了前輩閱讀器上的絕大部分，并成功添加路徑打包成。畢竟只是一個學習項目跨域問題本次開發使用的是代理追書神器，是不需要后臺認證直接可以跨域的接口，以實現在移動端顯示的效果。

應屆畢業生，目前正在找工作，簡歷需要所以開發了這個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.項目組件復用導致再次帶入參數不會渲染頁面
使用監聽事件，監聽路由是否進入當前頁面，是就執行更新頁面的函數

 "$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).在父組件的中套上緩存標簽

//頁面設置


//路由設置

   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...

云服務器 GPU云服務器高仿追書仿追書已備案成功的域名把電腦做成一個云文件服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95723.html

vue仿追書神器，vue小說項目源碼

摘要：一點閱讀器源自追書神器，免費使用目前已初步開發完成項目地址歡迎，，推薦一個之前用文章類閱讀寫的一點閱讀微信小程序一點文章已上線，可以再微信搜索一點文章體驗在線體驗地址點擊這里體驗服務器太，渲染慢部分效果截圖一點閱讀器優勢一點閱讀器追書神 vue-reader 一點閱讀器！API源自追書神器，免費使用！目前已初步開發完成！ Github項目地址:https://github.com/An...

justCoding 2019-08-29 16:18 評論0 收藏0
vue仿追書神器，vue小說項目源碼

摘要：一點閱讀器源自追書神器，免費使用目前已初步開發完成項目地址歡迎，，推薦一個之前用文章類閱讀寫的一點閱讀微信小程序一點文章已上線，可以再微信搜索一點文章體驗在線體驗地址點擊這里體驗服務器太，渲染慢部分效果截圖一點閱讀器優勢一點閱讀器追書神 vue-reader 一點閱讀器！API源自追書神器，免費使用！目前已初步開發完成！ Github項目地址:https://github.com/An...

happyhuangjinjin 2019-08-23 10:49 評論0 收藏0
vue仿追書神器，vue小說項目源碼

摘要：一點閱讀器源自追書神器，免費使用目前已初步開發完成項目地址歡迎，，推薦一個之前用文章類閱讀寫的一點閱讀微信小程序一點文章已上線，可以再微信搜索一點文章體驗在線體驗地址點擊這里體驗服務器太，渲染慢部分效果截圖一點閱讀器優勢一點閱讀器追書神 vue-reader 一點閱讀器！API源自追書神器，免費使用！目前已初步開發完成！ Github項目地址:https://github.com/An...

Pocher 2019-08-02 11:10 評論0 收藏0
Vue小說閱讀器（仿追書神器）

摘要：一個閱讀器項目，目前已升級到，閱讀器支持橫向分頁并滑動翻頁沒有動畫，需要動畫的可以自己設置，增加即可技術棧全家桶部署實現功能小說書架分類查詢書單查詢排行榜搜索小說詳情小說換源閱讀歷史記錄截圖提示換源功能已經實現，但是由于每個書源返回的書一個vue閱讀器項目，目前已升級到2.0，閱讀器支持橫向分頁并滑動翻頁（沒有動畫，需要動畫的可以自己設置，增加transitionDuration即可...

klivitamJ 2019-08-26 13:23 評論0 收藏0