说明.txt

1、阅读器工作原理简介
各种格式(txt、pdf、epub、mobi...)的电子书  ==>  解析电子书(书名、作者、目录、封面、章节...)  ==>  
(通过阅读器引擎)  ==>  渲染  ==>  功能(字号、背景色、目录、书签、笔记...)

注
epub：全称是Electronic Publication，是一种电子出版物
mobi：是Amazon Kindle的电子书格式

2、生成字体图标
步骤一：进入网址https://icomoon.io/app/#/select
然后跟着视频点击左上角新建一个图标集合(new empty set),
接着点击图标集合的properties，进入里面再修改(Edit Metadata)集合信息
步骤二：点击图标集合的Import to set导入svg文件，之后再选择全部(select all)
步骤三：点击右下角的generate font，之后再点击download

3、创建一个vue-cli项目
由于我之前在本地中全局安装了webpack和vue-cli，因此初始化该项目我只要这么做即可

接着我们把这个项目拖进VScode编辑中，然后进入终端，运行npm run dev就将项目跑起来了

在vscode这个编辑中我们能够打开两个终端，这样是十分方便开发的。比如在打开项目服务器的同时也能够
在另一个终端查看当前的IP地址

4、通过IP地址访问项目
首先在终端查看到本地IP，接着在config文件夹中修改index.js文件的host为0.0.0.0，那么我们就能在浏览器通过这种方式访问了
http://192.168.0.103:8080/#/

5、正式开发项目
- 将电子书复制到static文件夹中
- 下载sass依赖包npm install node-sass sass-loader --save-dev(这个可能需要管理员身份)
- 下载阅读引擎npm install epubjs --save
- 将字体图标复制进来，记得css文件中的相关路径需要更改(导入项目中文件包括一个css文件以及一个fonts文件夹，使用方法是在某个元素上添加定义好的类名)

6、rem配置
rem是CSS3新增的一个相对长度单位，rem的值相当于根元素font-size值的倍数，比如
1rem = 根元素font-size
2rem = 根元素font-size * 2

DOMContentLoaded事件动态设置根元素font-size
html.style.fontSize = window.innerWidth / 10 + 'px'

举个栗子，在APP.vue中做如下设置
<script>
export default {
  name: 'App'
}
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})
</script>

注：当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。


7、做一个px转rem的方法
@import 'reset';
// 1rem = fontSize px
// 1px = (1/fontSize)rem
$fonSize: 37.5;
@function px2rem($px) {
  @return ($px / $fonSize) + rem;
}
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}


8、epubjs的核心工作原理解析
epub格式的电子书 ==> Book(通过epub.js实例化了一个Book对象)
Book ==> Rendition(通过renderTo方法生成一个Rendition对象负责电子书的渲染) ==> Theme(负责电子书的样式和主题)
Book ==> Location(负责电子书位置定位)
Book ==> Navigation(负责电子书的目录以及定位)


9、消除eslint语法规则
方式一：在组件内部定义，将某个出现警告的规则取消
<script>
/* eslint-disable space-before-function-paren */
export default {
  name: 'Ebook',
  data () {
    return {}
  },
}
</script>

方法二：在.eslintrc.js文件中将该规则关闭掉(这个需要重新npm run dev才能生效)
rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': 'off'
}

10、关于flex属性
这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写，默认值为“0 1 auto”。
- flex-grow：它的作用是让子元素以几倍宽度拉伸，属性值的类型为number
- flex-shrink：它的作用就是让子元素在页面缩小时宽度如何变化，属性值为number，默认值是1。
当值为2时，说明页面缩小时，该子元素将相对缩小两倍；当值为0时，页面缩小时，该子元素宽度不会发生改变。
- flex-basis：设置弹性盒元素的初始长度



11、一种调用子组件的方法
通过ref的方式进行调用
```
<menu-bar :ifTitleAndMenuShow="ifTitleAndMenuShow" ref="menuBar"></menu-bar>
// 菜单栏和底部导航栏的切换
    toggleTitleAndMenu() {
      this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
      if(!this.ifTitleAndMenuShow) {
        this.$refs.menuBar.hideSetting()
      }
    }
```