# Star-Vue

**Repository Path**: chenwm-star/star-vue

## Basic Information

- **Project Name**: Star-Vue
- **Description**: Star Vue 是一个基于 Vue 3 + Vite 构建的现代化前端项目模板，采用了腾讯 TDesign 组件库，提供了完整的企业级应用开发解决方案。项目具有高度的模块化设计，支持多布局系统、自动化路由生成、API 封装、状态管理等核心功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 3
- **Created**: 2025-08-24
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TDesign, Pinia

## README

# Star Vue 项目文档

## 项目概述

Star Vue 是一个基于 Vue 3 + Vite 构建的现代化前端项目模板，采用了腾讯 TDesign 组件库，提供了完整的企业级应用开发解决方案。项目具有高度的模块化设计，支持多布局系统、自动化路由生成、API 封装、状态管理等核心功能。

## 技术栈

- **前端框架**: Vue 3.5.13 (Composition API)
- **构建工具**: Vite 6.2.0
- **UI 组件库**: TDesign Vue Next 1.15.2
- **状态管理**: Pinia 3.0.1 + 持久化插件
- **路由管理**: Vue Router 4.5.0
- **HTTP 请求**: Axios 1.8.4
- **样式预处理**: Sass 1.86.0
- **日期处理**: Day.js 1.11.13
- **安全存储**: Secure-LS 2.0.0
- **图标库**: TDesign Icons Vue Next

## 核心特性

### 1. 智能路由系统
- **自动路由生成**: 基于文件结构自动生成路由配置
- **多布局支持**: 支持 `default`（网站布局）和 `admin`（管理后台布局）
- **页面配置**: 通过 `page.js` 文件配置路由元信息
- **路由守卫**: 内置认证检查和权限控制

### 2. API 封装系统
- **自动 API 生成**: 通过 `apiGenerator` 自动生成标准 CRUD 接口
- **HTTP 拦截器**: 统一的请求/响应处理
- **Token 自动刷新**: 智能的 JWT token 刷新机制
- **错误处理**: 完善的错误状态码处理

### 3. 状态管理
- **Pinia 状态管理**: 现代化的状态管理方案
- **持久化存储**: 支持 localStorage 和 sessionStorage
- **安全存储**: 敏感数据使用 AES 加密存储
- **动态存储适配**: 智能检测和切换存储类型

### 4. 主题系统
- **明暗主题切换**: 支持亮色/暗色主题动态切换
- **CSS 变量**: 基于 CSS 自定义属性的主题系统
- **响应式设计**: 完整的移动端适配

### 5. 布局系统
- **管理后台布局**: 侧边栏 + 顶部导航的经典后台布局
- **网站布局**: 顶部导航 + 内容区域的网站布局
- **页面过渡**: 流畅的页面切换动画效果

## 项目结构

```
src/
├── components/          # 组件目录
│   ├── admin-layout/   # 管理后台布局组件
│   └── layout/         # 网站布局组件
├── request/            # HTTP 请求封装
│   ├── api/           # API 接口定义
│   ├── request.js     # Axios 配置
│   └── tokenRefresh.js # Token 刷新逻辑
├── router/            # 路由配置
├── stores/            # Pinia 状态管理
│   ├── auth.js        # 认证状态
│   ├── user.js        # 用户信息
│   └── secure.js      # 安全存储
├── utils/             # 工具函数
│   ├── generators/    # 自动生成器
│   ├── doc/          # 文档说明
│   ├── theme.js      # 主题切换
│   └── date.js       # 日期工具
├── views/             # 页面组件
└── style/             # 样式文件
```

## 开发指南

### 添加新页面
1. 在 `src/views/` 下创建页面目录
2. 创建 `index.vue` 组件文件
3. 创建 `page.js` 配置文件
4. 路由将自动生成

### API 接口开发
1. 使用 `apiGenerator.registerModel()` 注册新模型
2. 自动生成标准 CRUD 接口
3. 支持自定义特殊接口扩展

### 状态管理
1. 使用 Pinia 创建 store
2. 支持数据持久化
3. 敏感数据自动加密存储

## 配置说明

### 环境配置
- 开发服务器端口: 3001
- API 代理: `/api` -> `http://127.0.0.1:8005`
- 自动打开浏览器

### 主题配置
- 支持亮色/暗色主题
- 基于 TDesign 设计规范
- CSS 变量动态切换

### 认证配置
- JWT Token 认证
- 自动刷新机制
- 多种存储方式支持

## 部署说明

```bash
# 安装依赖
pnpm install

# 开发环境
pnpm dev

# 生产构建
pnpm build

# 预览构建结果
pnpm preview
```

## 特色功能

1. **零配置路由**: 基于文件结构自动生成路由，无需手动配置
2. **智能 API**: 自动生成标准接口，支持自定义扩展
3. **安全存储**: 敏感数据 AES 加密，支持多种存储策略
4. **主题切换**: 一键切换明暗主题，完整的设计系统
5. **响应式布局**: 完美适配桌面端和移动端
6. **开发体验**: 热重载、自动打开浏览器、完善的开发工具

这个项目模板为快速开发现代化 Vue 应用提供了坚实的基础，通过高度的自动化和模块化设计，大大提升了开发效率和代码质量。