本篇文章給大家分享的是有關(guān)如何在Vue中使用AdminLTE模板，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信小程序開(kāi)發(fā)、微信公眾號(hào)開(kāi)發(fā)、成都網(wǎng)站營(yíng)銷(xiāo)服務(wù)，提供專(zhuān)業(yè)營(yíng)銷(xiāo)思路、內(nèi)容策劃、視覺(jué)設(shè)計(jì)、程序開(kāi)發(fā)來(lái)完成項(xiàng)目落地，為成都餐廳設(shè)計(jì)企業(yè)提供源源不斷的流量和訂單咨詢(xún)。

/*
全局路由鉤子
訪問(wèn)資源時(shí)需要驗(yàn)證localStorage中是否存在token
以及token是否過(guò)期
驗(yàn)證成功可以繼續(xù)跳轉(zhuǎn)
失敗返回登錄頁(yè)重新登錄
 */
router.beforeEach((to, from, next) => {
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

代碼中有一個(gè)問(wèn)題，就是在沒(méi)有token時(shí)如果直接訪問(wèn)/login會(huì)產(chǎn)生死循環(huán)導(dǎo)致溢出。修改后代碼如下

/*
全局路由鉤子
訪問(wèn)資源時(shí)需要驗(yàn)證localStorage中是否存在token
以及token是否過(guò)期
驗(yàn)證成功可以繼續(xù)跳轉(zhuǎn)
失敗返回登錄頁(yè)重新登錄
 */
router.beforeEach((to, from, next) => {
 if(to.path == '/login'){
  next()
 }
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

好了，進(jìn)入正題。先說(shuō)AdminLTE，這是一個(gè)基于bootstrap的后臺(tái)管理模板，對(duì)于我這種排版、設(shè)計(jì)很渣但又需要一個(gè)人搞定所有事的來(lái)說(shuō)確實(shí)是個(gè)救星。先看看它的效果。

可以看到效果非常棒。其本身還包含了各種各樣的jquery插件，map、fullcalendar、datapicker、charts等等。不過(guò)這里我們主要用到側(cè)邊的導(dǎo)航和頭部樣式。

第一步，我們創(chuàng)建一個(gè)index.vue用作整個(gè)系統(tǒng)的主界面，然后把AdminLTE的index文件中的html復(fù)制到index.vue的template中。在沒(méi)有任何設(shè)置的情況想效果是這樣的。

好吧，辣眼睛。之所以這樣是因?yàn)槲覀儧](méi)有在頁(yè)面中導(dǎo)入各種css文件。

第二步，導(dǎo)入bootstrap的css文件。如果你是要Vue-cli創(chuàng)建的項(xiàng)目，那么項(xiàng)目中應(yīng)該已經(jīng)包含了bootstrap（在node_modules文件夾中）。接下來(lái)只要在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相關(guān)的css文件，如果你有AdminLTE的文件應(yīng)該能在dist中找到css、img、js三個(gè)文件夾。把這三個(gè)文件夾復(fù)制到我們Vue項(xiàng)目的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的內(nèi)容都沒(méi)有顯示出來(lái)。原因是AdminLTE是基于bootstrap的，而bootstrap又是需要jquery的。此時(shí)我們只引入了css文件，而還沒(méi)引入所需的js文件。但是此時(shí)引入js文件會(huì)因?yàn)闆](méi)有jquery而導(dǎo)致引入的文件無(wú)法起作用。所以先解決Vue中使用jquery的問(wèn)題。首先需要通過(guò)npm下載jquery到項(xiàng)目中（這里最好和AdminLTE中使用的jquery版本一致，我這里是2.2.3）。打開(kāi)shell導(dǎo)航到我們項(xiàng)目所在的文件夾使用npm install來(lái)安裝jquery。

 

安裝好之后應(yīng)該能在項(xiàng)目的node_modules文件夾中找到j(luò)query文件夾，并且package.json中也記錄了項(xiàng)目引用的jquery版本。

 

接下來(lái)要修改項(xiàng)目的webpack配置文件。文件位于項(xiàng)目的build文件夾下，文件名是webpack.base.conf.js。需要在這個(gè)文件中新增2處配置。

引入了jquery之后，我們就可以在main.js中繼續(xù)引入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'

引入之后再看一下效果

總算看起來(lái)好一些了，但是我們發(fā)現(xiàn)圖標(biāo)都沒(méi)有顯示出來(lái)，這是因?yàn)锳dminLTE還使用了font-awesome。我們還需要再使用npm在項(xiàng)目中安裝font-awesome，之后在main.js中導(dǎo)入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'

導(dǎo)入后效果

還差一點(diǎn)完成了，我們還要處理一下Vue路由，使得我們?cè)邳c(diǎn)擊左側(cè)導(dǎo)航時(shí)，需要顯示的內(nèi)容會(huì)出現(xiàn)在圖中紅框區(qū)域內(nèi)。對(duì)應(yīng)設(shè)備目錄管理我們新建一個(gè)catalog.vue文件，先簡(jiǎn)單的包含一行內(nèi)容即可。

<template>
  <h2>catalog</h2>
</template>

在main.js中引入catalog并新增一條路由規(guī)則。注意這里我們使用了vue-router的嵌套路由，因?yàn)槲覀冃枰猚atalog.vue的內(nèi)容嵌套在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中創(chuàng)建導(dǎo)航和路由出口（即catalog.vue要被放置的紅色區(qū)域）

<!-- 路由導(dǎo)航 -->
<router-link to="/deviceCatalog">
 <i class="fa fa-cubes"></i> 
 <span class="ch">設(shè)備目錄管理</span>
</router-link>
<!-- 路由出口 -->
<div class="content-wrapper" >
 <!-- Main content -->
 <router-view ></router-view>
 <!-- /.content -->
</div>

點(diǎn)擊設(shè)備目錄管理，catalog.vue的內(nèi)容就會(huì)出現(xiàn)在紅色框區(qū)域內(nèi)了

最后一步，我們需要一個(gè)退出功能，上一篇中我們把認(rèn)證憑證放在了localStorage中，那么在退出時(shí)我們就需要?jiǎng)h除localStorage中的信息，并且返回到登錄頁(yè)。我們?cè)谕顺霭粹o上綁定一個(gè)logout方法實(shí)現(xiàn)這個(gè)功能。

<!-- 綁定方法 -->
<div class="pull-right">
 <button v-on:click="logOut" class="btn btn-primary btn-flat ch">退出</button>
</div>

<!-- logout方法 -->
<script>
 export default {
 // name: 'app',
  data() {
   return {
    displayName: localStorage.userDisplayName,
   }
  },
  methods: {
    logOut: function(){
     localStorage.clear();
     this.$router.push('login')
    }
   }
 }
</script>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

以上就是如何在Vue中使用AdminLTE模板，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：如何在Vue中使用AdminLTE模板
分享URL：http://aaarwkj.com/article26/pchijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、用戶(hù)體驗(yàn)、電子商務(wù)、網(wǎng)站收錄、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)