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

2019年9月14日 219次阅读 来源: CR陈

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

目录分析以及功能简介

下面是项目结构图
《一个高仿追书神器的vue阅读器。已成功做成app》

实现功能：

  1. 小说模糊搜索
  2. 书架功能（经过优化）
  3. 章节跳转
  4. 小说分类（修改界面）
  5. 小说详情
  6. 阅读器背景、字体、字体大小更改(修改加优化)
  7. 换源（经过优化）
  8. 排行榜功能（没做好）
  9. 小说删除
  10. 目录

截图：

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

遇到的问题以及解决方法

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里加入下面红框代码（已在代码中实现）：
《一个高仿追书神器的vue阅读器。已成功做成app》

4.静态资源问题

静态资源分为静态js，css文件一类和图片、字体一类。一般前者直接放在src里的文件夹里没事，但后者需要注意，因为vue是单页面程序，图片、字体之类的东西是需要引入到页面之中的。尤其是图片（没有写在css属性background里的），如果写src的绝对地址不会出现错误（webpack会把这种写法的图片转换成流处理模式），但如果是：src=“‘../../static/’+index”列表渲染在手机上是实现不出来的，因为打包成app后目录结构改变，而列表渲染后你的url是原项目的绝对地址，你需要去特地看一下app下的资源结构，目前没解决这问题。

字体安装方法：
首先在assets文件夹导入字体，然后在同级reset.css里引入字体
《一个高仿追书神器的vue阅读器。已成功做成app》

接着需要在webpack.base.conf.js里设置limit（单位是byte），大于你的字体文件大小就可以了，值得一提的是最好不要导入大于4m的字体文件，最好不到导入超过5个字体文件。这样会让项目加载变慢，手机好任性我无话可说。嘿嘿。
因为在打包项目中目录结构改变，还需要加入publicPath（你引用的css文件和你字体文件的位置）具体如下：
《一个高仿追书神器的vue阅读器。已成功做成app》

图片css引入简单多了但也要设置publicPath，是在bulid——>utils.js里，这是静态文件夹static下目录的图片位置设置：

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

5.打包
使用工具Hbuilder，界面简单，操作方便，具体细节戳下面链接。最后一道工作，修改config->index.js里的build规范下的一个属性，“/”改成“./”。注意是build下的规范：

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

感谢

借鉴过的前辈的东西，附上链接：
vue的APP打包：https://blog.csdn.net/zhoudan…
wum阅读：https://github.com/windjourne…
n阅读：https://github.com/zimplexing…
追书神器api：https://github.com/zimplexing…

    原文作者：CR陈
    原文地址: https://segmentfault.com/a/1190000015401972
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞