温馨连接提示: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压缩文件,在开始做之前,得先想我们要做成什么样子?都有什么功能?我们是用什么样的实现方式?
这里我们一起发挥思维:
请求问题:应该是通过接口请求需要预览的zip压缩文件,但是我们做的例子是本地的,那就地本地请求(当然可以API网上请求啦)。
读取问题:请求到zip压缩文件然后该怎么办?因为压缩文件比较大,所以我们不能直接在网页上进行解析,不然网页就会崩溃,严重的电脑都会死机,这样的话我们得有一种方式把它暂时存储起来,然后进行需要的信息的分批渲染,大伙一定会问用什么把它暂时存起来?分批渲染怎么弄?这里我使用的存储方式是
inde