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
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: 'User' }
// const Quux = { template: 'quux' }
// const logIn = { template: 'logIn' }
const page404 = { template: 'page404' }
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页面。
四、这篇先把路由介绍到这里，稍后我会整理下在搭建过程中所踩得坑！