兼容移動(dòng)端！一款開(kāi)源免費(fèi)的中后臺(tái)管理系統(tǒng)模版！

vue-pure-admin —— 一款開(kāi)源免費(fèi)且開(kāi)箱即用的中后臺(tái)管理系統(tǒng)模版，完全采用 ECMAScript 模塊（ESM）規(guī)范來(lái)編寫(xiě)和組織代碼，使用了最新的 Vue3 主流技術(shù)開(kāi)發(fā)。

大家好，我是 Java陳序員。

你是否還在為搭建中后臺(tái)管理系統(tǒng)從零開(kāi)始編寫(xiě)代碼而煩惱嗎？

今天給大家推薦一款開(kāi)源免費(fèi)且功能強(qiáng)大的中后臺(tái)管理系統(tǒng)模板，兼容移動(dòng)端！

關(guān)注微信公眾號(hào)：【Java陳序員】，獲取開(kāi)源項(xiàng)目分享、AI副業(yè)分享、超200本經(jīng)典計(jì)算機(jī)電子書(shū)籍等。

項(xiàng)目介紹

vue-pure-admin —— 一款開(kāi)源免費(fèi)且開(kāi)箱即用的中后臺(tái)管理系統(tǒng)模版，完全采用 ECMAScript 模塊（ESM）規(guī)范來(lái)編寫(xiě)和組織代碼，使用了最新的 Vue3 主流技術(shù)開(kāi)發(fā)。

功能特色：

• 穩(wěn)定最新的技術(shù)棧：基于 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技術(shù)開(kāi)發(fā)
• 內(nèi)置豐富的組件：除了提供顏色選擇器、日期選擇器、時(shí)間選擇器、進(jìn)度條、折疊面板等多種常用急促組件示例，并且集成代碼編輯器（CodeMirror）、Markdown 編輯器、JSON 編輯器、表單設(shè)計(jì)器等組件
• 高度可配置的主題：支持高度可配置的主題以及暗黑主題適配，并且提供左側(cè)、頂部、混合、雙欄四種菜單布局模式
• 完善的系統(tǒng)管理模塊：提供包含用戶(hù)管理、角色管理、部門(mén)管理等基礎(chǔ)權(quán)限管理功能，支持菜單權(quán)限配置
• 輕量高效：提供國(guó)際化和非國(guó)際化兩種精簡(jiǎn)版本，內(nèi)置完善的打包優(yōu)化方案，開(kāi)啟 brotli 壓縮和 cdn 替換本地庫(kù)模式后，可降至 350kb 以下
• 多場(chǎng)景適配：支持 PC 端、暗色風(fēng)格及移動(dòng)端適配，界面美觀，交互流暢

功能預(yù)覽

PC 端

暗黑版本

移動(dòng)端

本地開(kāi)發(fā)

依賴(lài) Node.js 環(huán)境。

1、克隆或下載項(xiàng)目源碼

git clone https://github.com/pure-admin/vue-pure-admin.git

2、代碼目錄結(jié)構(gòu)

├── .github  # GitHub 配置文件
│   ├── ISSUE_TEMPLATE  # 問(wèn)題提交參考模板
│   ├── workflows git  # 工作流
├── .husky  # 代碼提交前校驗(yàn)配置文件
├── .vscode  # IDE 工具推薦配置文件
│   │   ├── extensions.json  # 一鍵安裝平臺(tái)推薦的 vscode 插件
│   │   ├── settings.json  # 設(shè)置擴(kuò)展程序或 vscode 編輯器的一些屬性
│   │   ├── vue3.0.code-snippets  # vue3.0 代碼片段
│   │   └── vue3.2.code-snippets  # vue3.2 代碼片段
│   │   └── vue3.3.code-snippets  # vue3.3 代碼片段
├── build  # 構(gòu)建工具
│   │   ├── cdn.ts  # 打包時(shí)采用 cdn 模式
│   │   ├── compress.ts  # 打包時(shí)啟用 gzip 壓縮或 brotli 壓縮
│   │   ├── info.ts  # 輸出打包信息（大小、用時(shí)）
│   │   ├── optimize.ts  # vite 依賴(lài)預(yù)構(gòu)建配置項(xiàng)
│   │   ├── plugins.ts  # vite 相關(guān)插件存放處
│   │   ├── utils.ts  # 構(gòu)建工具常用方法抽離
├── locales  # 國(guó)際化文件存放處
│   │   ├── en.yaml  # 英文配置
│   │   ├── zh-CN.yaml  # 中文配置
├── mock  # mock 模擬后臺(tái)數(shù)據(jù)
│   │   ├── asyncRoutes.ts  # 模擬后臺(tái)返回動(dòng)態(tài)路由
│   │   ├── ...
├── node_modules  # 模塊依賴(lài)
├── public  # 靜態(tài)資源
│   │   ├── audio  # 音頻文件
│   │   ├── html  # 靜態(tài) iframe 頁(yè)面
│   │   ├── wasm  # wasm 文件以及膠水代碼
│   │   ├── favicon.ico  # favicon
│   │   ├── logo.svg  # logo
│   │   ├── platform-config.json  # 全局配置文件（打包后修改也可生效）
├── src
│   ├── api  # 接口請(qǐng)求統(tǒng)一管理
│   ├── assets  # 字體、圖片等靜態(tài)資源
│   ├── components  # 自定義通用組件
│   │   ├── ReAnimateSelector  # [animate.css](https://animate.style/) 選擇器組件
│   │   ├── ReAuth  # 按鈕級(jí)別權(quán)限組件（根據(jù)路由meta中的auths字段進(jìn)行判斷）
│   │   ├── ReBarcode  # 條形碼組件
│   │   ├── ReCol  # 封裝 element-plus 的 el-col 組件
│   │   ├── ReCountTo  # 數(shù)字動(dòng)畫(huà)組件
│   │   ├── ReCropper  # 圖片裁剪組件
│   │   ├── ReCropperPreview  # 圖片裁剪預(yù)覽組件
│   │   ├── ReDialog  # 基于 element-plus 中 el-dialog 組件開(kāi)發(fā)的函數(shù)式彈框
│   │   ├── ReFlicker  # 圓點(diǎn)、方形閃爍動(dòng)畫(huà)組件
│   │   ├── ReFlop  # 時(shí)間翻牌組件
│   │   ├── ReFlowChart  # LogicFlow 流程圖組件
│   │   ├── ReIcon  # 圖標(biāo)組件
│   │   ├── ReImageVerify  # 圖形驗(yàn)證碼組件
│   │   ├── ReMap  # 高德地圖組件
│   │   ├── RePerms  # 按鈕級(jí)別權(quán)限組件（根據(jù)登錄接口返回的permissions字段進(jìn)行判斷）
│   │   ├── RePureTableBar  # 配合 `@pureadmin/table` 實(shí)現(xiàn)快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
│   │   ├── ReQrcode  # 二維碼組件
│   │   ├── ReSeamlessScroll  # 無(wú)縫滾動(dòng)組件
│   │   ├── ReSegmented  # 分段控制器組件
│   │   ├── ReSelector  # 選擇器組件
│   │   ├── ReSplitPane  # 切割面板組件
│   │   ├── ReText  # 支持 Tooltip 提示的文本省略組件
│   │   ├── ReTreeLine  # 樹(shù)形連接線(xiàn)組件（基于element-plus）
│   │   ├── ReTypeit  # 打字機(jī)效果組件
│   │   ├── ReVxeTableBar  # 配合 vxe-table 實(shí)現(xiàn)快速便捷的表格操作
│   ├── config  # 獲取平臺(tái)動(dòng)態(tài)全局配置
│   ├── directives  # 自定義指令
│   │   ├── auth  # 按鈕級(jí)別權(quán)限指令（根據(jù)路由meta中的auths字段進(jìn)行判斷）
│   │   ├── copy  # 文本復(fù)制指令（默認(rèn)雙擊復(fù)制）
│   │   ├── longpress  # 長(zhǎng)按指令
│   │   ├── optimize  # 防抖、節(jié)流指令
│   │   ├── perms  # 按鈕級(jí)別權(quán)限指令（根據(jù)登錄接口返回的permissions字段進(jìn)行判斷）
│   │   ├── ripple  # 水波紋效果指令
│   ├── layout  # 主要頁(yè)面布局
│   ├── plugins  # 處理一些庫(kù)或插件，導(dǎo)出更方便的 api
│   ├── router  # 路由配置
│   ├── store  # pinia 狀態(tài)管理
│   ├── style  # 全局樣式
│   │   ├── dark.scss  # 暗黑模式樣式適配文件
│   │   ├── element-plus.scss  # 全局覆蓋 element-plus 樣式文件
│   │   ├── reset.scss  # 全局重置樣式文件
│   │   ├── sidebar.scss  # layout 布局樣式文件
│   │   ├── tailwind.css  # tailwindcss 自定義樣式配置文件
│   │   ├── ...
│   ├── utils  # 全局工具方法
│   │   ├── http  # 封裝 axios 文件
│   │   ├── localforage  # 二次封裝 localforage (https://localforage.docschina.org/) 支持設(shè)置過(guò)期時(shí)間，提供完整的類(lèi)型提示
│   │   ├── progress  # 封裝 nprogress
│   │   └── auth.ts  # 處理用戶(hù)信息和 token 相關(guān)
│   │   └── chinaArea.ts  # 漢字轉(zhuǎn)區(qū)域碼
│   │   └── globalPolyfills.ts  # 解決項(xiàng)目可能因?yàn)榘惭b某個(gè)依賴(lài)出現(xiàn) `global is not defined` 報(bào)錯(cuò)
│   │   └── message.ts  # 消息提示函數(shù)
│   │   ├── mitt.ts  # 觸發(fā)公共事件，類(lèi)似 EventBus
│   │   ├── preventDefault.ts  # 阻止鍵盤(pán)F12、瀏覽器默認(rèn)右鍵菜單、頁(yè)面元素選中、圖片默認(rèn)可拖動(dòng)的方法
│   │   ├── print.ts  # 打印函數(shù)
│   │   ├── propTypes.ts  # 二次封裝 vue 的 propTypes
│   │   ├── responsive.ts  # 全局響應(yīng)式 storage 配置
│   │   ├── sso.ts  # 前端單點(diǎn)登錄邏輯處理
│   │   ├── tree.ts  # 樹(shù)結(jié)構(gòu)相關(guān)處理函數(shù)
│   ├── views  # 存放編寫(xiě)業(yè)務(wù)代碼頁(yè)面
│   ├── App.vue  # 入口頁(yè)面
│   ├── main.ts  # 入口文件
├── types  # 全局 TS 類(lèi)型配置
│   │   ├── directives.d.ts  # 全局自定義指令類(lèi)型聲明
│   │   ├── global-components.d.ts  # 自定義全局組件獲得 Volar 提示（自定義的全局組件需要在這里聲明下才能獲得 Volar 類(lèi)型提示哦）
│   │   ├── global.d.ts  # 全局類(lèi)型聲明，無(wú)需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可獲得類(lèi)型提示
│   │   ├── index.d.ts  # 此文件跟同級(jí)目錄的 global.d.ts 文件一樣也是全局類(lèi)型聲明，只不過(guò)這里存放一些零散的全局類(lèi)型，無(wú)需引入直接在 .vue 、.ts 、.tsx 文件使用即可獲得類(lèi)型提示
│   │   ├── router.d.ts  # 全局路由類(lèi)型聲明
│   │   ├── shims-tsx.d.ts  # 該文件是為了給 .tsx 文件提供類(lèi)型支持，在編寫(xiě)時(shí)能正確識(shí)別語(yǔ)法
│   │   └── shims-vue.d.ts  # .vue、.scss 文件不是常規(guī)的文件類(lèi)型，typescript 無(wú)法識(shí)別，所以我們需要通過(guò)下圖的代碼告訴 typescript 這些文件的類(lèi)型，防止類(lèi)型報(bào)錯(cuò)
├── .browserslistrc  # 配置目標(biāo)瀏覽器的環(huán)境
├── .dockerignore  # 排除不需要上傳到 docker 服務(wù)端的文件或目錄
├── .editorconfig  # 編輯器讀取文件格式及樣式定義配置 https://editorconfig.org/
├── .env  # 全局環(huán)境變量配置（當(dāng) .env 文件與 .env.development、.env.production、.env.staging 這三個(gè)文件之一存在相同的配置 key 時(shí)，.env 優(yōu)先級(jí)更低）
├── .env.development  # 開(kāi)發(fā)環(huán)境變量配置
├── .env.production  # 生產(chǎn)環(huán)境變量配置
├── .env.staging  # 預(yù)發(fā)布環(huán)境變量配置
├── .gitattributes  # 自定義指定文件屬性
├── .gitignore  # git 提交忽略文件
├── .gitpod.yml  # gitpod 部署配置
├── .lintstagedrc  # lint-staged 配置
├── .markdownlint.json  # markdown 格式檢查配置
├── .npmrc  # npm 配置文件
├── .nvmrc  # 用于指定在使用 Node Version Manager（NVM）時(shí)要使用的特定 Node.js 版本
├── .prettierignore  # prettier 語(yǔ)法檢查忽略文件
├── .prettierrc.js  # prettier 插件配置
├── .stylelintignore  # stylelint 語(yǔ)法檢查忽略文件
├── CHANGELOG.en_US.md  # 版本更新日志（英文版）
├── CHANGELOG.md  # 版本更新日志（英文版）
├── CHANGELOG.zh_CN.md  # 版本更新日志（中文版）
├── Dockerfile  # 用來(lái)構(gòu)建 docker 鏡像
├── LICENSE  # 證書(shū)
├── README.en-US.md  # README（英文版）
├── README.md  # README
├── commitlint.config.js  # git 提交前檢查配置
├── eslint.config.js  # eslint 語(yǔ)法檢查配置
├── index.html  # html 主入口
├── package.json  # 依賴(lài)包管理以及命令配置
├── pnpm-lock.yaml  # 依賴(lài)包版本鎖定文件
├── postcss.config.js  # postcss 插件配置
├── stylelint.config.js  # stylelint 配置
├── tailwind.config.ts  # tailwindcss 配置
├── tsconfig.json  # typescript 配置
└── vite.config.ts  # vite 配置

3、進(jìn)入項(xiàng)目目錄并安裝依賴(lài)

pnpm install

## 推薦使用 pnpm, 如未安裝 pnpm, 使用如下命令全局安裝
npm install -g pnpm

4、運(yùn)行項(xiàng)目

pnpm run dev

5、運(yùn)行成功后，瀏覽器訪問(wèn)

http://localhost:8848

6、打包部署

pnpm run build

可以說(shuō)，vue-pure-admin 是一款非常優(yōu)秀的中后臺(tái)管理系統(tǒng)模板，無(wú)論是對(duì)于新手學(xué)習(xí)還是實(shí)際項(xiàng)目開(kāi)發(fā)，都具有很高的價(jià)值。如果你正在尋找合適的中后臺(tái)模板，不妨試試 vue-pure-admin，相信它會(huì)給你帶來(lái)驚喜。

項(xiàng)目地址：https://github.com/pure-admin/vue-pure-admin

最后

推薦的開(kāi)源項(xiàng)目已經(jīng)收錄到 GitHub 項(xiàng)目，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問(wèn)網(wǎng)站，進(jìn)行在線(xiàn)瀏覽：

https://chencoding.top:8090/#/

我創(chuàng)建了一個(gè)開(kāi)源項(xiàng)目交流群，方便大家在群里交流、討論開(kāi)源項(xiàng)目。

但是任何人在群里打任何廣告，都會(huì)被 T 掉。

如果你對(duì)這個(gè)交流群感興趣或者在使用開(kāi)源項(xiàng)目中遇到問(wèn)題，可以通過(guò)如下方式進(jìn)群：

關(guān)注微信公眾號(hào)：【Java陳序員】，回復(fù)【開(kāi)源項(xiàng)目交流群】進(jìn)群，或者通過(guò)公眾號(hào)下方的菜單添加個(gè)人微信，并備注【開(kāi)源項(xiàng)目交流群】，通過(guò)后拉你進(jìn)群。

大家的點(diǎn)贊、收藏和評(píng)論都是對(duì)作者的支持，如文章對(duì)你有幫助還請(qǐng)點(diǎn)贊轉(zhuǎn)發(fā)支持下，謝謝！

---