一个高仿追书神器的vue阅读器。已成功做成app

miracledan 发布于2019-08-22 18:18 / 2340人阅读

摘要：原创，基本上是界面，新加了七八个功能，解决了前辈阅读器上的绝大部分，并成功添加路径打包成。毕竟只是一个学习项目跨域问题本次开发使用的是代理追书神器，是不需要后台认证直接可以跨域的接口，以实现在移动端显示的效果。

应届毕业生，目前正在找工作，简历需要所以开发了这个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...

专线服务服务器托管高仿追书仿追书已备案成功的域名把电脑做成一个云文件服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
Vue小说阅读器（仿追书神器）

摘要：一个阅读器项目，目前已升级到，阅读器支持横向分页并滑动翻页没有动画，需要动画的可以自己设置，增加即可技术栈全家桶部署实现功能小说书架分类查询书单查询排行榜搜索小说详情小说换源阅读历史记录截图提示换源功能已经实现，但是由于每个书源返回的书一个vue阅读器项目，目前已升级到2.0，阅读器支持横向分页并滑动翻页（没有动画，需要动画的可以自己设置，增加transitionDuration即可...

maybe_009 2019-08-05 18:08 评论0 收藏0