在VUE中使用bookreader 插件

个人博客迁移到biubu.cn,此处停更.请移步。

• 项目需求,需要在 vue 中使用一个叫 bookreader 的东西,这玩意没有相应的 package ,也没有相应的封装,不能 说直接使用 npm install XXXX 来使用,这玩意是基于 jquery 开发的,因此,要在 vue 中使用,就必须将相应的静态文件都给引入到项目下面;
• 1 首先看看需要的文件:
  • 1. 1 官网链接
  • 1. 2 代码地址
• 2 准备工作 :
  • 2. 1 用vue-cli 生成项目,并安装相应的依赖.
  • 2. 2 通过上面的地址下载代码;
  • 2. 3 将 BookReader 文件夹复制到 vue 项目的 static 文件夹下,
  • 2. 4 在 vue 项目中的 index.html 的 head 标签中用 script 标签引入 BookReader 的 js 文件, 用link 标签映入 BookReader 的 css 文件,然后,在 body 结束标签之前引入BookReader.js 这个文件,最终,,index.html 是这样的.

• 3 在组件中使用,通过 vue-cli 生成的项目中是不是有一个 HelloWorld.vue 的文件,把这个文件中的 内容 删除了,把下面的粘贴进去, 运行 npm run dev,是不是可以了效果出来了?

• 注意点 : 看看 options 配置项中的 data 数组: 以 data[0] 为例 : 两个对象,分别代表翻页中的每一页;
  其他配置项,等我研究一下在写.