Code Monkey home page Code Monkey logo

vue-nreader's Introduction

vue-nReader

使用mint-ui对整个项目进行了重构,整理了项目的目录结构与代码,较上个版本新增了小说换源搜索历史记录、优化了滚动下载下拉刷新

整个项目一共14个页面(包括通用组件),主要使用了vue2.0+vue-router+vuex,主要实现了小说排行榜,小说分类,小说详情,小说阅读,搜索页面,小说阅读记录等页面。达到了可用来看小说的基本需求。

项目中的API均来自追书神器,纯属共享学习之用,有任何疑问或建议可提issue,使用代理,本地可以完美运行。

API文档

本地运行代理

本地运行

使用vue-cli工具构建,基本命令如下:

# 安装依赖
npm install 

# 开发模式
npm run dev

# 生产模式
npm run build

预览地址

项目放在google云的虚拟主机上,访问速度看人品。代理也运行在上面,所以加载速度可能会比较慢。其中有一些小说封面会加载不出来,这个是api的问题,并不是网络的原因。

电脑端请开启开发者模式 在线预览地址

手机扫码:

实现功能

  • 小说书架
  • 分类查询
  • 排行榜
  • 搜索(搜索历史,自动补全)
  • 小说详情
  • 小说换源
  • 阅读历史记录(记录阅读章节)
  • 阅读夜间模式
  • 章节倒叙查看

TODO

  • 记录阅读历史位置

  • 增加发现页面

  • 社区评论功能

  • 组件切换动效

  • 阅读界面设置功能

  • 小说下载

屏幕截图

问题

记录在项目中遇到的一些问题,和解决方法

  • 滚动条控制

    • 在不是 HTML5 history 模式下,还没找到解决的方法
  • flex布局下横向滚动

    • 设置属性flex-shrink:0,默认下该属性值为1,空间不够时,后等比例缩小,设置为0之后,不会缩小项目
  • 标签选中后active样式的添加    - 使用:class 判断条件为点击当前标签的索引值

  • 同时绑定按键修饰符(keyup事件但不包括按键enter)

    • 监听input事件,绑定keyup.enter事件
  • 返回路径问题

    • 使用$router.go()进行模拟返回
  • 图片加载错误处理

    • 图片加载错误的onerror方法中的静态地址webpack打包不会将其转化为base64编码,所以现在的解决方法是贴一个在线的图片地址

vue-nreader's People

Contributors

zimplexing avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.