利用vue-cli配合vue-router搭建一個完整的spa流程（一）
前言：
Ⅰ. demo所用vue-router的一些基本操做。vue-router中文文檔，快速瀏覽一遍便可 http://router.vuejs.org/zh-cn/
Ⅱ. 整個demo所用到的技術棧 vueJS(2.0) vue-cli vue-resource es6
Ⅲ. 所需構建工具 nodeJS Gitjavascript
第一步：安裝
OK,正題開始，首先保證nodeJS,Git,webpack已安裝完畢。打開項目文件夾，安裝vue-cli。css
全局安裝 vue-cli$ npm install --global vue-clihtml
建立一個基於webpack的模板vue init webpack my-project
建立過程當中，vue-router爲必須，其餘語法檢測，單元測試等按需求安裝。
vue
建立完成後進入項目文件夾，安裝依賴$ npm installjava
安裝到此結束，運行以下代碼，顯示爲圖片所示，則安裝成功。$ npm run dev
node
第二步：項目文件及運行流程
Ⅰ： 項目文件
打開已經建立好的模板
webpack
如圖所示，只會用到，src,static,index.html這三個文件。首先解釋一下三個文件的做用：
Ⅰ： src 存放路由JS，模板.vue文件，入口JS，以及一個入口.vue文件
Ⅱ： static 存放靜態文件
Ⅲ： index 入口html文件css3
這裏解釋一下xxx.vue文件是什麼，官網叫其爲單文件組件，經過webpack源碼轉換，會所有轉換爲對應的文件。
說白了就是一個包裹，裏邊含有三部分 一部分模板template，一部分樣式style，一部分JSjavascript，他們封裝在一塊兒。
以下圖所示：
es6
Ⅱ： 運行流程
寫起來比較麻煩，作了一張圖，直截了當。
web
第三步：搭建基本路由框架
項目文件明瞭以後，咱們開始搭建一個簡單的SPA路由構架：
Ⅰ： 頁面中有倆個及倆個以上的分類
Ⅱ： 每一個分類中能夠點擊進入到詳情頁面
Ⅲ： URL輸入錯誤後展現404頁面
Ⅳ： 在頁面中刷新，根據URL從新獲取數據，渲染頁面
根據基礎框架建立對應的文件。
文件詳解：
Ⅰ： src中components文件夾裏新建三個xxx.vue文件，
①error.vue 此爲404頁面
②showone.vue 此爲第一個分類頁面
③showtwo.vue 此爲第二個分類頁面
Ⅱ： src中zjapp.vue這是路由入口文件
Ⅲ： static中img爲詳情頁面大圖，thumbnail爲分類頁面縮略圖
Ⅳ： 倆個JSON文件，分別表明分類一和分類二的數據來源
Ⅴ： bootstrap.css 樣式CSS
到此路由的基本框架搭建完成，後面開始代碼的填充。
第四步：主頁面代碼編寫
Ⅰ： index.html
做爲頁面入口文件，先引入Bootstrap.CSS,若是是本地文件放在static文件夾裏。可使用CDN或者npm安裝。
爲了方便後面閱讀將id="app"更改成id="index"。固然，也能夠不更改，main.js中有多個爲app的名字，避免混淆。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>spa-vue-demo</title> <link rel="stylesheet" href="static/bootstrap.min.css" /> </head> <body> <div id="index"></div> <!-- built files will be auto injected --> </body> </html>
Ⅱ： main.js
main.js爲入口JS文件，Vue的實例在這裏書寫。el 掛載在 index.html 中 id="index" 的標籤上。
import Vue from 'vue' import App from './zjapp' import router from './router' Vue.config.productionTip = false new Vue({ el: '#index', router, template: '<App/>', components: { App } })
Vue 開始渲染時，加載 components: { App } 組件替換生成在 id="index" 內的 <App></App> 標籤，那麼{ App }來自哪裏呢？
答案在 import App from './zjapp' 這裏是ES6語法，引入zjapp.vue模塊中暴露出來的接口，後綴能夠不寫。
Vue 實例中的 router 屬性也是ES6中對象的字面量寫法，等於router:router。同理 import router from './router' 這裏引入router。
由於，router中index.js暴露接口時沒有署名，這裏也能夠改一個名字，好比:
import Vue from 'vue' import App from './zjapp' //修更名字同樣能夠。 import changeES6 from './router' Vue.config.productionTip = false new Vue({ el: '#index', //修改在這裏 router:changeES6, template: '<App/>', components: { App } })
最後，可能有人會問 Vue.config.productionTip = false 是作什麼用的，其實這裏是關閉了生產模式即部署到服務器後給出的提示。
Ⅲ： zjapp.vue
這個文件是 Vue 一開始渲染組件時的文件，首先貼出所有代碼，不少，可是會所有講解做用，含義。
<template> <div class="container"> <div class="row"> <div id="index" class="col-xs-12 col-lg-12 col-md-12" style="padding: 0;"> <transition name='animate' appear mode='out-in'> <router-view v-bind:router-data="allData" v-bind:key="change"></router-view> </transition> <transition name='btn' appear mode='out-in'> <div class="app-btn" v-show="allData.mainShow"> <button class="btn btn-success app-btn-back" v-show="back==0?false:true" v-bind:key="back" v-on:click="dosom('back')">上一頁</button> <button class="btn btn-success app-btn-next" v-show="next==0?false:true" v-bind:key="next" v-on:click="dosom('next')">下一頁</button> </div> </transition> <div class="app-loading" v-show="loading"> <img src="../static/loading/loading.gif" style="margin:0 auto;display: block;" alt="loading" /> </div> </div> </div> </div> </template> <script> import router from './router' export default{ data(){ return{ allData:{ showData:null, detailedData:{}, num:0, mainShow:true }, loading:false, change:true, back:0, next:1, } }, created(){ this.routePath(); }, watch:{ "$route"(to){ this.routePath(); } }, methods:{ buttonToggle(){ var nowNum=this.allData.num; this.back=nowNum; this.next=2-nowNum; }, dosom(str){ str=="next"?this.allData.num++:this.allData.num--; this.buttonToggle(); //當前user/當前頁面/當前頁面路由 router.push(this.$route.path.slice(0,8)+this.allData.num); }, routePath(){ if(this.$route.fullPath=="/"){ router.push("/user/0/0"); this.load(); } else if(this.$route.fullPath.length==9 || this.$route.fullPath.length==20){ this.load(); } else{ router.push("/user/error"); this.back=0; this.next=0; } }, load(){ var numData=null, listData=null; // /user/lisData/numData numData=this.$route.path.slice(8,9); listData=this.$route.path.slice(6,7); // 初始化 this.allData.num=numData; this.buttonToggle(); this.change=!this.change; if(this.$route.path.indexOf("con")>0){ //獲取list中第幾個 var typeData=this.$route.query.type; this.$nextTick(e=>{ this.$http.get("static/data-"+listData+".json").then(rea=>{ this.loading=true; setTimeout(e=>{ //vue-resource加載數據存在於data.body中 var listNum=rea.body.allData.slice(numData*6,numData*6+6); //詳細顯示頁面數據來源 this.allData.detailedData=listNum.slice(typeData,typeData+1)[0]; this.loading=false; },700); }); }); this.allData.mainShow=false; }else{ this.$nextTick(e=>{ this.loading=true; setTimeout(e=>{ this.$http.get("static/data-"+listData+".json").then(rea=>{ this.allData.showData=rea.body.allData.slice(numData*6,numData*6+6); this.loading=false; }); },700); }); this.allData.mainShow=true; } } } } </script> <style> /*切換中動畫*/ .animate-enter-active,.animate-leave-active{ transition: all 0.5s ease; } .animate-enter{ transform: translateX(-80px); opacity: 0; } .animate-leave-active{