vue2+element 管理後臺 整合解決方案 沒有沒做的，只要想不到的

John的WEB前端學習日記發表於2017-04-25
Vue

線上地址

前言

這半年來一直在用vue寫管理後臺，目前後臺已經有七十多個頁面，十幾種許可權，但維護成本依然很低，效率依然很高，所以準備開源分享一下後臺開發的經驗和成果。目前的技術棧主要的採用vue+element+axios.由於是個人專案，所以資料請求都是用了mockjs代替。

後續會出一系列的教程配套文章，如如何從零構建後臺專案框架，如何做完整的使用者系統（如許可權驗證，二次登入等），如何二次開發元件（如富文字），如何整合七牛等等文章，各種後臺開發經驗等等。莫急~~

功能

  • 登入/登出
  • 許可權驗證
  • 側邊欄
  • 麵包屑
  • 富文字編輯器
  • Markdown編輯器
  • JSON編輯器
  • 列表拖拽
  • plitPane
  • Dropzone
  • Sticky
  • CountTo
  • echarts圖表
  • 401，401錯誤頁面
  • 錯誤日誌
  • 匯出excel
  • table example
  • form example
  • 多環境釋出
  • dashboard
  • 二次登入
  • 動態側邊欄
  • mock資料

開發

    # 克隆專案
    git clone https://github.com/PanJiaChen/vue-element-admin.git

    # 安裝依賴
    npm install

    # 本地開發 開啟服務
    npm run build

瀏覽器訪問 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

 

相關文章