二（2-1、2-2）web阅读器简介及开发准备工作

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

• 知识点解析

• 阅读器工作原理简介
• 开发流程
  
• epub电子书：
  本质上是一个zip文件，可以通过 在cmd中 用unzip进行解压

开发准备工作（生成字体图标）

在icomoon中生成图标

• 点击首页 icomoon App
• 新建一个图标集合
• 在阿里图库中找到自己想要的图标保存在一个文件夹中

点击new empty set

• 修改名称
• 点击import Icons
• 导入刚才的文件夹中图标
• 点击generat font 生成自己的图标
• dowmload下载图标
• 将自己的图标导入项目中

3.搭建脚手架

//用vue init搭建脚手架
vue init webpack my-project

用 --offline离线模式搭建脚手架

• 首先去官网下载脚手架模板
• 解压文件
• 将脚手架模板的文件复制到 vue-templates下

C:\Users\linqiaoxin>cd .vue-templates/
C:\Users\linqiaoxin\.vue-templates>xcopy "C:\Users\linqiaoxin\Downloads\webpack-develop" "webpack"

-建立项目

vue init webpack --offline obook-demo

npm run dev
//运行项目

• 在 config/index.js 中修改host的localhost为0.0.0.0

 host: '0.0.0.0', // can be overwritten by process.env.HOST

• 将电子书复制到 static目录下
• 在站点中下载这本书 查看静态资源服务器是否生效

http://172.20.10.6:8080/#/static/2018_Book_AgileProcessesInSoftwareEngine.epub

• 下载sass

//下载对css的支持
npm install node-sass sass-loader --save-dev
//sass是css的一种扩展语言
//save-dev 会将配置文件写入package.json 当中 写到devDependencies中

"devDependencies": {
...
  },

• 下载阅读器引擎

npm install epubjs --save
//--save 会存到package.json的"dependencies"上

"dependencies": {
    "epubjs": "^0.3.85",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

• 将图标目录拷贝到工作区当中
• 在src/assets/下新建styles文件夹，assets主要存放静态资源
• 将自己图标的fonts文件夹、style.css 拷到styles目录下面
• 拷贝完毕将icon文件夹移出工作区
• 将style.css改成icon.css

• 在main.js中进行引用

import '@/assets/styles/icon.css'