一个高仿追书神器的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里加入下面红框代码(已在代码中实现):
clipboard.png

4.静态资源问题

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

字体安装方法:
首先在assets文件夹导入字体,然后在同级reset.css里引入字体
clipboard.png

接着需要在webpack.base.conf.js里设置limit(单位是byte),大于你的字体文件大小就可以了,值得一提的是最好不要导入大于4m的字体文件,最好不到导入超过5个字体文件。这样会让项目加载变慢,手机好任性我无话可说。嘿嘿。
因为在打包项目中目录结构改变,还需要加入publicPath(你引用的css文件和你字体文件的位置)具体如下:
clipboard.png

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

clipboard.png

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

clipboard.png

感谢

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

  • 4
    点赞
  • 0
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值