🎉 项目简介
ZsAdmin 前端是基于 Vue3 + TypeScript + Vite 构建的现代化企业级后台管理系统前端框架，提供完整的前后端分离解决方案。它集成了 Arco Design Vue 组件库、Pinia 状态管理、Vue Router 路由管理等核心技术，旨在帮助开发者快速构建高效、美观、易用的后台管理系统。
1. ✨ 核心价值
1.1 🚀 现代化技术栈
采用 Vue3 + TypeScript + Vite 构建，具有更好的性能和开发体验。
1.2 🎨 企业级 UI 设计
基于 Arco Design Vue 组件库，提供丰富的组件和主题定制能力。
1.3 🔒 完整的权限管理
实现了基于角色的权限控制（RBAC），支持细粒度的权限管理。
1.4 ⚡ 高性能
采用懒加载、代码分割、缓存等技术，确保系统运行流畅。
1.5 📱 响应式设计
适配不同屏幕尺寸，提供良好的移动端体验。
2. 🛠️ 技术栈
2.1 核心技术
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue | ^3.5.16 | 前端框架 |
| TypeScript | ^5.8.3 | 类型系统 |
| Arco Design Vue | ^2.57.0 | UI 组件库 |
| Vue Router | ^4.5.1 | 路由管理 |
| Pinia | ^3.0.2 | 状态管理 |
| Axios | ^1.9.0 | 网络请求 |
| Less | ^4.3.0 | CSS 预处理器 |
2.2 辅助技术
| 技术 | 版本 | 用途 |
|---|---|---|
| ECharts | ^5.6.0 | 图表可视化 |
| FullCalendar | ^6.1.19 | 日历组件 |
| WangEditor | ^5.1.12 | 富文本编辑器 |
| SocketJS + STOMP | ^1.6.1 + ^7.2.1 | WebSocket 通信 |
| Day.js | ^1.11.13 | 日期处理 |
| Lodash | ^4.17.21 | 工具函数库 |
| Mock.js | ^1.1.0 | 模拟数据 |
| Vue Use | ^13.2.0 | Vue 组合式 API 工具集 |
2.3 构建工具
| 工具 | 版本 | 用途 |
|---|---|---|
| Vite | ^6.3.5 | 构建工具 |
| ESLint | ^8.25.0 | 代码检查 |
| Prettier | ^2.8.8 | 代码格式化 |
| Stylelint | 16.19.1 | CSS 检查 |
| Husky | ^9.1.7 | Git 钩子 |
| Lint-staged | ^16.0.0 | 暂存文件检查 |
3. 🎯 项目特点
3.1 🔐 类型安全
使用 TypeScript，提供更好的类型检查和开发体验，减少运行时错误。
3.2 🧩 组件化设计
采用组件化开发模式，提高代码复用性和可维护性，便于团队协作。
3.3 ⚡ 性能优化
采用懒加载、代码分割、缓存等技术，提高页面加载速度，优化用户体验。
3.4 🎨 主题定制
支持动态主题切换，提供丰富的主题配置选项，满足不同企业的品牌需求。
3.5 🔌 插件化架构
采用插件化设计，便于扩展功能和定制化开发。
3.6 📝 完善的文档
提供详细的开发文档和使用示例，降低学习成本。
4. 💼 应用场景
- ✅ 企业后台管理系统
- ✅ SaaS 服务平台
- ✅ 数据管理平台
- ✅ 快速原型开发
- ✅ 各种管理类系统
- ✅ 电商后台管理
- ✅ 内容管理系统
- ✅ 数据分析平台
5. 🏗️ 项目架构
ZsAdmin 前端采用分层架构设计，主要包括以下几层：
- 视图层：由 Vue 组件组成，负责页面渲染
- 路由层：由 Vue Router 管理，负责页面导航
- 状态层：由 Pinia 管理，负责全局状态管理
- 服务层：封装 API 请求和业务逻辑
- 工具层：提供通用的工具函数和工具类
- 组件层：封装通用的 UI 组件
6. 🚀 快速开始
6.1 环境要求
- Node.js 18+
- pnpm 8+（推荐）或 npm/yarn
6.2 安装依赖
bash
# 克隆项目
git clone https://github.com/your-org/zs-ui-element.git
cd zs-ui-element
# 安装依赖
pnpm install
npm install
yarn install6.3 启动开发服务器
bash
# 启动开发服务器
pnpm dev
npm run dev
yarn dev6.4 访问应用
开发服务器启动成功后，您可以通过以下地址访问应用：
6.5 构建生产版本
bash
# 构建生产版本
pnpm build:prod
npm run build:prod
yarn build:prod6.6 预览生产版本
bash
# 预览生产版本
pnpm preview
npm preview
yarn preview7. 🌐 浏览器支持
| 浏览器 | 版本 |
|---|---|
| Chrome | 最新 2 个版本 |
| Firefox | 最新 2 个版本 |
| Safari | 最新 2 个版本 |
| Edge | 最新 2 个版本 |
8. 🛠️ 开发工具推荐
8.1 IDE
- VS Code：推荐使用，提供丰富的插件支持
8.2 插件
- Volar：Vue 3 语法支持
- ESLint：代码检查
- Prettier：代码格式化
- TypeScript Vue Plugin：TypeScript 支持
- Auto Close Tag：自动闭合标签
- Auto Rename Tag：自动重命名标签
9. 👥 社区与支持
- GitHub 仓库：https://github.com/zsadmin2025/zs-ui-acro-design
- Gitee 仓库：https://gitee.com/zsadmin2025/zs-ui-acro-design
- 在线演示：https://demo.zsadmin.com
- 交流群：添加微信
zsadmin2025进入交流群 - gitee Issues：https://gitee.com/zsadmin2025/zs-ui-acro-design/issues
- github Issues：https://github.com/zsadmin2025/zs-ui-acro-design/issues
🎉 感谢您选择 ZsAdmin 前端框架！
如果您觉得 ZsAdmin 对您有帮助，请给我们一个 ⭐ Star 支持一下！