3.2

  1. 配置vscode生成模板

文件->首选项->用户片段->vue.json

{
    "Print to console": {
      "prefix": "vue",
      "body": [
        "<!-- $0 -->",
        "<template>",
        "  <div></div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  data () {",
        "    return {",
        "    };",
        "  },",
        "",
        "  components: {},",
        "",
        "  computed: {},",
        "",
        "  mounted: {},",
        "",
        "  methods: {}",
        "}",
        "",
        "</script>",
        "<style lang='scss' scoped>",
        "</style>"
    ],
      "description": "Log output to console"
    }
  }

  1. 配置路由
    路由重定向 redirect

redirect

  1. 渲染电子书
  2. 关闭eslint报错

container
package
metadata
manifest
ncxpath
spine
read-wrapper


<template>
<div class="ebook">
<div class="read-wrapper">
<div id="read"></div>
</div>
</div>
</template>

<script>
import Epub from "epubjs";
const DOWNLOAD_URL = "/static/2018_Book_AgileProcessesInSoftwareEngine.epub";
export default {
data() {
return {
book: {},
rendition: {},
};
},

components: {},

computed: {},

mounted() {
this.showEpub();
},

methods: {
showEpub() {
// 生成book对象
this.book = new Epub(DOWNLOAD_URL);

  // 生成rendition 对象
  this.rendition = this.book.renderTo("read", {
    width: window.innerWidth,
    height: window.innerHeight,
  });

  // 渲染节点
  this.rendition.display();
},

},
};
</script>
<style lang="scss" scoped></style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容