Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zimplexing/vue-nReader
:book: vue2.0 + vue-router + vuex 的 一个阅读webapp
https://github.com/zimplexing/vue-nReader
api vue zhuishushenqi
Last synced: 6 days ago
JSON representation
:book: vue2.0 + vue-router + vuex 的 一个阅读webapp
- Host: GitHub
- URL: https://github.com/zimplexing/vue-nReader
- Owner: zimplexing
- License: mit
- Created: 2017-05-16T15:18:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T08:32:13.000Z (over 6 years ago)
- Last Synced: 2024-08-02T09:25:42.604Z (3 months ago)
- Topics: api, vue, zhuishushenqi
- Language: Vue
- Homepage:
- Size: 4.15 MB
- Stars: 528
- Watchers: 18
- Forks: 143
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue - vue-nReader - nReader?style=social) - 使用vue2.0 + vue-router + vuex 的一个多页面小说阅读webapp (Demo示例)
- awesome - vue-nReader - 使用vue2.0 + vue-router + vuex 的一个多页面小说阅读webapp (Demo示例)
- awesome-github-vue - vue-nReader - 使用vue2.0 + vue-router + vuex 的一个多页面小说阅读webapp (Demo示例)
- awesome-github-vue - vue-nReader - 使用vue2.0 + vue-router + vuex 的一个多页面小说阅读webapp (Demo示例)
README
[![DeepScan Grade](https://deepscan.io/api/projects/479/branches/739/badge/grade.svg)](https://deepscan.io/dashboard/#view=project&pid=479&bid=739)
# vue-nReader使用`mint-ui`对整个项目进行了重构,整理了项目的目录结构与代码,较上个版本新增了`小说换源`、`搜索历史记录`、优化了`滚动下载`和`下拉刷新`
整个项目一共14个页面(包括通用组件),主要使用了vue2.0+vue-router+vuex,主要实现了小说排行榜,小说分类,小说详情,小说阅读,搜索页面,小说阅读记录等页面。达到了可用来看小说的基本需求。
项目中的API均来自追书神器,纯属共享学习之用,有任何疑问或建议可提[issue](https://github.com/zimplexing/vue-nReader/issues/new),使用代理,本地可以完美运行。
[API文档](https://github.com/zimplexing/vue-nReader/blob/master/doc/zhuishushenqi.md)
[本地运行代理](https://gist.github.com/zimplexing/c7c1f15ea3f270de3962fc0ab466d82e)
## 本地运行
使用vue-cli工具构建,基本命令如下:
``` bash
# 安装依赖
npm install# 开发模式
npm run dev# 生产模式
npm run build```
## 预览地址
项目放在国外虚拟主机上,代理也运行在上面,所以加载速度可能会比较慢。其中有一些小说封面会加载不出来,这个是api的问题,并不是网络的原因。电脑端请开启开发者模式
[在线预览地址](http://65.49.197.99:32768/)手机扫码:
## 实现功能
- [x] 小说书架
- [x] 分类查询
- [x] 排行榜
- [x] 搜索(搜索历史,自动补全)
- [x] 小说详情
- [x] **小说换源**
- [x] 阅读历史记录(记录阅读章节)
- [x] 阅读夜间模式
- [x] 章节倒叙查看## TODO
- [ ] 记录阅读历史位置- [ ] 增加发现页面
- [ ] 社区评论功能
- [ ] 组件切换动效
- [ ] 阅读界面设置功能
- [ ] 小说下载
## 屏幕截图
## 问题
记录在项目中遇到的一些问题,和解决方法
- [ ] 滚动条控制
- 在不是 `HTML5 history `模式下,还没找到解决的方法- [x] flex布局下横向滚动
- 设置属性`flex-shrink:0`,默认下该属性值为1,空间不够时,后等比例缩小,设置为0之后,不会缩小项目- [x] 标签选中后active样式的添加
- 使用`:class` 判断条件为点击当前标签的索引值- [x] 同时绑定按键修饰符(keyup事件但不包括按键enter)
- 监听`input`事件,绑定`keyup.enter`事件- [x] 返回路径问题
- 使用`$router.go()`进行模拟返回- [x] 图片加载错误处理
- 图片加载错误的onerror方法中的静态地址webpack打包不会将其转化为base64编码,所以现在的解决方法是贴一个在线的图片地址