# unimodel_echo_vue3_admin

**Repository Path**: unimodel/unimodel_echo_vue3_admin

## Basic Information

- **Project Name**: unimodel_echo_vue3_admin
- **Description**: vue3 + element-plus + vue-router + tailwindcss + axios
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-18
- **Last Updated**: 2025-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# unimodel_echo_vue3_admin

#### 介绍

这是一个基于 Vue3 的 PC 端管理后台模板，使用了以下技术栈：
- Vue3
- Element Plus
- Vue Router
- TailwindCSS
- Axios
- Pinia (状态管理)

#### 功能特性

1. 登录页面
2. 菜单栏
3. 侧边栏
4. 顶部导航栏
5. 404页面
6. Dashboard 主页
7. 主题切换（亮色、暗色、跟随系统）
8. 响应式布局
9. 权限管理
10. 多级菜单

#### 安装教程

1. 克隆项目到本地
```bash
git clone <repository-url>
```

2. 进入项目目录
```bash
cd unimodel_echo_vue3_admin
```

3. 安装依赖
```bash
# 使用 pnpm 安装依赖（推荐）
pnpm install

# 或者使用 npm 安装依赖
npm install
```

#### 使用说明

1. 开发环境启动
```bash
# 使用 pnpm
pnpm run dev

# 或者使用 npm
npm run dev
```

2. 构建生产环境
```bash
# 使用 pnpm
pnpm run build

# 或者使用 npm
npm run build
```

3. 预览生产环境
```bash
# 使用 pnpm
pnpm run preview

# 或者使用 npm
npm run preview
```

#### 项目结构

```
src/
├── api/              # API 接口封装
├── assets/           # 静态资源
├── components/       # 公共组件
├── layouts/          # 布局组件
├── router/           # 路由配置
├── stores/           # 状态管理(Pinia)
├── styles/           # 样式文件
├── utils/            # 工具函数
├── views/            # 页面组件
│   ├── system/       # 系统管理模块
│   ├── content/      # 内容管理模块
│   ├── device/       # 设备管理模块
│   └── meeting/      # 会议管理模块
├── App.vue           # 根组件
└── main.js           # 入口文件
```

#### 技术栈说明

- **Vue3**: 渐进式 JavaScript 框架，使用 Composition API
- **Element Plus**: Vue3 的桌面端组件库
- **Vue Router**: Vue.js 的官方路由管理器
- **TailwindCSS**: 实用优先的 CSS 框架
- **Axios**: 基于 promise 的 HTTP 库
- **Pinia**: Vue 的轻量级状态管理库

#### 主题切换功能

本项目支持三种主题模式：
- **亮色主题**: 经典的亮色界面
- **暗色主题**: 护眼的暗色界面
- **跟随系统**: 根据操作系统的主题设置自动切换

用户可以通过顶部导航栏的图标按钮切换主题，选择会在本地存储，下次访问时自动应用。

#### 开发规范

- 使用 Composition API
- 组件化开发
- 原子化 CSS 类名（TailwindCSS）
- 状态管理使用 Pinia
- API 接口统一管理
- 模块化目录结构

#### 浏览器支持

- Chrome >= 80
- Firefox >= 70
- Safari >= 13
- Edge >= 80

#### 许可证

[MIT](./LICENSE) © Your Name