如何使用Vue整合AdminLTE模板

php中世界最好的语言

发布时间：2018-05-28 14:45:13

7290人浏览过

来源于php中文网

原创

这次给大家带来如何使用Vue整合AdminLTE模板，使用Vue整合AdminLTE模板的注意事项有哪些，下面就是实战案例，一起来看一下。

上一次搞定了登录验证和跳转的问题，不过存在一处bug。在Vue的main.js中，使用了Vue-router的路由钩子来判断是否可以访问受保护的资源，问题就出在这里，先修复上次的bug。

/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
 */
router.beforeEach((to, from, next) => {
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

代码中有一个问题，就是在没有token时如果直接访问/login会产生死循环导致溢出。修改后代码如下

/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
 */
router.beforeEach((to, from, next) => {
 if(to.path == '/login'){
  next()
 }
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

好了，进入正题。先说AdminLTE，这是一个基于bootstrap的后台管理模板，对于我这种排版、设计很渣但又需要一个人搞定所有事的来说确实是个救星。先看看它的效果。

可以看到效果非常棒。其本身还包含了各种各样的jquery插件，map、fullcalendar、datapicker、charts等等。不过这里我们主要用到侧边的导航和头部样式。

第一步，我们创建一个index.vue用作整个系统的主界面，然后把AdminLTE的index文件中的html复制到index.vue的template中。在没有任何设置的情况想效果是这样的。

好吧，辣眼睛。之所以这样是因为我们没有在页面中导入各种css文件。

第二步，导入bootstrap的css文件。如果你是要Vue-cli创建的项目，那么项目中应该已经包含了bootstrap（在node_modules文件夹中）。接下来只要在main.js中引入就可以了。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'

引入后的效果是这样的

稍微正常了一些，下一步我们需要引入AdminLTE相关的css文件，如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们Vue项目的assets中吧。引入的方法还是在main.js中添加。'

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
//AdminLTE
import './assets/css/skins/_all-skins.min.css'
import './assets/css/AdminLTE.min.css'

引入后的效果

头部似乎正常了，但是body的内容都没有显示出来。原因是AdminLTE是基于bootstrap的，而bootstrap又是需要jquery的。此时我们只引入了css文件，而还没引入所需的js文件。但是此时引入js文件会因为没有jquery而导致引入的文件无法起作用。所以先解决Vue中使用jquery的问题。首先需要通过npm下载jquery到项目中（这里最好和AdminLTE中使用的jquery版本一致，我这里是2.2.3）。打开shell导航到我们项目所在的文件夹使用npm install来安装jquery。

安装好之后应该能在项目的node_modules文件夹中找到jquery文件夹，并且package.json中也记录了项目引用的jquery版本。

接下来要修改项目的webpack配置文件。文件位于项目的build文件夹下，文件名是webpack.base.conf.js。需要在这个文件中新增2处配置。

引入了jquery之后，我们就可以在main.js中继续引入bootstrap和AdminLTE的js文件了。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
//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'

引入之后再看一下效果

总算看起来好一些了，但是我们发现图标都没有显示出来，这是因为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文件，先简单的包含一行内容即可。

在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要被放置的红色区域）

设备目录管理

点击设备目录管理，catalog.vue的内容就会出现在红色框区域内了

最后一步，我们需要一个退出功能，上一篇中我们把认证凭证放在了localStorage中，那么在退出时我们就需要删除localStorage中的信息，并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。

全部搞定，最后还有一个奇怪的问题。在第一次登录后页面不能完整显示，需要刷新一次。不过如果手动制定红色区域的高度则不会出现，我搞了半天也不知问题出在哪里，如果有哪位老师知道的话请指点我一下，谢谢。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

excel制作动态图表教程

本专题整合了excel制作动态图表相关教程，阅读专题下面的文章了解更多详细教程。

2025.12.29

freeok看剧入口合集

本专题整合了freeok看剧入口网址，阅读下面的文章了解更多网址。

2025.12.29

俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com；用户可通过网页端直连或移动端浏览器直接访问，无需登录即可使用搜索、图片、新闻、地图等全部基础功能，并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

197

2025.12.29

python中def的用法大全

def关键字用于在Python中定义函数。其基本语法包括函数名、参数列表、文档字符串和返回值。使用def可以定义无参数、单参数、多参数、默认参数和可变参数的函数。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29

python改成中文版教程大全

Python界面可通过以下方法改为中文版：修改系统语言环境：更改系统语言为“中文（简体）”。使用 IDE 修改：在 PyCharm 等 IDE 中更改语言设置为“中文”。使用 IDLE 修改：在 IDLE 中修改语言为“Chinese”。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29

C++的Top K问题怎么解决

TopK问题可通过优先队列、partial_sort和nth_element解决：优先队列维护大小为K的堆，适合流式数据；partial_sort对前K个元素排序，适用于需有序结果且K较小的场景；nth_element基于快速选择，平均时间复杂度O(n)，效率最高但不保证前K内部有序。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29