web阅读器的开发过程与体会（VUE+epubjs）

.1.以前用vuec-li2搭建号的脚手架的时候，静态资源直接放在static ，可以通过浏览器输入ulr： /static/****
直接访问资源，但是用vue-cli3的时候，发现已经没有static了，那么放在那里呢？？答案就是直接放在public里，访问方式和放在static里相同
直接输入url： /****

1.电子书的解析和渲染

主要步骤

1. 生成book
2. 生成rendition，通过renderTo方法
3. 通过rendition.display渲染电子书

实际应用代码

<template>
    <div class="ebook">
        <div class="readWrapper">
            <div id="read"></div>
        </div>
    </div>
</template>

<script>
    import Epub from "epubjs";
    const DOWNLOAD_URL = "./2018_Book_AgileProcessesInSoftwareEngine.epub"
    export default {
    
        name: "EBook",
        methods:{
    
            //电子书的解析和渲染
            showEpub(){
    
                //生成book
                this.book = new Epub(DOWNLOAD_URL);
                //生成rendition，通过renderTo方法
                this.rendition = this.book.renderTo('read',{
    
                    width:window.innerWidth,
                    height:window.innerHeight
                })
                //通过rendition.display渲染电子书
                this.rendition.display();
            }
        },
        mounted(){
    
            this.showEpub();
        }
    }
</script>

<style scoped lang="scss">
@import "./../assets/styles/global";
</style>

电子书翻页功能 的实现

步骤

1. 通过rendition.prev()翻到上一页
2. 通过rendition.next（）翻到下一页

实际应用代码：

            prevPage(){
   
                this.rendition.prev();
            },
            nextPage(){
   
                this.rendition.next();
            }

标题栏的实现以及点击显示和消失

<template>
    <transition name="slide-down">
      <div class="title-wrapper" v-show="ifTitleAndMenuShow">
        <div class="left">
          <span class="icon-back icon"></span>
        </div>
        <div class="right">
          <div class="icon-wrapper">
            <span class="icon-cart icon"></span>
          </div>
          <div class="icon-wrapper">
            <sp