推薦我的vue教程：VUE系列教程目錄
如果說上面的溫馨連接提示，帶你們進(jìn)入了VUE的大門，那么，今天我們就玩一個絕活，在網(wǎng)頁端使用VUE框架配合indexDB數(shù)據(jù)庫來實(shí)現(xiàn)zip文件的在線預(yù)覽，這個功能對于VUE的要求不高，但是對于你前端的知識的考量卻是上等甚至是頂尖級別的邏輯思維。所以我得手把手的教會你們，請做好被虐的準(zhǔn)備。
溫馨連接提示：vue中級之路篇系列教程：
VUE系列---VUE+indexDB+JSZip+在線預(yù)覽zip壓縮文件(一)
VUE系列---VUE+indexDB+JSZip+在線預(yù)覽zip壓縮文件(二)
VUE系列---VUE+indexDB+JSZip+在線預(yù)覽zip壓縮文件(三)
前言
這里我準(zhǔn)備了幾個東西，需要大家在開始前進(jìn)行相關(guān)的操作：
首先我的項(xiàng)目是存放在github上的，各位要是學(xué)習(xí)的話請安裝git這個版本控制器，如果不知道github是干什么的怎么用的，請參考完我的博客：git+github的使用-最簡單的入門教程，再來練這個項(xiàng)目，因?yàn)間it是每個開發(fā)者必須會的，如果你不懂git，那么你永遠(yuǎn)都不知道團(tuán)隊開發(fā)為何物。我的github的項(xiàng)目是：VUE在線預(yù)覽zip壓縮文件。或者你使用我的百度云盤：VUE在線預(yù)覽zip壓縮文件，但是我不保證我會實(shí)時更新百度云盤所以請盡量使用git。
創(chuàng)建一個文件夾，然后打開你的git，執(zhí)行
git clone https://github.com/nongshuqiner/VUEOnlineZIP.git
然后執(zhí)行npm install，這個有些慢，要耐心等待。
如果特別慢，ctrl + c暫停它，使用上淘寶鏡像安裝
npm install -g cnpm --registry=http://registry.npm.taobao.org
完后繼續(xù)執(zhí)行npm install，安裝完成以后，不能執(zhí)行npm run dev，因?yàn)闀箦e(當(dāng)然你可以先試試執(zhí)行npm run dev，如果沒有報錯則無視下面)，報錯了是因?yàn)闆]有安裝上node-sass，所以先執(zhí)行：
cnpm install node-sass -D
等安裝上node-sass，再執(zhí)行npm run dev
如果跑起來了沒有報錯，則證明初始項(xiàng)目的構(gòu)建已經(jīng)完成了。
項(xiàng)目簡單描述
我們需要實(shí)現(xiàn)VUE在線預(yù)覽zip壓縮文件，在開始做之前，得先想我們要做成什么樣子？都有什么功能？我們是用什么樣的實(shí)現(xiàn)方式？
這里我們一起發(fā)揮思維：
請求問題：應(yīng)該是通過接口請求需要預(yù)覽的zip壓縮文件，但是我們做的例子是本地的，那就地本地請求（當(dāng)然可以API網(wǎng)上請求啦）。
讀取問題：請求到zip壓縮文件然后該怎么辦？因?yàn)閴嚎s文件比較大，所以我們不能直接在網(wǎng)頁上進(jìn)行解析，不然網(wǎng)頁就會崩潰，嚴(yán)重的電腦都會死機(jī)，這樣的話我們得有一種方式把它暫時存儲起來，然后進(jìn)行需要的信息的分批渲染，大伙一定會問用什么把它暫時存起來？分批渲染怎么弄？這里我使用的存儲方式是
indexDB（一個html5出現(xiàn)的本地存儲方式）和localStorage，大伙如果不明白這是什么東西該怎么用，可以去看看我的博客：web前端-在迷惘中的探索HTML5（二）本地存儲之IndexDB，不然下面使用到它你們會措手不及的。關(guān)于分批渲染因?yàn)槭菈嚎s文件在線預(yù)覽，所以我們的項(xiàng)目要做的肯定是有目錄的，既然有目錄，我在渲染時只需要先把目錄信息讀出來，予以展示，而里面的具體的比如圖片啊，表格啊，我們在具體需要展示的時候再進(jìn)行讀取。目錄構(gòu)建問題：說到這大家一定會問，那目錄怎么構(gòu)建呢？這里我給大家附上項(xiàng)目完成后的截圖大家先看看我們的需求，然后后面我再具體的需要應(yīng)用時進(jìn)行說明，如圖：
看完項(xiàng)目完成后的截圖，大伙肯定興趣倍增，躍躍欲試，那么就開始吧
項(xiàng)目的準(zhǔn)備工作
安裝我們需要的包
餓了么組件
我們需要使用到eleme餓了么組件：餓了么組件
進(jìn)入我放置的連接我們就進(jìn)入到餓了么組件的官網(wǎng)，如圖：
我們對其進(jìn)行安裝：
npm i element-ui -S
jszip壓縮包工具
安裝完eleme餓了么組件包后，我們還需要壓縮包分析工具：jszip。因?yàn)檫@個網(wǎng)站是英文的我也看不懂，所以英語好的去嘗試嘗試看看。
后面我們會對它進(jìn)行詳解，這里我們只需要安裝它的包，進(jìn)入淘寶npm鏡像，然后在里面搜jszip，然后出來一堆，如圖：
我們進(jìn)入左邊第一個，進(jìn)去后看看，如果你看到的包含如下信息：
然后就通過它提示的命令進(jìn)行安裝：
cnpm install jszip
store一種本地localStorage管理包
我們即使用localStorage，也使用store.js來進(jìn)行本地存儲。
cnpm install store -D
到此我們需要的包就安裝完成了
構(gòu)建我們的目錄，初始化我們的頁面
首先把我們的目錄構(gòu)建成下面圖片的樣子：
然后修改config/routes.js，把它變?yōu)椋?/p>
// 子路由索引
import childrouter from '../frame/childrouter.vue'
// zip壓縮下載預(yù)覽
import property from '../page/property/index.vue'
// zip壓縮下載預(yù)覽
import uploadreview from '../page/property/upload_review.vue'
import uploadreviewdetails from '../page/property/upload_review_details.vue'
import uploadreviewfile from '../page/property/upload_review_file.vue'
// 配置路由
export default [
{
path: '/',
component: property
},
{ // zip壓縮下載預(yù)覽
path: '/property/',
component: childrouter,
children: [
{path: 'uploadreview', component: uploadreview}, // zip壓縮下載預(yù)覽
{path: 'uploadreviewdetails', component: uploadreviewdetails}, // zip壓縮下載預(yù)覽深入
{path: 'uploadreviewfile', component: uploadreviewfile} // zip壓縮下載預(yù)覽文件
]
}
]
開始初始化我們的頁面，修改App.vue
<template>
<div id="app">
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view class="view" keep-alive transition transition-mode="out-in"></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
@import "./style/style";
</style>
再修改frame/childrouter.vue，把它變?yōu)椋?/p>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
修改page/property/index.vue，把它變?yōu)椋?/p>
<template>
<div>
<router-link class="more_icon" :to="'property/uploadreview'">
<el-button type="primary">在線預(yù)覽</el-button>
</router-link>
</div>
</template>
<script>
export default {
}
</script>
/page/property/upload_review.vue文件變?yōu)?/p>
<template>
<div>
upload_review
</div>
</template>
<script>
export default {
}
</script>
/page/property/upload_review_details.vue文件變?yōu)?/p>
<template>
<div>
upload_review_details
</div>
</template>
<script>
export default {
}
</script>
/page/property/upload_review_file.vue文件變?yōu)?/p>
<template>
<div>
upload_review_file
</div>
</template>
<script>
export default {
}
</script>
到了這里初始化我們的頁面，構(gòu)建我們的項(xiàng)目就完成了，我們打開頁面，打開控制臺，發(fā)現(xiàn)竟然有個錯誤，如圖：
這是因?yàn)槲覀儧]有引入餓了么組件，于是打開mian.js，在里面添加上這句話：
// 引用ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
既然餓了么組件得引用，那么store本地存儲也得引入
// 引入本地存儲
import store from 'store'
Vue.prototype.$store = store
mian.js就變成了這樣：
// 1.引用 vue 沒什么要說的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成，還得使用
Vue.use(VueRouter)
// 2.入口文件為 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './api/api'
// 6.將API方法綁定到全局
Vue.prototype.$api = api
// 使用配置文件規(guī)則
const router = new VueRouter({
routes
})
// 引入本地存儲
import store from 'store'
Vue.prototype.$store = store
// 引用ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
router,
el: '#app',
render: (h) => h(App)
})
你的頁面上的餓了么組件的效果就會顯示出來，如圖：
至此項(xiàng)目的準(zhǔn)備工作也就完成了，接下來就是挽起胳膊干大活了
項(xiàng)目實(shí)戰(zhàn)前言
由于我們要用到：JSZip，以及store.js，所以希望各位小伙伴在項(xiàng)目開始前好好的看看這兩個的使用，然后為我們的實(shí)戰(zhàn)做好準(zhǔn)備。
如果有看不懂的地方可以在評論區(qū)里@我，本來打算一次性的獻(xiàn)上，但是考慮到有些懶惰的人拿我的東西招搖撞騙，于是決定暫時推遲一下，同時大家也想想如果是你們，你們會怎樣做，先去踩踩坑，不踩坑的程序員不是好程序員，等你們踩坑了，我再告訴你們究竟怎么做，這樣才能鍛煉你們自己的思維。
重要說明：就在這兩天我會把實(shí)戰(zhàn)慢慢的教授給大家，請耐心等待。
提示：在最近幾天我會慢慢附上VUE系列教程的其他后續(xù)篇幅，后面還有精彩敬請期待，請大家關(guān)注我的專題：web前端。如有意見可以進(jìn)行評論，每一條評論我都會認(rèn)真對待。
