# epub文档阅读器

**Repository Path**: Practice-ren/epub-reader

## Basic Information

- **Project Name**: epub文档阅读器
- **Description**: 基于Vue创建的epub文档阅读器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2026-07-28
- **Last Updated**: 2026-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

这是一个基于 **Vue.js 2** 的 **EPUB 电子书阅读器** Web 应用，技术栈如下。

## 项目概述

项目名 `ebook`，是一个在浏览器中阅读 EPUB 电子书的单页应用（SPA）。核心流程是：用 **epubjs** 解析 EPUB 文件，渲染到页面，并提供翻页、目录、进度、字体、主题等功能。

---

## 编程语言

| 语言 | 用途 |
|------|------|
| **JavaScript (ES6+)** | 业务逻辑、路由、EPUB 解析与渲染 |
| **HTML** | 入口页面 `index.html` |
| **CSS / SCSS** | 样式；组件内用 `lang="scss"`，全局用 Sass |
| **Vue 单文件组件 (.vue)** | 模板 + 脚本 + 样式组合 |

---

## 核心框架与库

### 前端框架
- **Vue 2.5** — 主框架
- **Vue Router 3** — 路由（`/` → `/ebook`）

### EPUB 阅读
- **epubjs 0.3.71** — 解析 EPUB、渲染内容、主题、目录、进度定位

```32:34:src/Ebook.vue
import Epub from 'epubjs'
const DOWNLOAD_URL ='/static/三国演义.epub'
global.epub = Epub
```

---

## 构建与工程化

基于 **Vue Webpack 模板**（webpack 3 时代）：

| 工具 | 作用 |
|------|------|
| **Webpack 3** | 打包、开发服务器 |
| **Babel 6** | ES6+ 转译（`babel-preset-env`、`stage-2`） |
| **vue-loader** | 编译 `.vue` 文件 |
| **ESLint** | 代码检查（含 `eslint-plugin-vue`） |
| **PostCSS + Autoprefixer** | CSS 后处理、浏览器前缀 |
| **node-sass + sass-loader** | 编译 SCSS |
| **UglifyJS** | 生产环境 JS 压缩 |

常用命令：
- `npm run dev` — 开发（webpack-dev-server，默认 `localhost:8080`）
- `npm run build` — 生产构建
- `npm run lint` — ESLint 检查

---

## 样式与 UI

- **SCSS**：`px2rem()` 移动端适配（根字体 = `window.innerWidth / 10`）
- **CSS 动画**：Vue `<transition>`（slide-up、fade、slide-right）
- **Icon 字体**：`icomoon`（`icon.css` + SVG 字体）
- **原生 HTML**：`<input type="range">` 做阅读进度条

---

## 项目结构

```
epub-reader/
├── src/
│   ├── main.js              # 入口
│   ├── App.vue              # 根组件 + rem 适配
│   ├── Ebook.vue            # 阅读器主逻辑
│   ├── router/index.js      # 路由
│   ├── components/          # TitleBar、MenuBar、Content 等
│   └── assets/styles/       # global.scss、reset.css、icon.css
├── build/                   # Webpack 配置
├── config/                  # 开发/生产环境配置
├── static/                  # 静态资源（如 .epub 文件）
└── index.html               # HTML 入口
```

---

## 功能实现方式

| 功能 | 实现 |
|------|------|
| 翻页 | 左/中/右点击区域 + `rendition.prev()` / `next()` |
| 字体大小 | `themes.fontSize()` |
| 主题（默认/护眼/夜间/金色） | `themes.register()` + `themes.select()` |
| 目录 | `book.navigation.toc` |
| 阅读进度 | `book.locations.generate()` + CFI 百分比 |

---

## 运行环境

- **Node.js** ≥ 6.0
- **npm** ≥ 3.0
- 目标浏览器：`> 1%`, `last 2 versions`, 不支持 IE8 及以下

---

## 总结

这是一个典型的 **Vue 2 + Webpack + epubjs** 前端项目，没有后端：EPUB 放在 `static/`，由浏览器直接加载。技术选型偏经典（Vue 2、Webpack 3、Babel 6），适合学习 EPUB 在 Web 端的渲染与阅读器 UI 实现。

如果你想深入某一块（例如 epubjs 渲染流程、rem 适配或某个组件），可以说一下具体方向。