快捷導(dǎo)航

Vue+Element的后臺(tái)管理框架的整合實(shí)踐

更新時(shí)間：2021年09月07日 11:37:04 作者：冰樂(lè)

本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

新開(kāi)發(fā)的一個(gè)后臺(tái)管理系統(tǒng)。在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板。這個(gè)其實(shí)很簡(jiǎn)單，把該引入的樣式和js文件引入就可以了。這里就不多贅述了?？梢詤⒖脊倬W(wǎng)：https://adminlte.io/

效果圖，如下：

AdminLTE這個(gè)模板，還是很方便的。有興趣的大家可以自行去琢磨。我只是把這個(gè)模板內(nèi)嵌到新系統(tǒng)中去，也就沒(méi)多去研究了。

AdminLTE這個(gè)就告一段落。下面來(lái)說(shuō)說(shuō)今天的主題，Vue+ElementUI的后臺(tái)管理框架。

Vue+ElementUI的后臺(tái)管理框架

首先我們要先了解，什么是Vue？Vue官網(wǎng)：https://cn.vuejs.org/

Vue官網(wǎng)中對(duì)Vue的解釋：

　　Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

那什么是ElementUI？

據(jù)聽(tīng)說(shuō)是餓了么公司開(kāi)發(fā)的一套UI組件，具體的我也不太清楚，這是ElementUI中文官網(wǎng)：https://element.eleme.cn/

在官方文檔上，ElementUI給出了其設(shè)計(jì)原則：

　　1、一致 Consistency

　　　　與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語(yǔ)言和概念；

　　　　在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。

　　2、反饋Feedback

　　　　控制反饋：通過(guò)界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；

　　　　頁(yè)面反饋：操作后，通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。

　　3、效率Efficiency

　　　　簡(jiǎn)化流程：設(shè)計(jì)簡(jiǎn)潔直觀的操作流程

　　　　清晰明確：語(yǔ)言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策

　　　　幫助用戶識(shí)別：界面簡(jiǎn)單直白，讓用戶快速之別而非回憶，減少用戶記憶負(fù)擔(dān)。

　　4、可控Controllability

　　　　用戶決策：根據(jù)場(chǎng)景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；

　　　　結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。

這些都在官網(wǎng)上有介紹。

vue-element-admin 是一個(gè)后臺(tái)前端解決方案

　　既然這個(gè)是基于Vue+ElementUI開(kāi)發(fā)的，所以Vue的一些前端準(zhǔn)備還是需要的，可以在之前的隨筆中去查看，點(diǎn)擊這里

　　中文官方幫助文檔https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

　　vue-element-admin 是一個(gè)后臺(tái)前端解決方案，它基于 vue 和 element-ui實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。

　　這個(gè)項(xiàng)目的定位是后臺(tái)集成方案，不太適合當(dāng)基礎(chǔ)模板來(lái)進(jìn)行二次開(kāi)發(fā)。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能，會(huì)造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問(wèn)題，也可以直接基于它進(jìn)行二次開(kāi)發(fā)。

安裝Git和下載Demo

到這個(gè)地址 https://git-scm.com/download/win去下載并且安裝Git

下載好Git之后，就可以從Git上拉去代碼了

git clone https://github.com/PanJiaChen/vue-element-admin.git

或者，直接在Git上下載壓縮包也是可以的https://github.com/PanJiaChen/vue-element-admin.git

下載下來(lái)，項(xiàng)目的目錄結(jié)構(gòu)就是這個(gè)樣子

安裝依賴：

npm install

建議不要用 cnpm 安裝會(huì)有各種詭異的bug 可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題

npm install --registry=https://registry.npm.taobao.org

首先要確保自己電腦上又安裝了Node.js的環(huán)境?？梢宰孕腥ス倬W(wǎng)上去下載。

本地開(kāi)發(fā)，啟動(dòng)項(xiàng)目

vue cli 2 是 npm run dev ，cli 3 是npm run serve

如果前面步驟都正確，就可以看到如下界面：

登錄進(jìn)去就可以看到如下界面：這個(gè)界面還是挺漂亮的

路由和配置左側(cè)菜單

什么是路由呢？可以參照下官方的解釋：https://router.vuejs.org/zh/guide/

路由允許我們通過(guò)不同的 URL 訪問(wèn)不同的內(nèi)容。該 URL 可以是我們自己設(shè)置的,在項(xiàng)目中并沒(méi)有這樣的文件夾,這種功能就是路由.

　　路由的本質(zhì)是hash值!

　　vue 中的路由設(shè)置分為四步曲 :

　　　　定 : 定義路由組件

　　　配 : 配置路由

　　　　實(shí) : 實(shí)例化路由

　　　　掛 : 掛載路由

　　用 Vue.js + Vue Router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 Vue Router 添加進(jìn)來(lái)，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。

路由放在src->router->index.js中，還有一個(gè)views文件夾，當(dāng)然是放這些頁(yè)面的啦~

首先，我們要了解一些這個(gè)項(xiàng)目中配置路由時(shí)提供了哪些配置項(xiàng)

//當(dāng)設(shè)置 true 的時(shí)候該路由不會(huì)再側(cè)邊欄出現(xiàn) 如401，login等頁(yè)面，或者如一些編輯頁(yè)面/edit/1
hidden: true // (默認(rèn) false)

//當(dāng)設(shè)置 noRedirect 的時(shí)候該路由在面包屑導(dǎo)航中不可被點(diǎn)擊
redirect: 'noRedirect'

//當(dāng)你一個(gè)路由下面的 children 聲明的路由大于1個(gè)時(shí)，自動(dòng)會(huì)變成嵌套的模式--如組件頁(yè)面
//只有一個(gè)時(shí)，會(huì)將那個(gè)子路由當(dāng)做根路由顯示在側(cè)邊欄--如引導(dǎo)頁(yè)面
//若你想不管路由下面的 children 聲明的個(gè)數(shù)都顯示你的根路由
//你可以設(shè)置 alwaysShow: true，這樣它就會(huì)忽略之前定義的規(guī)則，一直顯示根路由
alwaysShow: true

name: 'router-name' //設(shè)定路由的名字，一定要填寫(xiě)不然使用<keep-alive>時(shí)會(huì)出現(xiàn)各種問(wèn)題
meta: {
  roles: ['admin', 'editor'] //設(shè)置該路由進(jìn)入的權(quán)限，支持多個(gè)權(quán)限疊加
  title: 'title' //設(shè)置該路由在側(cè)邊欄和面包屑中展示的名字
  icon: 'svg-name' //設(shè)置該路由的圖標(biāo)
  noCache: true //如果設(shè)置為true，則不會(huì)被 <keep-alive> 緩存(默認(rèn) false)
  breadcrumb: false // 如果設(shè)置為false，則不會(huì)在breadcrumb面包屑中顯示
}

所以，我們只需要在路由中對(duì)應(yīng)的位置加上自己的菜單選項(xiàng)就可以了

{
    path: '/bingle',
    component: Layout,
    redirect: '/bingle/index',
    name: 'bingle',
    meta: {
      title: 'BingleTestMainMenu',
      icon: 'example'
    },
    children: [
      {
        path: 'bingle',
        component: () => import('@/views/dashboard/index'),
        name: 'bingle',
        meta: { title: 'BingleSubmenu1', icon: 'guide', noCache: true,affix: true  }
      },
      {
        path: 'bingle1',
        component: () => import('@/views/dashboard/index'),
        name: 'bingle2',
        meta: { title: 'BingleSubmenu2', icon: 'guide', noCache: true,affix: true  }
      }
    ]
  },

這時(shí)就可以在菜單欄看到自己增加的菜單項(xiàng)了。