vue2.0環境搭建（含router路由）

現如今這四海八荒都在用vue啊！年前我手頭新做一個運營平臺，截圖如下，前後端分離，費了半天勁終於把環境搭建起來了，年後有功夫了，特地整理下，希望大家能少走些彎路！

一、搭建環境

用官方的腳手架cli一步一步按流程走，我整理出的流程如下，參考官網指導 https://cn.vuejs.org/v2/guide/installation.html#NPM

1. npm install vue-cli webpack -g （全局安裝vue腳手架和webpack）
2. 進入工程目錄 vue init webpack my-project （初始化，輸入有的沒的）
3. cd my-project
4. npm install （安裝項目依賴，一定要用npm，會比較慢）
5. npm install vue-router vue-resource --save-dev（安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource）
6. npm run dev（本地運行）
7. npm run build（生成服務器build）

二、路由配置

前面搭建環境的時候已經安裝了router了，在配置裏直接調用就可以了，參考官方指導和demo https://router.vuejs.org/zh-cn/essentials/getting-started.html

由於代碼裏設計太多公司接口的東東，我就只展示部分路由代碼了，framework.vue放的是路由的dom層，main.js是路由配置層

1.framework.vue

<ul>
    <!-- home -->
    <li>
        <router-link to="/home" class="parent-title"><span class="glyphicon glyphicon-home"></span>Home</router-link>
    </li>
    <!-- 統計報表 -->
    <li>
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-stats"></span>統計報表<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/stat/bandWidth">帶寬統計</router-link>
        </ul>
    </li>
    <!-- 業務監控 -->
    <li>
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-hdd"></span>業務監控<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/monitor/pingInfo">丟包檢測</router-link>
        </ul>
    </li> 
    <!-- server管理 -->
    <li>
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-tasks"></span>server管理<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/conf/ats">server配置</router-link>
            <router-link to="/conf/returnOrig">回源配置</router-link>
            <router-link to="/conf/domain">域名配置</router-link>
        </ul>
    </li>
    <!-- 調度管理 -->
    <li>
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-compressed"></span>調度管理<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/dispatch/node">節點管理</router-link>
            <router-link to="/dispatch/lvs">lvs管理</router-link>
        </ul>
    </li>
    <!-- 運營工具 -->
    <li style="display: none;">
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-wrench"></span>運營工具<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/tool/taskRefresh">任務刷新</router-link>
        </ul>
    </li>
    <!-- 其他 -->
    <li style="display: none;">
        <a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-knight"></span>其他<span class="drop-arrow">◢</span></a>
        <ul class="child-menu">
            <router-link to="/lemonTest">test</router-link>
            <router-link to="/home">Home</router-link>
        </ul>
    </li>
</ul>

2.main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
// import createHello from './components/hello/hello.js'
import util from './service/util'
import loadingHourGlass from './components/loading_hourglass'
Vue.component('loadingHourGlass', loadingHourGlass)

// import cookieParser from 'cookie-parser'

// Vue.component('hello', hello);
// Vue.prototype.util = util;

Vue.use(VueRouter);
Vue.config.debug = true;

//const Foo = resolve => require(['./template/template1.vue'], resolve)
// const Bar = resolve => require(['./template/template2.vue'], resolve)
// const User = { template: '<div>User</div>' }
// const Quux = { template: '<div>quux</div>' }
// const logIn = { template: '<div>logIn</div>' }
const page404 = { template: '<div>page404</div>' }

const routes = [


	{ 	// 根目錄重定向
		path: '/logIn', component: resolve => require(['./template/login.vue'], resolve)
	},
	{
		path: '/framework', 
		component: resolve => require(['./template/framework.vue'], resolve),
	    children:[
			{
				path: '/home',
				component: resolve => require(['./template/home.vue'], resolve)
			},
			{
                path:'/stat',
                component: resolve => require(['./template/stat/view.vue'], resolve),       
                redirect: '/stat/bandWidth',
                children:[
                	{ path: 'bandWidth', component: resolve => require(['./template/stat/band_width.vue'], resolve)}
                ]        
			},
			{
                path:'/monitor',
                component: resolve => require(['./template/monitor/view.vue'], resolve),
                redirect: '/monitor/pingInfo',
                children:[
                	{ path: 'pingInfo', component: resolve => require(['./template/monitor/ping_info.vue'], resolve)}
                ]
			},
			{
				path: '/conf/ats',
				component: resolve => require(['./template/conf/ats/view.vue'], resolve),
				redirect: '/conf/ats/info',
			    children:[
			    	{ path: 'info', component: resolve => require(['./template/conf/ats/info.vue'], resolve) },
			    	{ path: 'grey', component: resolve => require(['./template/conf/ats/grey.vue'], resolve) },
			    	{ path: 'status', component: resolve => require(['./template/conf/ats/status.vue'], resolve) }
			    ]
			},
			{	
				path: '/conf/returnOrig',
				component: resolve => require(['./template/conf/return_orig/view.vue'], resolve),
				redirect: '/conf/returnOrig/core',
			    children:[
			    	{ path: 'fileCore', component: resolve => require(['./template/conf/return_orig/file_core.vue'], resolve) },
			    	{ path: 'core', component: resolve => require(['./template/conf/return_orig/core.vue'], resolve) },
			        { path: 'area', component: resolve => require(['./template/conf/return_orig/area.vue'], resolve) },
			        { path: 'province', component: resolve => require(['./template/conf/return_orig/province.vue'], resolve) },
			        { path: 'singlePoint', component: resolve => require(['./template/conf/return_orig/single_point.vue'], resolve) },
			        { path: 'idc', component: resolve => require(['./template/conf/return_orig/idc.vue'], resolve) },
			        { path: 'group', component: resolve => require(['./template/conf/return_orig/group.vue'], resolve) }
			    ]
			},
			{
				path: '/conf/domain',
				component: resolve => require(['./template/conf/domain/view.vue'], resolve),
				redirect: '/conf/domain/info',
			    children:[
			    	{ path: 'info', component: resolve => require(['./template/conf/domain/info.vue'], resolve) }
			    ]
			},
			{
				path: '/dispatch/node',
				component: resolve => require(['./template/dispatch/node/view.vue'], resolve),
				redirect: '/dispatch/node/info',
			    children:[
			    	{ path: 'info', component: resolve => require(['./template/dispatch/node/info.vue'], resolve) }
			    ]
			},
			{
				path: '/dispatch/lvs',
				component: resolve => require(['./template/dispatch/lvs/view.vue'], resolve),
				redirect: '/dispatch/lvs/info',
			    children:[
			    	{ path: 'info', component: resolve => require(['./template/dispatch/lvs/info.vue'], resolve) }
			    ]
			},
			{
				path: '/tool',
				component: resolve => require(['./template/tool/task_refresh/view.vue'], resolve),
				redirect: '/tool/taskRefresh',
			    children:[
			    	{ path: 'taskRefresh', component: resolve => require(['./template/tool/task_refresh/info.vue'], resolve) }
			    ]
			},
			{ 	
				path: '/lemonTest',
				component: resolve => require(['./template/else/view.vue'], resolve),
				redirect: '/lemonTest/test1',
			    children:[
			    	{ path: 'test1', component: resolve => require(['./template/else/test1.vue'], resolve) },
			    	{ path: 'test2', component: resolve => require(['./template/else/test2.vue'], resolve) },
			    	{ path: 'test3', component: resolve => require(['./template/else/test3.vue'], resolve) }
			    ]
			}
	    ]
	},
	{ 	// 根目錄重定向
		path: '/', redirect: '/home'
	},
	{ 	// 根目錄重定向
		path: '*', component: page404
	},

]


const router = new VueRouter({
	routes: routes,
	linkActiveClass: "v-link-active", // （縮寫）相當於 routes: routes
})

router.beforeEach((to, from, next) => {

	var token = util.getCookie('token')
	if (token || to.path == '/logIn'){
		console.log('已登錄，跳轉到' + to.path)
		next()
	}
	else{
		console.log('cookie中未檢測到token，跳轉到登錄頁面')
		router.push({path:'/logIn'});
	}
	
})

const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

三、登錄驗證

既然是前後端分離，那麼登錄狀態的校驗自然是要放在前端，我這裏是這樣實現的，用戶登錄後，由服務端生成一個token在瀏覽器中，前端這邊每次路由跳轉都會去獲取token，如果存在則登錄狀態存在，則next()繼續，否則指到/logIn頁面。

四、這篇先把路由介紹到這裏，稍後我會整理下在搭建過程中所踩得坑！