使用git bash here，执行代码
git clone https://github.com/GauharChan/reader-books.git在下载好的文件夹中，重新打开git bash here，安装依赖，如果没有下载yarn，请看下文
yarn下载好依赖之后，执行，等待自动打开浏览器
yarn serve打包项目
yarn buildvue create reader-booksnpm i yarn -g首先选好自己需要的图标，然后登陆icomoon，点击右上角icoMoon App；点击左上角，选择new empty set, 新建一个清单，然后在import引入自己下载好的图标，接着点右下角的generate font，点download下载。
将fonts文件夹和style.css拷贝到assets文件夹下，然后在main.js中引入style.css
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/styles/icon.css'
import '@/assets/styles/global.scss' // 公共样式
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')DOMContentLoaded事件，在dom渲染完成的时候执行
document.addEventListener('DOMContentLoaded',function(){
let html = document.querySelector('html')
let fontSize = window.innerWidth / 12
fontSize = fontSize > 50 ? '50px' : fontSize + 'px' // 最大50px
html.style.fontSize = fontSize
})定义的@mixin center方法
@mixin center{
display: flex;
justify-content: center;
align-items: center;
}在.vue文件中的css中使用@include center引用
使用@import引入文件
@import 'reset'@function px2rem($px) {
@return ($px / $fontSize)+rem;
}$fontSize : 16;使用&符号表示同级选择器
.box{
&:last-child
}使用transition标签包裹需要设置过渡的title-top元素，默认的过渡类名enter,enter-to等，是和title-top同级的，写css的时候，需要使用&符号表示同级
下面带中，transition标签的name属性是slide
.title-top {
// 过渡
&.slide-enter,&.slide-leave-to{ // 类名前需要添加&
transform: translate(0,-100%);
}
&.slide-enter-to, &.slide-leave{
transform: translate(0,0);
}
&.slide-enter-active, &.slide-leave-active{
transition: transform .3s;
}
}通过background-size来控制两种背景的颜色。background-size需要动态设置
background: linear-gradient(#999,#999) no-repeat #ddd;
background-size: 0% 100%;
通过伪类选择器::-webkit-slider-thumb选择到中间的小滑块
input{
-webkit-appearance: none; /*去除默认样式*/
width: 100%;
height: px2rem(2);
background: linear-gradient(#999,#999) no-repeat #ddd;
background-size: 0% 100%;
&:focus{
outline: none;
}
&::-webkit-slider-thumb{ 设置滑块的样式
-webkit-appearance: none;
width: px2rem(9);
height: px2rem(9);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
box-shadow: 0 px2rem(2) px2rem(4) rgba(0, 0, 0, 0.25);
}
}生成Book对象
let book = new Epub(url);通过Book对象的renderTo方法生成rendtion对象
this.rendtion = this.book.renderTo("book", {
// book 是dom元素的id
width: window.innerWidth,
height: window.innerHeight
});rendtion对象的display方法渲染电子书，返回的是promise对象
this.rendtion.display()获取themes对象
this.theme = this.rendtion.themes;注册主题register('主题名称' , '主题样式') 必须先注册所有的主题后，才可以设置
this.theme.register(item.name, item.style);设置主题select('主题名称')
this.theme.select(this.themeList[index].name);改变字体大小
this.theme.fontSize(fontSize + "px")获取书本的导航，navigation对象的toc数组，href是书本导航的锚点，label是导航标题
this.book.navigation导航跳转
href：this.book.navigation.toc[0].href
this.rendtion.display(href)获取location对象，书本的页面位置
this.locations = this.book.locations;
this.book.locations.generate() // 初始化获取书本位置设置百分比的进度，percentage：一个百分比的数字
this.locations.cfiFromPercentage(percentage)上一页
this.rendtion.prev();下一页
this.rendtion.next();