通过vue+sass构建一个解析epub格式的电子书web阅读器
图标处理：iconmoon
src为代码文件夹；分为book主页，MenuBar菜单栏
TItleBar标题栏，index Vue的构建和入口文件，app。vue为测试文件，没什么用。
dist打包后的输出
asset图标和样式文件夹
static静态资源文件夹
2.样式基本配置：
viewport：
这里直接写在index.js里，防止缩放
rem，px配置：rem，em相对字体大小单位，但em相对于父元素的字体大小，rem相对于根元素的字体，所以带r吧，root。
px相对像素点单位，接着还有reset+global配置，这里可以直接网上找，目的是消除原生css的影响。
3.epub解析工作
引入epub.js（npm install -D epub）
引入epub文件（可在epubw.com下载)
代码引入const DOWNLOAD = "../static/2014_Book_Self-ReportedPopulationHealthA.epub";千万不可require或者import，否则会出现打包问题，webpack无法loader解析epub文件。
epub文件 epub.js渲染成book（this.book = new Epub(DOWNLOAD);）
设置样式
Book还有一个location属性，控制进度条this.book.locations。但epub文件刚加载，有延时，因此需要一个ready方法，调用异步promise以确保epub加载完毕。
this.bookAvailable作为epub渲染完成的标志。
this.navigation提供目录和跳转
翻页功能：
综上就可以实现翻页，进度控制，主题设置，字体设置，目录。
网友评论