# vue3-admin-template

**Repository Path**: han-zai/vue3-admin-template

## Basic Information

- **Project Name**: vue3-admin-template
- **Description**: vue3+js+pinia+unocss+vite+axios+element-plus
路由支持选择前端存储或者后端存储
路由权限
按钮权限
node版本：>=20.19
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-05
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 后台管理系统模板

基于 Vue3 + Vite + Pinia + UnoCSS + Element Plus 的现代化后台管理系统模板。

## 特性

- **现代化技术栈**：使用 Vue3、Vite、Pinia、Element Plus 等最新前端技术
- **权限管理**：支持路由级别和按钮级别的权限控制
- **动态路由**：支持前端配置或后端获取的动态路由
- **主题定制**：使用 UnoCSS 实现灵活的主题配置
- **组件封装**：常用组件封装，提高开发效率

## 技术栈

- Vue 3.5.24
- Vite 7.2.4
- Pinia 3.0.4
- Vue Router 4.6.4
- Element Plus 2.13.0
- UnoCSS 66.5.10
- Sass-embedded 1.97.1

## 安装与使用

### 环境要求

- Node.js: >=20.19
- pnpm: 推荐使用最新版

### 安装步骤

1. 安装依赖

```bash
pnpm install
```

2. 启动开发服务器

```bash
pnpm dev
```

3. 构建生产版本

```bash
pnpm build
```

4. 预览构建结果

```bash
pnpm preview
```

## 配置说明

项目支持多种配置，可在 `src/config/setting.js` 中修改：

- `title`: 系统标题
- `devPort`: 开发环境端口
- `storageRouter`: 是否前端存储路由
- `routerMode`: 路由模式 (history/hash)
- `routesWhiteList`: 不需要权限验证的路由白名单

## 功能说明

- **登录认证**：包含登录页面与认证逻辑
- **动态路由管理**：支持前端静态定义或后端接口获取路由
- **权限控制**：路由级别权限和按钮级别权限
- **布局系统**：标准 Layout 布局，包含侧边栏、顶部导航、面包屑等
- **标签页视图**：记录已访问页面历史，支持多标签页切换
- **全局组件**：文件上传、图片上传、SVG 图标等常用组件

## 目录结构

```
src/
├── api/              # API 接口
├── components/       # 全局组件
├── config/           # 配置文件
├── directive/        # 自定义指令
├── icons/            # 图标资源
├── layout/           # 布局组件
├── plugins/          # 插件
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
├── style/            # 样式文件
├── utils/            # 工具函数
└── views/            # 页面组件
```

## 许可证

MIT