vue(vue-cli+vue-router)+babel+webpack項目搭建入門<三>

本系列文章將介紹基于vue+webpack的前端項目的構建過程。文章分為四章內容，第一章介紹開發環境的部署，第二章介紹項目的構建，第三章以一個登陸-主界面的純前端項目為示例進行實戰開發，第四章介紹項目打包部署以及部署上線時可能遇到的問題。本系列文章主要介紹項目構建的流程，旨在為不了解現代前端項目開發過程的讀者提供一個流程介紹，不會在一些細節上深究講解，因此本文適合初學者使用閱讀。
本系列文章中使用的配套示例代碼請在示例代碼下載地址進行下載。本文的實戰項目可在項目在線地址進行瀏覽觀看。
在編寫本系列文章時，各框架插件版本號如下：

• nodejs v10.4.1;
• npm v6.1.0;
• vue v2.5.2;
• vue-cli v2.9.6;
• vue-router v3.0.1;
• vuex v3.1.0;
• babel v6.5.2;
• babel-polyfill v6.23.0;
• webpack v3.6.0;

開發功能-實戰示例

成功啟動項目之后，讓我們來為這個項目填充一些內容。對于本文的示例項目“點客論壇”，他有一個登錄界面Login；有一個主界面Main，主界面中有兩個子界面：一個登錄日志界面LogInfo和一個論壇內容界面HomePage；最后有一個404界面NotFound。現在讓我們來實現他們。想要了解項目的具體結構，請查看項目的在線瀏覽地址。

根據項目安裝插件依賴

在初始化項目時，vue-cli的腳手架模板已經為項目安置了一些插件依賴。但有時為了實現項目的需求，需要不斷的增加插件，點客論壇也不例外。在這個項目中我們需要增加vuex和babel-polyfill兩個額外的插件依賴。首先修改package.json文件中的dependencies項，添加兩個依賴項，修改后結果如下：

"dependencies": {"vue": "^2.5.2","vue-router": "^3.0.1","vuex": "^3.1.0","babel-polyfill": "^6.26.0"}

我們為項目增加了vuex v3.1.0和babel-polyfill v6.26.0兩個插件依賴，其中vuex為項目提供狀態管理服務，babel-polyfill為babel默認不支持的一些ES6語法進行轉義。因為這兩個插件都是運行時插件，所以需要將他們放置在dependencies中。

vue-element。插件的版本符號
在package.json中，可以為dependencies和devDependencies插件依賴的版本號進行指定，有如下幾種符號：
1.version必須完全和version一致，如1.2.2;
2.>version、>=version大于或大于等于version;
3.<version、<=version小于或小于等于version;
4._{version小版本號不低于version。比如}1.2.2，表示安裝1.2.x的最新版本（不低于1.2.2），但是不安裝1.3.x，也就是說安裝時不改變大版本號和次要版本號;
5.^version中間版本號不低于version。比如?1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說安裝時不改變大版本號。
6.*所有;
7.latest最新版本;
一般來說，一個插件（或框架）的大版本號（版本號分三位：大版本.中版本.小版本）不變的話，其API和使用方式是不會發生太大的變化。所以通常情況下，package.json中的版本號只要保證大版本號相同即可。

在項目的根目錄路徑下（D:\WebStorm\workspace\dk-bbs），用cmd執行”npm install”命令，安裝新增的兩個插件。npm執行一段時間之后，插件下載并安裝完成。此時重啟項目，用cmd在項目根目錄路徑下（D:\WebStorm\workspace\dk-bbs）執行”npm start”，啟動項目。
如果之前已經用cmd啟動了項目，有兩種簡單的方式停止項目的運行：
1.直接關閉cmd命令行窗口就可以停止已經運行的項目；
2.使用ctrl+c快捷鍵，來終止當前正在執行的任務，從而停止項目的運行；

項目內的配置代碼

安裝完了額外的插件，讓我們開始真正開發這個程序。首先編寫配置代碼。

vue-router路由配置

點客論壇這個項目包含5個界面路由：登錄頁、主頁面、主頁面下的兩個子頁面、404頁面。根據這樣的路由結構，我們可以寫出一個vue-router頁面結構配置。找到vue-router配置文件，這個配置文件在vue-cli生成項目時已經存在了，其目錄位置在：D:\WebStorm\workspace\dk-bbs\src\router\index.js，修改后代碼如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from "@/components/Login.vue";
import Main from "@/components/Main.vue";
import HomePage from "@/components/HomePage.vue";
import LogInfo from "@/components/LogInfo.vue";
import NotFound from "@/components/NotFound.vue";
Vue.use(Router)
export default new Router({routes: [{path: "/",redirect:"/login"},{path:"/login",name:"Login",component:Login},{path: "/main",name: "Main",component: Main,children: [{path:"homepage",name:"HomePage",component:HomePage},{path:"loginfo",name:"LogInfo",component:LogInfo}]},//404{path: '*',name:"NotFound",component:NotFound}]
})

可以看到，因為項目模塊不多，我們將所有的vue單文件都放在了components目錄下。實際產品開發時，涉及到項目模塊太多時，不能簡單的將所有頁面文件都暴露在components下，應該按照模塊進行份文件目錄存儲。否則會造成不方便閱讀查找的維護困難。
在vue-router配置文件中，首先用import語句引入各個模塊依賴，然后通過Vue.use(Router)的方式來加載插件，接著導出一個Router對象，用來控制項目的路由關系。
登錄頁面Login、主界面Main頁面以及404頁面都是最外層的（其中404頁面的路徑配置成了“*”，這也就代表著只要前面的路由都未匹配成功，就進入404頁面），而HomePage界面和LogInfo界面作為Main界面的兩個子頁面存在。
對于vue-router配置文件有一點需要開發人員注意，子路由（children）的路徑（path）不能帶"/“符號，帶了”/"符號就變成一個絕對路徑了，將會引起子路由失敗。例如本項目中homepage是一個子路由，不要寫成path:”/homepage”，正確的寫法是path:”homepage”，這是vue-router插件的一個規定。

vuex狀態控制配置

vuecli4和3區別、點客論壇項目中，需要在各個模塊之間共享的數據有：記錄用戶行為、當前用戶名。因此我們需要將他們配置進vuex的配置文件中。
首先，因為vuex是我們額外引入的插件，所以vue-cli腳手架并沒有直接使用他，需要開發人員手工配置使用vuex。在D:\WebStorm\workspace\dk-bbs\src\目錄位置 新建一個名為“store”的文件夾，并在store文件夾中新建一個index.js文件。向index.js文件加入如下內容：

import Vue from 'vue';
import Vuex from "vuex";
Vue.use(Vuex);
const store=new Vuex.Store({state: {username:"",logs:[]},mutations: {login:(state,data)=>{state.username=data;},pushLog:(state,data)=>{state.logs.push(data);}}
});
export default store;

可以觀察到，vuex與vue-router配置文件的風格非常接近。都是先引入依賴，使用Vue.use(Vuex)來加載插件，接著導出一個配置文件。在D:\WebStorm\workspace\dk-bbs\src\store\index.js文件中，我們初始化了兩個狀態量：username和logs。分別代表全局的用戶名和全局的用戶操作日志。接著我們定義了兩個觸發器：login和pushLog來對狀態量進行修改。
完成了vuex的配置，需要讓整個項目來讀取這份配置文件。修改D:\WebStorm\workspace\dk-bbs\src\main.js文件。修改后文件內容如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})

其中修改的內容是：引入了vuex配置文件store\index.js和在new Vue()中部署store。
編寫完以上這些項目內的配置代碼，我們就可以著手開始業務代碼的開發。

項目內的業務代碼

登錄頁面Login

登錄界面由一個輸入框和一個按鈕組成，輸入框用來輸入用戶名，按下按鈕之后就進入主界面。相應的程序會開始記錄用戶信息。
登錄頁的代碼很簡單，如下：

<template><div class="login-content"><form action="" οnsubmit="return false"><input ref="username" type="text" name="username"><input type="submit" value="登錄" v-on:click="login"></form></div>
</template>
<script>
export default {name: 'Login',data () {return {};},methods:{login:function(){this.$router.push("main");this.$store.commit("login",this.$refs.username.value);this.$store.commit("pushLog",`用戶：${this.$refs.username.value}在中國時間：${new Date()}登錄系統`);}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

主界面Main

主界面的頭部有導航欄，導航欄將路由到項目內各個頁面。在每個導航欄按鈕都綁定了事件，去記錄用戶的行為操作。該頁面代碼如下：

<template><div class="main-content"><header class="header"><nav v-for="item in navs" v-on:click="toPage(item.url)">{{item.name}}</nav></header><div><transition><router-view></router-view></transition></div></div>
</template>
<script>
export default {name: 'Main',data () {return {navs:[{url:"login",name:"登錄頁"},{url:"homepage",name:"首頁"},{url:"loginfo",name:"日志信息"},{url:"notfound",name:"404頁面"}]}},methods:{toPage:function(url){if(url==='login'){this.$router.push('/login');}else{this.$router.push(`/main/${url}`);}this.$store.commit("pushLog",`${this.$store.state.username}進入了${url}頁面`);}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.main-content .header{border-bottom:1px solid;}
</style>

主界面的子界面HomePage和LogInfo

vue cli是什么，HomePage界面展示一句歡迎登錄的文本信息。代碼如下：

<template><div class="homepage-content"><p>{{msg+username}}</p></div>
</template>
<script>
export default {name: 'HomePage',data () {return {msg:"歡迎登錄點客論壇，"}},computed:{username:function(){return this.$store.state.username;}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

LogInfo從vuex管理的store對象中獲取日志信息，將所有日志展示出來。代碼如下：

<template><div class="loginfo-content"><ul><li v-for="item in logs">{{item}}</li></ul></div>
</template>
<script>
export default {name: 'LogInfo',data () {return {};},computed:{logs:function(){return this.$store.state.logs;}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

從這兩個頁面的代碼中可以觀察到，在頁面中使用store中存儲的狀態時，需要將變量放在computed中作為函數的返回值來返回。只有這樣，才可以保證每次觸發器（mutation）改變store中的值時，頁面可以監聽到該變化。同樣的，使用watch也是可行的。

404界面NotFound

該界面展示一張圖片，用來提示用戶當前路由錯誤。同時提供一個按鈕用來返回主頁。頁面引用的圖片放置在D:\WebStorm\workspace\dk-bbs\static\img路徑下。代碼如下：

<template><div class="notfound-content"><p v-on:click="toPage('homepage')">{{msg}}</p><img v-bind:src="picUrl"></div>
</template>
<script>
export default {name: 'NotFound',data () {return {msg:"返回首頁",picUrl:" /static/img/404.png"}},methods:{toPage:function(url){this.$router.push(`/main/${url}`);this.$store.commit("pushLog",`${this.$store.state.username}進入了${url}頁面`);}}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

開發總結

至此，我們就完成了整個項目的實現。下圖就是點客論壇中的“日志信息”頁面，這個頁面將會記錄進入網站后的所有操作行為。

因為基于vue-cli+webpack啟動的項目是有熱重載機制的，因此開發人員在修改項目代碼之后，變化會自動生效到頁面內容中。可以看到，此時的項目已經在開發環境運行良好。
雖然這個示例項目的內容非常簡單，模塊也非常的少（只有五個頁面路由），但是我相信這個示例項目已經很好的把基于Vue生態構建的單頁應用下，各個插件在項目中的作用和關聯體現了出來。對于初學者來說，一定要仔細理解項目中各個環節的作用。對于需要更加深入學習的讀者來說，插件官網以及插件源碼為各位開發人員提供了更加清晰的說明和解釋。

vue cli教程、前端單頁應用url哈希值介紹
url的錨（**#后面的內容）指示瀏覽器顯示頁面的哪個部分。錨的其他常見名字是：書簽或哈希。錨總是以#**符號開頭，如http://localhost:8080/#/login。
傳統的錨的用法是，開發人員使得用戶能很容易地在一個很長的文檔頁面的各個章節中“跳轉”。比如，在網頁的頂部有一個目錄，所有的章節標題鏈向他們在文檔中對應的章節。每個章節的最后可能有一個“回到頂部”的鏈接。博客和論壇仍然很廣泛的使用這種機制。
錨的一個獨特功能是，在它改變的時候，瀏覽器不會重新加載頁面。因此錨是保存應用狀態的理想地方，這也是單頁應用使用最廣泛的技巧。但同時要注意，正因為錨的改變不會引起頁面刷新，因此單頁應用在切換頁面時，不會刷新滾動條。

最后讓我們簡要的回顧一下本章中，我們做了些什么：
1.引入額外的插件依賴，并用npm install安裝，之后重啟項目；
2.要讓額外引入的插件能用起來，需要新增/修改一些配置文件，插件的使用方法在插件官網都會有詳細的介紹；
3.根據項目需要，編寫vue-router路由配置；
4.編寫業務代碼；
5. 如果開發過程中需要再引入額外插件，那就重復1-2步驟。如果開發過程中需要增加新的路由結構，那就重復3步驟；