目錄

• +ElementUI的後臺管理框架
• 那什麼是ElementUI？
• vue-element-admin 是一個後臺前端解決方案
• 路由和配置左側選單

新開發的一個後臺管理系統。在框架上，領導要用AdminLTE這套模板。這個其實很簡單，把該引入的樣式和檔案引入就可以了。這裡就不多贅述了。可以參考官網：https://adminlte.io/

效果圖，如下：

AdminLTE這個模板，還是很方便的。有興趣的大家可以自行去琢磨。我只是把這個模板內嵌到新系統中去，也就沒多去研究了。

AdminLTE這個就告一段落。下面來說說今天的主題，Vue+ElementUI的後臺管理框架。

Vue+ElementUI的後臺管理框架

首先我們要先了解，什麼是Vue？Vue官網：https://cn.vuejs.org/

Vue官網中對Vue的解釋：

　　Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

那什麼是ElementUI？

據聽說是餓了麼公司開發的一套UI元件，具體的我也不太清楚，這是ElementUI中文官網：https://element.eleme.cn/

在官方文件上，ElementUI給出了其設計原則：

　　1、一致 Consistency

　　　　與現實生活一致：與現實生活的流程、邏輯保持一致，遵循使用者習慣的語言和概念；

　　　　在介面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖示和文字、元素的位置等。

　　2、反饋Feedback

　　　　控制反饋：通過介面樣式和互動動效讓使用者可以清晰的感知自己的操作；

　　　　頁面反饋FSKdw：操作後，通過頁面元素的變化清晰地展現當前狀態。

　　3、效率Efficiency

　　　　簡化流程：設計簡潔直觀的操作流程

　　　　清晰明確：語言表達清晰且表意明確，讓使用者快速理解進而作出決策

　　　　幫助使用者識別：介面簡單直白，讓使用者快速之別而非回憶，減少使用者記憶負擔。

　　4、可控Controllability

　　　　使用者決策：根據場景可給予使用者操作建議或安全提示，但不能代替使用者進行決策；

　　　　結果可控：使用者可以自由的進行操作，包括撤銷、回退和終止當前操作等。

這些都在官網上有介紹。

vue-element-admin 是一個後臺前端解決方案

　　既然這個是基於Vue+ElementUI開發的，所以Vue的一些前端準備還是需要的，可以在之前的隨筆中去檢視，點選這裡

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

　　vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內建了 i18 國際化解決方案，動態路由，許可權驗證，提煉了典型的業務模型，提供了豐富的功能元件，它可以幫助你快速搭建企業級中後臺產品原型。

　　這個專案的定位是後臺整合方案，不太適合當基礎模板來進行二次開發。因為本專案集成了很多你可能用不到的功能，會造成不少的程式碼冗餘。如果你的專案不關注這方面的問題，也可以直接基於它進行二次開發。

安裝Git和下載Demo

到這個地址 https://git-scm.com/download/win去下載並且安裝Git

下載好Git之後，就可以從Git上拉去程式碼了

git clone https://.com/PanJiaChen/vue-element-ad客棧min.git

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

下載下來，專案的目錄結構就是這個樣子

安裝依賴：

npm install

建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題

npm install --registry=htt程式設計客棧ps://registry.npm.taobao.org

首先要確保自己電腦上又安裝了Node.js的環境。可以自行去官網上去下載。

本地開發，啟動專案

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

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

登入進去就可以看到如下介面：這個介面還是挺漂亮的

路由和配置左側選單

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

路由允許我們通過不同的 URL 訪問不同的內容。該 URL 可以是我們自己設定的,在專案中並沒有這樣的資料夾,這種功能就是路由.

　　路由的本質是hash值!

　　vue 中的路由設定分為四步曲 :

　　　　定 : 定義路由元件

　　　 配 : 配置路由

　　　　實 : 例項化路由

　　　　掛 : 掛載路由

　　用 Vue.js + Vue Router 建立單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 新增進來，我們需要做的是，將元件 (components) 對映到路由 (routes)，然後程式設計客棧告訴 Vue Router 在哪裡渲染它們。

路由放在src->router->index.js中，還有一個views資料夾，當然是放這些頁面的啦~

首先，我們要了解一些這個專案中配置路由時提供了哪些配置項

//當設定 true 的時候該路由不會再側邊欄出現 如401，login等頁面，或者如一些編輯頁面/edit/1
hidden: true // (預設 false)

//當設定 noRedirect 的時候該路由在麵包屑導航中不可被點選
redirect: 'noRedirect'

//當你一個路由下面的 children 宣告的路由大於1個時，自動會變成巢狀的模式--如元件頁面
//只有一個時，會將那個子路由當做根路由顯示在側邊欄--如引導頁面
//若你想不管路由下面的 children 宣告的個數都顯示你的根路由
//你可以設定 alwaysShow: true，這樣它就會忽略之前定義的規則，一直顯示根路由
alwaysShow: true

name: 'router-name' //設定路由的名字，一定要填寫不然使用<keep-alive>時會出現各種問題
meta: {
  roles: ['admin','editor'] //設定該路由進入的許可權，支援多個許可權疊加
  title: 'title' //設定該路由在側邊欄和麵包屑中展示的名字
  icon: 'svg-name' //設定該路由的圖示
  noCache: true //如果設定為true，則不會被 <keep-alive> 快取(預設 false)
  breadcrumb: false // 如果設定為false，則不會在breadcrumb麵包屑中顯示
}

所以，我們只需要在路由中對應的位置加上自己的選單選項就可以了

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

這時就可以在選單欄看到自己增加的選單項了。

到此這篇關於Vue+Element的後臺管理框架的整合實踐的文章就介紹到這了,更多相關Vue Element後臺管理框架內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！