VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)

温馨连接提示：vue入门之路篇系列教程：
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

如果说上面的温馨连接提示，带你们进入了VUE的大门，那么，今天我们就玩一个绝活，在网页端使用VUE框架配合indexDB数据库来实现zip文件的在线预览，这个功能对于VUE的要求不高，但是对于你前端的知识的考量却是上等甚至是顶尖级别的逻辑思维。所以我得手把手的教会你们，请做好被虐的准备。

温馨连接提示：vue中级之路篇系列教程：
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(一)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(二)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(三)

前言

这里我准备了几个东西，需要大家在开始前进行相关的操作：

首先我的项目是存放在github上的，各位要是学习的话请安装git这个版本控制器，如果不知道github是干什么的怎么用的，请参考完我的博客：git+github的使用-最简单的入门教程，再来练这个项目，因为git是每个开发者必须会的，如果你不懂git，那么你永远都不知道团队开发为何物。我的github的项目是：VUE在线预览zip压缩文件。或者你使用我的百度云盘：VUE在线预览zip压缩文件，但是我不保证我会实时更新百度云盘所以请尽量使用git。

创建一个文件夹，然后打开你的git，执行

git clone https://github.com/nongshuqiner/VUEOnlineZIP.git

然后执行npm install，这个有些慢，要耐心等待。

如果特别慢，ctrl + c暂停它，使用上淘宝镜像安装

npm install -g cnpm --registry=http://registry.npm.taobao.org

完后继续执行npm install，安装完成以后，不能执行npm run dev，因为会报错(当然你可以先试试执行npm run dev，如果没有报错则无视下面)，报错了是因为没有安装上node-sass，所以先执行：

cnpm install node-sass -D

等安装上node-sass，再执行npm run dev

如果跑起来了没有报错，则证明初始项目的构建已经完成了。

项目简单描述

我们需要实现VUE在线预览zip压缩文件，在开始做之前，得先想我们要做成什么样子？都有什么功能？我们是用什么样的实现方式？

这里我们一起发挥思维：

1. 请求问题：应该是通过接口请求需要预览的zip压缩文件，但是我们做的例子是本地的，那就地本地请求（当然可以API网上请求啦）。

2. 读取问题：请求到zip压缩文件然后该怎么办？因为压缩文件比较大，所以我们不能直接在网页上进行解析，不然网页就会崩溃，严重的电脑都会死机，这样的话我们得有一种方式把它暂时存储起来，然后进行需要的信息的分批渲染，大伙一定会问用什么把它暂时存起来？分批渲染怎么弄？这里我使用的存储方式是indexDB（一个html5出现的本地存储方式）和localStorage，大伙如果不明白这是什么东西该怎么用，可以去看看我的博客：web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB，不然下面使用到它你们会措手不及的。关于分批渲染因为是压缩文件在线预览，所以我们的项目要做的肯定是有目录的，既然有目录，我在渲染时只需要先把目录信息读出来，予以展示，而里面的具体的比如图片啊，表格啊，