基於Vue.js 2.x系列 + Element UI + RBAC/AUTH權限 的響應式後臺管理系統

項目全面更新 https://segmentfault.com/a/11...

前言

項目前端地址: https://github.com/lmxdawn/vu...php

項目後端地址: https://github.com/lmxdawn/vu...css

歡迎你們的starhtml

20180519 更新

此次加了一個通宵班, 沒辦法強迫症。前端

  • 1.增長文件上傳插件,主要用於管理後臺的資源,以前咱們運營是每次都要去上傳文件,而有了這個插件管理,就能夠不用上傳重複的資源。上傳插件實現了把漢字自動轉成拼音(都知道中文路徑時不友好的)。現目前上傳的文件沒有用數據庫來管理,而是直接用獲取文件的形式,也是偷懶,有時間再實現吧。

廢話很少說,貼圖

圖片描述

20180428 更新

  • 1.增長 mock 模擬數據。注意(改成API接口數據時必定要把 main.js 裏面引入的 mock.js 刪掉)
  • 2.增長左側導航欄的左右收折功能,特別注意一點就是 因爲 element-ui 的導航菜單的緣由,在el-submenu 外層加了 div 時,收折就隱藏不了文字,因此要本身加上 css 樣式,放在 base.scss 下面
// 左側導航欄的摺疊後的樣式
.slide-hide {
    .el-menu--collapse {
        .el-submenu {
            .el-submenu__title {
                span {
                    height: 0;
                    width: 0;
                    overflow: hidden;
                    visibility: hidden;
                    display: inline-block;
                }
                .el-submenu__icon-arrow {
                    display: none;
                }
            }
        }
        .el-menu-item {
            .el-tooltip {
                span {
                    height: 0;
                    width: 0;
                    overflow: hidden;
                    visibility: hidden;
                    display: inline-block;
                }
            }
        }
    }
}

效果以下:
圖片描述圖片描述vue

PC版

donate

手機版

圖片描述圖片描述

功能

  • [x] 管理員登陸
  • [x] 登陸
  • [x] 修改密碼
  • [x] 角色管理
  • [x] 權限管理
  • [x] 401/404錯誤頁面
  • [x] 動態麪包屑
  • [x] 動態側邊欄

安裝步驟

git clone https://github.com/lmxdawn/vue-admin-html.git      // 把模板下載到本地
cd vue-admin-html    // 進入模板目錄
npm install         // 安裝項目依賴,等待安裝完成以後

本地開發

// 開啓服務器,瀏覽器訪問 http://localhost:8080
npm run dev

構建生產

// 執行構建命令,生成的dist文件夾放在服務器下便可訪問
npm run build

用到的東西

  • icon 圖標: 用阿里巴巴矢量圖標庫,地址 http://www.iconfont.cn 怎麼下載圖標及下載 自行百度,圖標放在 src/assets/icons 目錄下面,把 iconfont 裏建立的項目圖標如今 解壓後直接放入 這個目錄便可,值得注意的是,由於採用了 eslint ,因此 iconfont.js 頭部要加 /*eslint-disable */ 忽略錯誤

Online Demo

(建議使用最新版Chrome瀏覽器)
在線 Demogit

寫在最後

一些文章地址:
VUE後臺管理的文章github

相關文章
相關標籤/搜索