vue2+element 管理後臺 集成解決方案 沒有沒作的，只要想不到的！

完整項目地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼後臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼後臺 系列二（登陸權限篇）
系類文章三：手摸手，帶你用vue擼後臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)

前言

這半年來一直在用vue寫管理後臺，目先後臺已經有七十多個頁面，十幾種權限，但維護成本依然很低，效率依然很高，因此準備開源分享一下後臺開發的經驗和成果。目前的技術棧主要的採用vue+element+axios.因爲是我的項目，因此數據請求都是用了mockjs代替。

後續會出一系列的教程配套文章，如如何從零構建後臺項目框架，如何作完整的用戶系統（如權限驗證，二次登陸等），如何二次開發組件（如富文本），如何整合七牛等等文章，各類後臺開發經驗等等。莫急~~

功能

• 登陸/註銷
• 權限驗證
• 側邊欄
• 麪包屑
• 富文本編輯器
• 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:9527

發佈

# 發佈測試環境 帶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存在全局，其它數據都由每一個業務頁面本身管理。

效果圖

兩步驗證登陸 支持微信和qq

)

真正的動態換膚

拖拽排序

上傳裁剪頭像

錯誤統計

富文本(整合七牛 打水印等個性化功能)

更多demo

佔坑

系類文章一