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中做如下设置
注:当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。
7、做一个px转rem的方法
@import ‘reset’;
// 1rem = fontSize px
// 1px = (1/fontSize)rem
f
o
n
S
i
z
e
:
37.5
;
@
f
u
n
c
t
i
o
n
p
x
2
r
e
m
(
fonSize: 37.5; @function px2rem(
fonSize:37.5;@functionpx2rem(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语法规则
方式一:在组件内部定义,将某个出现警告的规则取消
方法二:在.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()
}
}