vue-admin 基于Vue.js 2.x系列 + Element UI + RBAC/AUTH權限 的背景管理系統
vue-admin登入頁面
vue-admin背景展示
vue-admin前後端分離，有PHP和Java兩個版本
項目PHP前端位址： https://github.com/lmxdawn/vue-admin-html
項目JAVA前端位址： https://github.com/lmxdawn/vue-admin-html-java
項目JAVA後端位址： https://github.com/lmxdawn/vue-admin-java
項目PHP後端位址： https://github.com/lmxdawn/vue-admin-php
線上Demo位址：https://lmxdawn.github.io/vue-admin/
功能
- 管理者登入
- 登入
- 修改密碼
- 角色管理
- 權限管理
- 401/404錯誤頁面
- 動态面包屑
- 動态側邊欄
- 廣告管理
安裝步驟
git clone https://github.com/lmxdawn/vue-admin-html.git // 把模闆下載下傳到本地cd vue-admin-html // 進入模闆目錄npm install // 安裝項目依賴，等待安裝完成之後建構時三種環境可選，解決不同環境來回切換配置的痛楚(serve：本地測試，stage：預上線，build：生産環境)
本地開發
// 開啟伺服器，浏覽器通路 http://localhost:8080npm run serve
建構預上線
// 執行建構指令，生成的stage檔案夾放在伺服器下即可通路npm run stage
建構生産
// 執行建構指令，生成的dist檔案夾放在伺服器下即可通路npm run build
項目目錄介紹
├── LICENSE // 版權許可檔案├── README.md // 文檔├── babel.config.js // babel 插件配置 ├── jest.config.js // jest 測試配置 ├── package-lock.json // 鎖定目前安裝的擴充包的版本├── package.json // 聲明引用了哪些擴充包├── public // 公共檔案│ ├── favicon.ico // 圖示│ └── index.html // 入口檔案├── src // src 主要代碼檔案│ ├── App.vue // Vue 入口檔案│ ├── api // API 接口邏輯檔案│ │ ├── ad // 廣告相關│ │ │ ├── ad.js // 廣告│ │ │ └── adSite.js // 廣告位│ │ ├── auth // 權限相關│ │ │ ├── authAdmin.js // 權限使用者│ │ │ ├── authPermissionRule.js // 權限│ │ │ └── authRole.js // 角色│ │ ├── fileResource.js // 檔案資源│ │ ├── fileResourceTag.js // 檔案資源的标簽│ │ ├── login.js // 登入相關│ │ └── upload.js // 舊版本上傳插件的接口│ ├── assets // 資源檔案│ │ ├── icons // 圖示(使用的是 阿裡巴巴矢量圖示庫)│ │ │ ├── demo.css // demo 樣式│ │ │ ├── demo_fontclass.html // demo HTML│ │ │ ├── demo_symbol.html // demo│ │ │ ├── demo_unicode.html // demo│ │ │ ├── iconfont.css // css│ │ │ ├── iconfont.eot // │ │ │ ├── iconfont.js // js 檔案│ │ │ ├── iconfont.svg // svg 檔案│ │ │ ├── iconfont.ttf // 字型檔案│ │ │ └── iconfont.woff // 字型檔案│ │ ├── image // 資源圖檔檔案│ │ │ └── file_type_icon.png // 檔案圖示檔案│ │ └── logo.png // logo│ ├── components // 元件目錄│ │ ├── HelloWorld.vue // 測試檔案│ │ └── common // 公共元件│ │ ├── FileResource.vue // 上傳資源的元件│ │ ├── IconSvg.vue // 圖示元件│ │ └── UploadFile.vue // 舊版上傳檔案的元件│ ├── config // 自定義的配置│ │ └── app.js // 項目的配置│ ├── constants // 項目的常量目錄│ ├── element.js // 引入 element-ui 的js檔案 (這個也可直接寫在 main.js 裡面)│ ├── filtres // 過濾器目錄│ │ └── index.js // 全局過濾器│ ├── main.js // 主入口│ ├── mock // 模拟資料│ │ ├── authAdmin.js // 權限使用者的資料│ │ ├── authPermissionRule.js // 權限的資料│ │ ├── authRole.js // 角色資料│ │ ├── fileResource.js // 上傳資源的資料│ │ ├── fileResourceTag.js // 上傳資源的分組資料│ │ ├── index.js // 引入 mockjs 的檔案│ │ ├── login.js // 登入的資料│ │ └── upload.js // 舊版上傳檔案的資料│ ├── role.js // 動态上傳 router 路由的主要檔案, 并且初始化權限, 檢測權限│ ├── router // 路由相關目錄│ │ └── index.js // 路由主檔案│ ├── store // vuex 狀态 目錄│ │ ├── actions.js // Action│ │ ├── getters.js // Getter│ │ ├── index.js // 入口│ │ ├── modules // 子產品│ │ │ ├── admin.js // Admin 使用者相關│ │ │ └── app.js // APP 項目相關│ │ └── mutation-types.js // Mutation│ ├── styles // 樣式目錄│ │ ├── base.scss // 基礎樣式│ │ └── mixin.scss // 基礎方法的樣式│ ├── utils // 工具目錄│ │ ├── auth.js // 權限工具│ │ ├── axios.js // request 請求工具│ │ ├── haiZiToPinYin.js // 漢字轉拼音的工具│ │ └── store.js // 存放資訊的工具│ └── views // 頁面目錄│ ├── adManage // 廣告管理│ │ ├── ad.vue // 廣告│ │ └── adSite.vue // 廣告位│ ├── components // 應用示範│ │ └── uploadList.vue // 上傳插件│ ├── error // 錯誤頁面目錄│ │ ├── err401.vue // 401│ │ ├── err404.vue // 404頁面│ │ └── err500.vue // 500頁面│ ├── home // 首頁目錄│ │ ├── SidebarItem.vue // 左邊欄│ │ ├── TabsView.vue // 頂部tabs│ │ ├── index.vue // 入口│ │ └── main.vue // 前言│ ├── login // 登入相關│ │ └── index.vue // 登入首頁│ ├── profile // 測試│ │ └── index.vue │ └── userManage // 使用者相關│ └── admin // 管理者相關│ ├── authAdmin.vue // 權限使用者│ ├── authPermissionRule.vue // 權限│ ├── authRole.vue // 角色│ └── router.vue // 路由檔案├── tests // 測試│ └── unit │ └── HelloWorld.spec.js └── vue.config.js // 建構項目的配置檔案