Code Monkey home page Code Monkey logo

vue-ebook's Introduction

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.书城首页/书架的标题+搜索框交互动画

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.