总算看起来好一些了，但是我们发现图标都没有显示出来，这是因为AdminLTE还使用了font-awesome。我们还需要再使用npm在项目中安装font-awesome，之后在main.js中导入font-awesome的css文件（这次只需要安装，不需要修改webpack的配置文件了）。
//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></i> <span>设备目录管理</span> </router-link> <!-- 路由出口 --> <div> <!-- Main content --> <router-view></router-view> <!-- /.content --> </div>
点击设备目录管理，catalog.vue的内容就会出现在红色框区域内了
最后一步，我们需要一个退出功能，上一篇中我们把认证凭证放在了localStorage中，那么在退出时我们就需要删除localStorage中的信息，并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。
<!-- 绑定方法 --> <div> <button v-on:click="logOut">退出</button> </div> <!-- logout方法 --> <script> export default { // name: 'app', data() { return { displayName: localStorage.userDisplayName, } }, methods: { logOut: function(){ localStorage.clear(); this.$router.push('login') } } } </script>
全部搞定，最后还有一个奇怪的问题。在第一次登录后页面不能完整显示，需要刷新一次。不过如果手动制定红色区域的高度则不会出现，我搞了半天也不知问题出在哪里，如果有哪位老师知道的话请指点我一下，谢谢。
