摘要：利用配合搭建一個完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個基于的模板創(chuàng)建過程中，為必須，其他語法檢測，單元測試等按需求安裝。為入口文件，的實例在這里書寫。掛載在中的標簽上。定時器的作用是模擬數(shù)據(jù)請求延時。

2017/5/9 更新！
GitHubpages搞了下，PC可以瀏覽?！?/p>

https://15901233752.github.io...

demo源碼：https://github.com/1590123375...

demo未安裝依賴,下載完成，npm install后再npm run dev運行。

利用vue-cli配合vue-router搭建一個完整的spa流程（二）

前言：
Ⅰ. demo所用vue-router的一些基本操作。vue-router中文文檔，快速瀏覽一遍即可 http://router.vuejs.org/zh-cn/
Ⅱ. 整個demo所用到的技術(shù)棧 vueJS(2.0) vue-cli vue-resource es6
Ⅲ. 所需構(gòu)建工具 nodeJS Git

OK,正題開始，首先保證nodeJS,Git,webpack已安裝完畢。打開項目文件夾，安裝vue-cli。

全局安裝 vue-cli
$ npm install --global vue-cli

創(chuàng)建一個基于webpack的模板
vue init webpack my-project
創(chuàng)建過程中，vue-router為必須，其他語法檢測，單元測試等按需求安裝。

創(chuàng)建完成后進入項目文件夾，安裝依賴
$ npm install

安裝到此結(jié)束，運行如下代碼，顯示為圖片所示，則安裝成功。
$ npm run dev

打開已經(jīng)創(chuàng)建好的模板

如圖所示，只會用到，src,static,index.html這三個文件。首先解釋一下三個文件的作用：
Ⅰ： src 存放路由JS，模板.vue文件，入口JS，以及一個入口.vue文件
Ⅱ： static 存放靜態(tài)文件
Ⅲ： index 入口html文件

這里解釋一下xxx.vue文件是什么，官網(wǎng)叫其為單文件組件，通過webpack源碼轉(zhuǎn)換，會全部轉(zhuǎn)換為對應的文件。
說白了就是一個包裹，里邊含有三部分 一部分模板template，一部分樣式style，一部分JSjavascript，他們封裝在一起。
如下圖所示：

寫起來比較麻煩，做了一張圖，直截了當。

項目文件明了之后，我們開始搭建一個簡單的SPA路由構(gòu)架：
Ⅰ： 頁面中有倆個及倆個以上的分類
Ⅱ： 每個分類中可以點擊進入到詳情頁面
Ⅲ： URL輸入錯誤后展示404頁面
Ⅳ： 在頁面中刷新，根據(jù)URL重新獲取數(shù)據(jù)，渲染頁面

根據(jù)基礎框架創(chuàng)建對應的文件。

文件詳解：
Ⅰ： src中components文件夾里新建三個xxx.vue文件，
①error.vue 此為404頁面
②showone.vue 此為第一個分類頁面
③showtwo.vue 此為第二個分類頁面

Ⅱ： src中zjapp.vue這是路由入口文件

Ⅲ： static中img為詳情頁面大圖，thumbnail為分類頁面縮略圖

Ⅳ： 倆個JSON文件，分別代表分類一和分類二的數(shù)據(jù)來源

Ⅴ： bootstrap.css 樣式CSS

到此路由的基本框架搭建完成，后面開始代碼的填充。

作為頁面入口文件，先引入Bootstrap.CSS,如果是本地文件放在static文件夾里?？梢允褂肅DN或者npm安裝。
為了方便后面閱讀將id="app"更改為id="index"。當然，也可以不更改，main.js中有多個為app的名字，避免混淆。

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: "",
  components: { App }
})

Vue 開始渲染時，加載 components: { App } 組件替換生成在 id="index" 內(nèi)的 標簽，那么{ 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: "",
  components: { App }
})

最后，可能有人會問 Vue.config.productionTip = false 是做什么用的，其實這里是關閉了生產(chǎn)模式即部署到服務器后給出的提示。

這個文件是 Vue 一開始渲染組件時的文件，首先貼出全部代碼，很多，但是會全部講解作用，含義。

Ⅰ： HTML部分（即template）

大體分為三部個分

第一部分：

第一部分為頁面中內(nèi)容路由入口，其中：
v-bind:router-data="allData" 是對模板中傳輸數(shù)據(jù)用的
v-bind:key="change" 是頁面切換動畫綁定的變值，用來使頁面被復用時觸發(fā)切換動畫

第二部分：

    

        上一頁
        下一頁
     

第二部分為頁面中上一頁，下一頁按鈕部分，其中：
v-show="allData.mainShow" 是控制倆個按鈕顯示，隱藏（詳情頁隱藏）
v-show="back==0?false:true" 是控制單個按鈕顯示，隱藏（最后一頁時，下一頁按鈕隱藏）
v-on:click="dosom("back")" 是綁定的點擊事件

第三部分：

第三部分為頁面中內(nèi)容更新數(shù)據(jù)時loading畫面，其中：
v-show="loading" 是用來顯示，隱藏 loading 動畫

好了，到此主要的HTML模塊已經(jīng)布局完畢，現(xiàn)在開始JS功能的開發(fā)

Ⅱ： javascript

JS這里的整體流程：watch router.path的變化，從URL中讀取數(shù)據(jù)，從新獲取數(shù)據(jù)。(因為本地JSON文件，獲取JSON后對JSON進行剪切)

import router from "./router" ES6語法，引入router模塊下暴露的接口，這里引入router實例為后續(xù)編寫編程式導航鋪墊。

data(){ 
    return{
        allData:{
            showData:null,
            detailedData:{},
            num:0,
            mainShow:true
        },
        loading:false,
        change:true,
        back:0,
        next:1,
    }
}

showData 為當前頁面渲染數(shù)據(jù)，即router-view被替換為showone.vue模板中的數(shù)據(jù)來源，每次點擊下一頁等操作導致router.path變化時，此數(shù)據(jù)更新對應的子模板中（showone.vue）數(shù)據(jù)也更新。（后面講到路由頁面時會解釋）

detailedData 為詳情頁面渲染數(shù)據(jù)，即router-view被替換為showtwo.vue模板中的數(shù)據(jù)來源,同上。

num 這個是用來每次打開或者刷新頁面時讀取當前為第幾頁的number，因為這個數(shù)值用了很多次，故將它放到了初始化函數(shù)里

mainShow 控制倆個按鈕（下一頁，上一頁）總體顯示，隱藏

loading 控制loading動畫的顯示，隱藏

change 頁面復用時的Key值

back 返回按鈕的number，因為按鈕的判斷為v-show="back==0?false:true"當為0是隱藏

next 同上

以上為這個demo中數(shù)據(jù)的含義，下面是方法的解釋，從methods開始說起：

buttonToggle(){
    var nowNum=this.allData.num;
    this.back=nowNum;
    this.next=2-nowNum;
}

這是倆個按鈕的控制函數(shù)，因為JSON數(shù)據(jù)不多，一個分類中只有2頁數(shù)據(jù)，所以 this.next=2-nowNum; 最后一頁時隱藏。

dosom(str){
    str=="next"?this.allData.num++:this.allData.num--;
    this.buttonToggle();

//  http://localhost:8080/#/user/0/1
//  http://localhost:8080/#/user/0/this.allData.num
    router.push(this.$route.path.slice(0,8)+this.allData.num);
}

這是按鈕點擊時觸發(fā)的方法，點擊后判斷是上一頁，還是下一頁，因為會動態(tài)的隱藏按鈕所以不用關注++或者--的上下界。隨后進行url的更改（url更改后會觸發(fā)watch，watch中執(zhí)行的函數(shù)為 routePath() ，下一個說到）

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;
    }
}

this.$route.fullPath 返回的是全部 url 字符串，這是當前url判斷函數(shù)：

當讀取到的url為“/”時，此為第一次打開頁面，跳轉(zhuǎn)到首頁也就是 http://localhost:8080/#/user/0/0 然后 執(zhí)行l(wèi)oad()方法，load() 方法下一個說到。

當讀取到this.$route.fullPath.length==9 || this.$route.fullPath.length==20，其實就是 this.$route.fullPath 為 /user/x/x 的主頁面中，或者為 /user/x/x/con?type=x 的詳情頁面中，此時直接進行 load() 方法更新數(shù)據(jù)即可

最后其他任何 url 都被認為是錯誤的 http 請求，返回404頁面，當然倆個翻頁按鈕隱藏。

load(){
    var numData=null,
    listData=null;    
        
//  /user/lisData/numData
    listData=this.$route.path.slice(6,7);
    numData=this.$route.path.slice(8,9);    
        
//  初始化num值
    this.allData.num=numData;
    this.buttonToggle();
//  頁面復用時Key值
    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加載數(shù)據(jù)存在于data.body中
                    var listNum=rea.body.allData.slice(numData*6,numData*6+6);
                                
                    //詳細顯示頁面數(shù)據(jù)來源
                    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;
    }
}

這個方法的作用是交互數(shù)據(jù)，demo 有倆個分類，首頁，和第一頁，所以對應的數(shù)據(jù)也是倆個JSON。定時器的作用是模擬數(shù)據(jù)請求延時。

以上就是 methods 方法里全部函數(shù)，下面解釋一下Vue實例里其他的方法。

created(){
    this.routePath();
}

這是一個生命周期鉤子代表Vue實例被創(chuàng)建好了，創(chuàng)建好之后進行url解析,這是初始化的步驟，第一次打開這個demo執(zhí)行的函數(shù)。官方文檔：Vue生命周期

watch:{
    "$route"(to){
        this.routePath();
    }
}

說到 watch 了這是監(jiān)控url變化時觸發(fā)的函數(shù)，說白了就是執(zhí)行 router.path("/user/x/x")
之后Vue會檢測到變化，從而進行回調(diào)函數(shù)，這里執(zhí)行 routerPath() 分析 url 是屬于哪個頁面從而進行數(shù)據(jù)更新。

好了，javascript的編寫到此結(jié)束，主要部分還是在 routerPath() 這個函數(shù)，再通過 url 重新獲取數(shù)據(jù)。

style 部分就不說了，簡單的css3動畫

后續(xù)部分寫在 利用vue-cli配合vue-router搭建一個完整的spa流程（二）上。順便求一波關注吧(ˉ▽ˉ；)...