第二阶段 vue项目实战-第一集：快速入门web阅读器开发-CSDN博客

课程流程：阅读器原理学习——搭建Vue-cli环境——编写阅读器源码——总结知识点

需要的知识点：

Vue基本语法
CSS3和Sass的基本语法
静态资源服务器（Nginx）的搭建方法

第一章：阅读器简介及开发准备工作

注：text和pdf大家都很熟悉，epub是当前国际流行的一种电子书格式，mobi格式是亚马逊电子书格式。

开发准备工作

引入icon图标（在iconmoon中生成）

离线生成模板（提前下载好模板）vuejs-template/webpack

vue init
//使用offline（离线模式）
//将刚才下好的模板复制到项目目录下
vue init webpack --offline ebook-demo
//执行命令后，系统自动到目录下寻找模板
npm run dev 
//启动项目复制代码

下载依赖

npm install node-sass sass-loder --save-dev
//--save-dev表示把该依赖放置到生产环境使用devDependencies中，上线时不采用
npm install epubjs --save
//下载阅读引擎，--save会把该依赖放置到线上环境使用dependencies
复制代码

引入icon图标

把下载的icon文件夹中的font目录和style.css文件放到src的asstes下的style目录下（新建一个），并把style.css文件改为icon.css

全局引入：在main.js中import '@/assets/styles/icon.css'@为src目录

基础样式配置

viewport配置：放大缩小问题

viewport是用来设置用户在手机里的可视区域，vue-cli中width=device-width为设备宽度，initial-scale=1.0为指定默认缩放为1：1，但会导致一个问题就是误触导致的放大缩小。

我们通过在index.html中设置maximum和minimum来限定用户对屏幕的缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

rem配置：在手机上的显示问题

为什么要使用rem

之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。

例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。

但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。

Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使

rem的值相对于根元素font-size的倍数

1rem = 根元素font-size
2rem = 根元素font-size*2

我们通过DOMContentLoaded事件动态的设置根元素

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

//在APP.vue中
document.addEventListener('DOMContentLoaded', () => {
	const html = document.querySelector('html')
	// 为fontsize做一个上限,判断
	let fontSize = window.innerWidth / 10
	fontSize = fontSize > 50 ? 50 :fontSize
	html.style.fontSize = fontSize / 10 + 'px'
})复制代码

引入reset.scss和global.scss

reset.scss的目的是清除不同浏览器默认的样式不一致。

global.scss规定了整个站点的公共样式，公共方法和公共参数，实现PX2rem方法将px转换为rem

@import 'reset';

// 1rem = fontSize px
// 1px = (1 / fontSize)rem
$fontSize: 37.5;
@function px2rem($px) {
  @return ($px / $fontSize) + rem;
}

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

.icon {
  color: #333;
  font-size: px2rem(20);
}

.slide-down-enter, .slide-down-leave-to {
  transform: translate3d(0, -100%, 0)
}
.slide-down-enter-to, .slide-down-leave, .slide-up-enter-to, 
.slide-up-leave {
  transform: translate3d(0, 0, 0)
}
.slide-down-enter-active, .slide-down-leave-active, 
.slide-up-enter-active, .slide-up-leave-active, .fade-enter-active, 
.fade-leave-active, .slide-right-enter-active, .slide-right-leave-active
 {
  transition: all .3s linear;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translate3d(0, px2rem(108), 0)
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}
.slide-right-enter, .slide-right-leave-to {
  transform: translate3d(-100%, 0, 0);
}复制代码

然后在全局中引入它import '@/assets/styles/global.scss'