//bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//AdminLTE
import './assets/css/skins/_all-skins.min.css'
import './assets/css/AdminLTE.min.css'
import './assets/js/app.min.js'
//font-awesome
import 'font-awesome/css/font-awesome.min.css'导入后效果
还差一点完成了，我们还要处理一下Vue路由，使得我们在点击左侧导航时，需要显示的内容会出现在图中红框区域内。对应设备目录管理我们新建一个catalog.vue文件，先简单的包含一行内容即可。
<template>
<h1>catalog</h1>
</template>在main.js中引入catalog并新增一条路由规则。注意这里我们使用了vue-router的嵌套路由，因为我们需要catalog.vue的内容嵌套在index.vue中显示。
//compinents
import App from './App'
import Login from './components/login'
import Index from './components/index'
import DeviceCatalog from './components/deviceCatalog'Vue.use(VueRouter)
Vue.use(VueResource)
Vue.http.options.emulateJSON = true;
const routes = [
{
path: '/login',
component : Login
},{
path: '/index',
component: Index,
children: [
{
path: '/deviceCatalog',
component: DeviceCatalog
}
] },
]
在index.vue中创建导航和路由出口（即catalog.vue要被放置的红色区域）
<!-- 路由导航 -->
<router-link to="/deviceCatalog">
<i class="fa fa-cubes"></i>
<span class="ch">设备目录管理</span>
</router-link>
<!-- 路由出口 -->
<div class="content-wrapper" style="border-style:solid; border-color:red">
<!-- Main content -->
<router-view style="margin-top:0px; padding:2px"></router-view>
<!-- /.content -->
</div>点击设备目录管理，catalog.vue的内容就会出现在红色框区域内了
最后一步，我们需要一个退出功能，上一篇中我们把认证凭证放在了localStorage中，那么在退出时我们就需要删除localStorage中的信息，并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。
<!-- 绑定方法 -->
<div class="pull-right">
<button v-on:click="logOut" class="btn btn-primary btn-flat ch">退出</button>
