完整項目地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼後臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼後臺 系列二（登陸權限篇）
系類文章三：手摸手，帶你用vue擼後臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)jquery
前言
這半年來一直在用vue寫管理後臺，目先後臺已經有七十多個頁面，十幾種權限，但維護成本依然很低，效率依然很高，因此準備開源分享一下後臺開發的經驗和成果。目前的技術棧主要的採用vue+element+axios.因爲是我的項目，因此數據請求都是用了mockjs代替。
後續會出一系列的教程配套文章，如如何從零構建後臺項目框架，如何作完整的用戶系統（如權限驗證，二次登陸等），如何二次開發組件（如富文本），如何整合七牛等等文章，各類後臺開發經驗等等。莫急~~webpack
功能
- 登陸/註銷
- 權限驗證
- 側邊欄
- 麪包屑
- 富文本編輯器
- Markdown編輯器
- JSON編輯器
- 列表拖拽
- plitPane
- Dropzone
- Sticky
- CountTo
- echarts圖表
- 401，401錯誤頁面
- 錯誤日誌
- 導出excel
- table example
- form example
- 多環境發佈
- dashboard
- 二次登陸
- 動態側邊欄
- mock數據
- svg iconfont
開發
# 克隆項目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 安裝依賴 npm install # 本地開發 開啓服務 npm run dev
瀏覽器訪問 http://localhost:9527ios
發佈
# 發佈測試環境 帶webpack ananalyzer npm run build:sit-preview # 構建生成環境 npm run build:prod
目錄結構
├── build // 構建相關 ├── config // 配置相關 ├── src // 源代碼 │ ├── api // 因此請求 │ ├── assets // 主題 字體等靜態資源 │ ├── components // 全局公用組件 │ ├── directive // 全局指令 │ ├── filtres // 全局filter │ ├── mock // mock數據 │ ├── router // 路由 │ ├── store // 全局store管理 │ ├── styles // 全局樣式 │ ├── utils // 全局公用方法 │ ├── view // view │ ├── App.vue // 入口頁面 │ └── main.js // 入口 加載組件 初始化等 ├── static // 第三方不打包資源 │ ├── jquery │ └── Tinymce // 富文本 ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置項 ├── .gitignore // git 忽略項 ├── favicon.ico // favicon圖標 ├── index.html // html模板 └── package.json // package.json
狀態管理
後臺只有user和app配置相關狀態使用vuex存在全局，其它數據都由每一個業務頁面本身管理。git
效果圖
兩步驗證登陸 支持微信和qq
)github
真正的動態換膚
拖拽排序
上傳裁剪頭像
錯誤統計
富文本(整合七牛 打水印等個性化功能)
更多demo
佔坑
系類文章一web