redaer 阅读器

Vue.js + epub.js 实现简单的 epub 电子书阅读器 线上体验地址: http://8.140.157.218:7788/#/ebook

找了好久的Bug

打包后浏览器一篇空白，百度、bing无数，但是都没有解决问题，最终终于找到答案了。。。。

原来是路由的锅，纪念我逝去的几个小时时光.... 🕯️

sass-loader 相关

该项目需要安装 Sass

npm install sass-loader node-sass --save

SCSS和Sass

这个帖子不错，通俗易懂。还特别说明了 SCSS 和 Sass 的写法。

简单来说是一种东西。Sass 是一种 CSS 预处理器，由Ruby程序员开发。因此带有很强的 Ruby 风味，有些语法甚至显得很奇怪。为了更加贴合CSS，发布了后来的 SCSS。在实际开发中，我们一般使用 SCSS。文件后缀自然写成.scss就OK啦！

本demo用到的基本 Sass 语法有:

声明变量: 
$fontSize: 37.5;     //tips: 在CSS中用:root{} var(--xxx) 也可以声明变量

声明混入:
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用混入
@include center;

踩坑

Syntax Error: TypeError: this.getOptions is not a function https://blog.csdn.net/qq_38157825/article/details/114318772

原因是 Sass-loader 版本太高，按照博客中的版本来安装就不会出错

epubjs

epub 本质是就是类似于HTML语言的压缩包，与pdf格式不同，epub会自适应。

用命令解压epub可以得到具体的文件

渲染主题，定位，目录功能

不要用最新版本epubjs，否则问题真的很多 npm install epubjs@0.3.71

项目配置

在vue.config.js中配置别名即可

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views'
      }
    }
  }
}

##Others

适配移动端

document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})

第一次在项目中用到 Sass，本来很抗拒的，其实也不难。

发现自己的 CSS 还是很薄弱

换肤

改变字号

改变进度

目录

鸣谢

本项目原创为慕课网Sam老师

https://github.com/sam9831/free-ebook-demo