Vue+ElementUI的後臺管理框架

新開發的一個後臺管理系統。在框架上，領導要用AdminLTE這套模板。這個其實很簡單，把該引入的樣式和js文件引入就能夠了。這裏就很少贅述了。有興趣的能夠參考：https://www.jianshu.com/p/e80b1f5001eb，或者能夠參考官網：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/#/zh-CN

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

　　一、一致 Consistency

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

　　　　在界面中一致：全部的元素和結構需保持一致，好比：設計樣式、圖標和文本、元素的位置等。

　　二、反饋Feedback

　　　　控制反饋：經過界面樣式和交互動效讓用戶能夠清晰的感知本身的操做；

　　　　頁面反饋：操做後，經過頁面元素的變化清晰地展示當前狀態。

　　三、效率Efficiency

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

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

　　　　幫助用戶識別：界面簡單直白，讓用戶快速之別而非回憶，減小用戶記憶負擔。

　　四、可控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://github.com/PanJiaChen/vue-element-admin.git

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

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

安裝依賴：

npm install

建議不要用 cnpm 安裝 會有各類詭異的bug 能夠經過以下操做解決 npm 下載速度慢的問題

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

首先要確保本身電腦上又安裝了Node.js的環境。能夠自行去官網上去下載。

本地開發，啓動項目

npm run dev

若是前面步驟都正確，就能夠看到以下界面：

 

 登陸進去就能夠看到以下界面：這個界面仍是挺漂亮的

 

 路由和配置左側菜單

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

路由容許咱們經過不一樣的 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'),
        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  }
      }
    ]
  },

這時就能夠在菜單欄看到本身增長的菜單項了。