Vue-cli3.0 + Element UI + ThinkPHP5.1 + RBAC權限 + 響應式的後臺管理系統

前言

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

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

以爲有用請 star

目前 v3.0.0 版本 點擊前往 v1.0.0 版本

更新日誌

• [x] 更新vue-cli爲3.0版本 這裏有篇文章
• [x] 增長上傳插件
• [x] 增長廣告管理
• [x] 優化路由控制
• [x] 優化一些配置文件
• [x] 登陸用戶信息存儲改成 cookie

一鍵操做包 點擊下載

1. 集成環境搭建: windows 上面建議用 phpstudy ,其它環境自行百度
2. 把兩個文件放到網站根目錄
3. 把MySQL的root密碼改成 root, 再新建數據庫 vue-admin ,再把vue-admin.sql 文件導入到MySQL
4. 打開瀏覽器 輸入 http://localhost/vue-admin-ht...

v3.0.0 踩過的坑

1. 此次更新後 vuex 開啓嚴格模式後，出現淺拷貝的問題，就是變量引用的問題 這裏有篇文章
2. 還有就是路由導入某個文件時要在文件頭部引入具體的某個文件，不用 resolve => require(['xx.vue'], resolve) 或者 () => import('xx.vue') 這種方式， 這兩種方式都有可能出現循環引用的錯誤！ throw new Error('Cyclic dependency' + nodeRep)

vue-admin-html

Vue-cli3.0 + Element UI + ThinkPHP5.1 + RBAC權限 + 響應式的後臺管理系統

權限演示

路由規則圖示

路徑: vue-admin-html/src/router/index.js

env 配置說明

路徑: vue-admin-html/.env.development

手機版演示

上傳插件演示

添加 阿里巴巴矢量圖演示

路徑: vue-admin-html/src/assets/icons 注意 vue-admin-html/src/assets/icons/iconfont.js 頭部須要加 /* eslint-disable */ 去掉 eslint 檢查

1.第一步 選好一個圖標加入到購物車 -> 把購物車的添加都項目 -> 下載項目到本地

2.第二步 解壓下載好的文件 -> 複製到 src/assets/icons , 覆蓋掉 -> 增長 iconfont.js 的 eslint 註釋

功能

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

安裝步驟

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

構建時三種環境可選，解決不一樣環境來回切換配置的痛楚（serve：本地測試，stage：預上線，build：生產環境）

本地開發

// 開啓服務器，瀏覽器訪問 http://localhost:8080
npm 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                           // 構建項目的配置文件

Online Demo

（建議使用最新版Chrome瀏覽器）
在線 Demo

Donate

鼓勵鼓勵鼓勵，重要的事情說三遍

License

MIT

Copyright (c) 2018 lmxdawn