線上地址

前言

這半年來一直在用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

釋出

    # 釋出測試環境 帶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

真正的動態換膚

可收起側邊欄

拖拽排序

上傳裁剪頭像

錯誤統計

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

封裝table元件

圖表

匯出excel

佔坑

系列文章一

相應廣大需求 建了一個qq群 591724180 方便大家交流