bin-admin 後臺管理系統腳手架

預覽

本項目是基於 Vue2.6，配合使用 bin-ui 做爲組件庫來進行搭建wcm後臺管理系統，在基於vue-admin1.0 版本基礎上進行二次重構，增長了登陸的token驗證和簡單主題配置功能，目前暫時爲2.0.0版本初稿，後續會進行持續更新。

功能概述

- 全局功能
  - 動態側邊欄（支持多級路由嵌套）
  - 動態麪包屑
  - 快捷導航(標籤頁)
  - 阿里iconfont圖標嵌入
  - Easy-Mock數據
  - 自適應收縮側邊欄
    
- 錯誤頁面
  - 401
  - 403
  - 404
  - 500

- 組件
  - 按鈕組
  - ECharts 圖表
  - Divider 分割線
  - Drawer 抽屜
  - 標題欄、文本欄
  - SplitPane 分隔區塊
  - Tinymce 富文本封裝
複製代碼

注：僅列舉部分組件和功能

環境搭建

須要在本地安裝 node 和 vue-cli3。本項目技術棧基於 ES6、 vue、 vuex、 vue-router、 axios、 bin-ui 學習相關內容在開發項目時將會頗有幫助。

此外，爲實現圖表、加載進度，請求參數轉換，數字累加等功能，本項目還安裝依賴了一些輔助庫， 如 echarts、 qs、 vue-count-to good-storage、等。

全部的請求數據都使用Easy-Mock模擬

目錄結構

整個項目的目錄結構以下，具體包含內容後續會進行詳細介紹和解釋

├── docs                       // 文檔目錄
├── public                     // 公共資源，第三方,不打包資源
├── src                        // 源代碼
│   ├── api                    // 全部請求相關資源
│   ├── assets                 // 靜態資源，會打包的資源
│   ├── components             // 全局公用組件
│   ├── config                 // 自定義配置參數
│   ├── layout                 // 全局佈局和相關組件
│   ├── mock                   // mock server 數據
│   ├── plugin                 // 自定義插件，注入指令，全局mixin
│   ├── router                 // 路由
│   ├── store                  // 全局 store 
│   ├── utils                  // 全局工具包
│   ├── views                  // views 全部頁面
│   ├── App.vue                // 入口頁面
│   └── main.js                // 入口文件 加載組件 初始化等
├── .eslintrc.js               // eslint 配置項
├── .gitignore                 // git 忽略項
├── babel.config.js            // babel 配置項
├── vue.config.js              // vue-cli3集成配置項
└── package.json               // package.json
複製代碼

安裝

# 克隆項目
git clone https://github.com/wangbin3162/bin-admin.git

# 安裝依賴
npm install

# 本地開發 啓動項目
npm run serve
# OR vue ui 圖形化界面啓動
vue ui
複製代碼

實際工做中可直接克隆在此基礎包中進行開發。

文檔持續更新中...