1-1 阅读器的工作原理及开发流程

1. 课程所涉及知识点

image.png

2. 阅读器工作原理简介

image.png

3. ePub和mobi简介

image.png

4. 开发流程简介

image.png

1-2 开发准备工作

1. 登录https://icomoon.io/

2. 下载字体图标

3. 搭建vue脚手架

image.png

4. 使用vue命令创建项目，项目名称为ebook-demo

  1. //创建项目
  2. vue init webpack ebook-demo
  4. //进入项目目录
  5. cd ebook-demo
  7. //下载项目所需要的依赖
  8. cnpm install
  10. //启动项目
  11. npm run dev

5. 使用ip地址打开项目

5.1 查看电脑ip地址，可以打开命令行工具，输入ipconfig来进行查看
5.2 在config目录下的index.js文件中进行配置，将host的值修改为0.0.0.0
image.png

6. 下载项目所需要的依赖包

  1. cnpm install node-sass sass-loader --save-dev

7. 下载epubjs引擎包

  1. cnpm install epubjs --save

8. 将图标集成到项目中

在src目录下的assets目录内创建styles目录，把下载好的fonts目录和style.css文件方法styles目录内，为了能更好的去识别每个文件分别是什么意思，我们在这里将style.css文件名称改为icon.css，在main.js文件内导入icon.css
image.png

1-3 viewport配置

image.png
用手机打开项目，我们会发现页面会进行放大缩小，所以接下来我们要viewport进行配置
image.png

1-4 rem配置

image.png
接下来，我们在开发项目前要对项目的字体进行适配，我们需要页面的字体大小随着屏幕的大小改变能够进行自适应。
在项目中找到App.vue组件，在App.vue组件中通过监听页面DOM加载事件，等页面内容加载完毕时，获取html根标签，设置html标签字体的大小等于浏览器的宽度/10，具体代码如下：
image.png
这里有一个问题，就是当我们打开浏览器的时候，我们会发现页面的字体非常大，所以在这块我们会进行一个判断处理，如果当页面的字体大于50的时候，就设置页面的字体为50，如果页面的字体不大于50，就设置页面的字体为浏览器的宽度/10，具体代码如下：
image.png

1-5 reset+global.css

image.png

  1. 访问https://meyerweb.com/eric/tools/css/reset/index.html,拷贝css样式
  2. 回到项目中，在assets目录下的styles文件夹内创建reset.css文件，将拷贝的css样式粘贴到reset.css文件内
  3. 对根元素和body元素的宽度在进行设置，具体代码如下：

image.png

  1. 在styles文件夹内创建global.scss文件，在该文件内先引入reset.css文件
  2. 在global.scss文件内在创建将px转化为rem的方法，具体代码如下：

image.png

  1. 在main.js中在引入global.scss文件

image.png