在開發中后臺管理系統時,我們經常會遇到需要從頭開始構建的問題。為了解決這個問題,我們可以使用開源的中后臺管理系統來幫助我們快速搭建出基本的功能框架。在本文中,我們將介紹兩個非常流行的開源后臺管理系統:vue3-basic-admin 和 vue-antd-admin。

vue3-basic-admin

vue3-basic-admin 是一個開源、開箱即用的中后臺管理系統,它采用了以下主流技術進行開發:Vue3、Vite、Element-Plus、TypeScript 和 Pinia。該項目內置了許多開箱即用的組件,能夠幫助您快速構建中后臺管理系統。目前,該項目已被完全開源,在使用過程中如果覺得對您有所幫助,不妨點一個star來表達支持。如果您有一定的經濟能力,也可以為作者請一杯咖啡,畢竟開源并非易事。歡迎預覽和使用該項目。

前序準備

該項目是基于 Vue3、Vue CLI 4、Vuex、Ant Design Vue 和 Axios 進行開發的。數據模擬方面采用了 Mock.js,后期打算使用 Node.js 來編寫后臺。此外,通過對 Webpack 進行優化,首屏加載速度更快。系統內置了常用的數據可視化圖表展示工具 ECharts 和地圖展示工具 ArcGIS。還使用了 Jest 進行單元測試,目前測試覆蓋率還比較低,有時間再進行補充。在格式化方面,采用了 ESLint 和 Prettier。

功能

  • 登錄:支持用戶名密碼登錄和手機號驗證碼登錄
  • 權限管理
  • 動態路由
  • ECharts 各種圖表展示
  • ArcGIS 地圖展示
  • 克里金插值分析圖
  • 全景圖
  • 富文本編輯器
  • Markdown 編輯器
  • 錯誤頁面:403、404、500 頁面
  • 個人設置
  • 系統設置
  • 更換主題
  • 提供兩種布局方式:左右布局和上下布局
  • 面包屑導航
  • 標簽頁
  • WebSocket
  • SVG 圖標
  • 全屏顯示
  • 返回頂部
  • Webpack 優化
  • 抽獎頁面
  • Table 表格
  • Form 表單
  • 上傳 Excel 文件
  • 上傳頭像并支持裁剪
  • HTMLCanvas2D 截屏功能
  • 封裝自定義 loading 組件

Webpack 優化

為了提升項目性能,vue3-basic-admin 做了以下幾個方面的優化:

  • 關閉生產環境的 sourceMap
  • 關閉預加載(Vue 會預加載后面的頁面,會導致首屏加載較慢)
  • 使用 Gzip 壓縮(需要在 Nginx 進行配置)
  • 生產環境使用 CDN 加載部分插件
  • 去除生產環境中的 console 和 debugger
  • 抽取公共代碼
  • 打包大小分析
  • 打包文件緩存
  • 部分依賴使用異步 CDN 加載

使用說明

  • 系統內置了三種角色權限:admin、test 和 editor,每個權限對應的路由和左側菜單不同
  • 在個人設置和右上角的設置中可以修改界面的個性化設置,如是否開啟標簽頁顯示、布局方式、主題顏色等
  • 系統管理員擁有所有權限,并且可以修改用戶相應的菜單路由和角色對應的權限。

文件目錄說明

在 vue3-basic-admin 的文件目錄結構如下:

├── mock                             ---mock模擬數據
├── public                           ---靜態資源文件
├── src          
│  ├── api                           ---接口       
│  ├── assets                        ---圖片
│  ├── components                    ---可復用的 Vue 組件
│  ├── layouts                       ---布局方式
│  ├── router                        ---路由
│  ├── store                         ---Vuex
│  ├── styles                        ---Sass 樣式
│  ├── utils                         ---方法函數
│  ├── vendor                        ---導出 Excel
│  ├── views                         ---頁面
│  ├── App.vue                       
│  ├── main.js            
│  ├── permission.js                 ---路由攔截           
├── tests                            ---單元測試文件
├── .browserslistrc
├── .env
├── .eslintrc.js
├── babel.config.js
├── .jest.config.js                  ---Jest 的配置
├── package.json
├── package-lock.json
├── README.md
└── vue.config.js                   ---Webpack 的配置

安裝

如果您希望使用 vue-antd-admin,可以按照以下步驟進行安裝:

  1. 進入項目目錄:cd vue-antd-admin
  2. 安裝依賴:npm install
  3. 啟動項目:npm run serve

部署

如果要部署 vue-antd-admin,請按照以下步驟進行操作:

  1. 打包項目:npm run build
  2. 運行單元測試:npm run test:unit

以上就是對 vue3-basic-admin 和 vue-antd-admin 這兩個后臺管理系統的簡介和說明。它們都提供了豐富的功能和快速搭建框架的能力,能夠為開發者節省寶貴的時間和精力。希望您在開發項目時能夠選擇適合自己需求的后臺管理系統,讓開發過程更加高效!