vue-Ebook

基于Vue3.0制作的小说阅读器 webapp

一、阅读器开发

项目技术难点分析

一、阅读器开发：分页算法、全文搜索算法、引入Web字体、主题设置
二、离线存储缓存机制：LocalStorage + IndexedDB
三、实现各种复杂手势 + 交互动画、 如何兼容手势 + 鼠标操作
四、利用vuex + mixin 实现组件复用 + 解耦，大大精简代码量
五、利用es6 优雅的实现数据结构变化
六、科大讯飞api在线语音合成API开发

项目准备

* 字体准备
* 项目依赖包下载 + 项目配置
* 准备Web 字体
* viewport 配置
* rem 设置 + 自适应布局实现思路
* global.scss + reset.scss
* 引入Vuex

搭建静态资源服务器

* Nginx 安装
* 配置文件
* 常见问题及处理方法

需求分析

阅读器-> 解析分析 -> 字号 + 字体 -> 主题 -> 进度 -> 目录 -> 搜索 -> 书签 -> 页眉 + 页脚 -> 分页（难点）

技术难点

1.epub.js
2.vuex + mixin
3.vue-i18n 实现国际化
4.动态切换主题 + 书签操作手势

二、 书城首页、搜索页、列表页、详情页开发

需求分析

标题搜索 -> 随机推荐（难点） -> 猜你喜欢 -> 热门推荐 -> 精选 -> 分类推荐 -> 全部分类 -> 分类列表 -> 搜索页面 -> 详情页

三、 书架页面逻辑开发

1.书架标题组件布局实现
2.书架标题组件交互实现
3.书架搜索框布局实现
4.书架搜索框交互实现
5.书架图书列表布局
6.书架编辑模式开发
7.书架弹出框功能开发
8.电子书离线缓存功能开发
9.书架分类列表开发
10.书架修改分组功能开发

项目总结

vue使用

1.通过vuex同步组件状态(理解mapGetters、mapActions原理)
2.通过mixins混入机制大幅精简组件代码
3.组件插槽slot机制大幅提升组件的复用性
4.动态组件提升组件应用的灵活性
5.组件化API化大幅简化组件调用
6.通过动态路由加载组件

vue动画进阶

1.阅读器下拉添加书签（同时支持手势和鼠标操作）
2.阅读器目录加载时的精致动画、听书播放时的播放动画
3.阅读器标题+菜单+设置+按钮+目录多组件交互动画
4.推荐图书弹跳+翻转+烟花动画
5.书架更新时的列表位移动画（transition-group）
6.书城首页/书架的标题+搜索框交互动画