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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

寫起來(lái)比較麻煩，做了一張圖，直截了當(dāng)。

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

根據(jù)基礎(chǔ)框架創(chuàng)建對(duì)應(yīng)的文件。

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

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

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

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

Ⅴ： bootstrap.css 樣式CSS

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

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

main.js為入口JS文件，Vue的實(shí)例在這里書寫。el 掛載在 index.html 中 id="index" 的標(biāo)簽上。

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 開始渲染時(shí)，加載 components: { App } 組件替換生成在 id="index" 內(nèi)的 標(biāo)簽，那么{ App }來(lái)自哪里呢？

答案在 import App from "./zjapp" 這里是ES6語(yǔ)法，引入zjapp.vue模塊中暴露出來(lái)的接口，后綴可以不寫。

Vue 實(shí)例中的 router 屬性也是ES6中對(duì)象的字面量寫法，等于router:router。同理 import router from "./router" 這里引入router。

因?yàn)?，router中index.js暴露接口時(shí)沒有署名，這里也可以改一個(gè)名字，比如:

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

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

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

Ⅰ： HTML部分（即template）

大體分為三部個(gè)分

第一部分：

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

第二部分：

    

        上一頁(yè)
        下一頁(yè)
     

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

第三部分：

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

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

Ⅱ： javascript

JS這里的整體流程：watch router.path的變化，從URL中讀取數(shù)據(jù)，從新獲取數(shù)據(jù)。(因?yàn)楸镜豃SON文件，獲取JSON后對(duì)JSON進(jìn)行剪切)

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

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

showData 為當(dāng)前頁(yè)面渲染數(shù)據(jù)，即router-view被替換為showone.vue模板中的數(shù)據(jù)來(lái)源，每次點(diǎn)擊下一頁(yè)等操作導(dǎo)致router.path變化時(shí)，此數(shù)據(jù)更新對(duì)應(yīng)的子模板中（showone.vue）數(shù)據(jù)也更新。（后面講到路由頁(yè)面時(shí)會(huì)解釋）

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

num 這個(gè)是用來(lái)每次打開或者刷新頁(yè)面時(shí)讀取當(dāng)前為第幾頁(yè)的number，因?yàn)檫@個(gè)數(shù)值用了很多次，故將它放到了初始化函數(shù)里

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

loading 控制loading動(dòng)畫的顯示，隱藏

change 頁(yè)面復(fù)用時(shí)的Key值

back 返回按鈕的number，因?yàn)榘粹o的判斷為v-show="back==0?false:true"當(dāng)為0是隱藏

next 同上

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

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

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

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

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

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 字符串，這是當(dāng)前url判斷函數(shù)：

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

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

最后其他任何 url 都被認(rèn)為是錯(cuò)誤的 http 請(qǐng)求，返回404頁(yè)面，當(dāng)然倆個(gè)翻頁(yè)按鈕隱藏。

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();
//  頁(yè)面復(fù)用時(shí)Key值
    this.change=!this.change;
    if(this.$route.path.indexOf("con")>0){

//      獲取list中第幾個(gè)
        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);
                                
                    //詳細(xì)顯示頁(yè)面數(shù)據(jù)來(lái)源
                    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;
    }
}

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

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

created(){
    this.routePath();
}

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

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

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

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

style 部分就不說(shuō)了，簡(jiǎn)單的css3動(dòng)畫

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