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

阅读量：6980 次

发布时间：2019-06-27

本文共 2295 字，大约阅读时间需要 7 分钟。

应届毕业生，目前正在找工作，简历需要所以开发了这个app。刚开始开发也是一脸懵逼，因为没得后台，一些逻辑功能也不知道怎么拓展。好在看到了追书神器api接口，顿时让我决心做出这一款app来。

开发一个阅读器系统难度确实不小，几乎不可能给一个应届生完整的开发出来。所以本次开发借鉴了几个前辈开发的vue阅读项目，加以改进，便做出了一个完整的vue阅读app。原创30%，基本上是界面，新加了七八个功能，解决了前辈阅读器上的绝大部分bug，并成功添加路径打包成app。废话不多说，开始讲项目：

项目地址：

希望帮我点星，谢谢

前言

本次开发是vue全家桶模式，项目结构简单，并且做了大量的优化。所以启动非常迅速下载项目后

//install dependenciesnpm install//serve with hot reload at localhost:8080npm run dev//build for production with minificationnpm 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).在父组件的<router-view>中套上缓存标签<keep-alived>

//页面设置
    //路由设置   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里引入字体