# Vite + Vue 3 + TypeScript 脚手架

一个基于 Vite 构建的现代化 Vue 3 + TypeScript 前端脚手架，集成了 Pinia 状态管理、Vue Router 动态路由、持久化存储工具和环境变量配置。

## ✨ 特性

- ⚡ **Vite 4** - 极速的开发体验
- 🎯 **Vue 3** - 组合式 API，性能更强
- 🔷 **TypeScript** - 类型安全
- 🍍 **Pinia** - 现代化状态管理
- 🛣️ **Vue Router 4** - 路由管理与权限控制
- 💾 **持久化存储** - localStorage/sessionStorage 封装
- 🎨 **主题切换** - 明亮/暗黑主题支持
- 📱 **响应式设计** - 移动端适配
- 🔧 **环境变量配置** - 开发/生产环境分离
- 📦 **自动代码分割** - 优化打包体积

## 🏗️ 项目结构

```
src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── config/          # 配置文件
│   └── env.ts      # 环境变量配置
├── router/          # 路由配置
│   └── index.ts    # 路由定义与权限控制
├── stores/          # 状态管理
│   ├── index.ts    # Pinia 主文件
│   └── modules/    # 状态模块
│       ├── app.ts  # 应用状态
│       └── user.ts # 用户状态
├── utils/           # 工具函数
│   └── storage.ts  # 存储工具
├── views/           # 页面组件
│   ├── Home.vue    # 首页
│   ├── About.vue   # 关于页面
│   ├── Login.vue   # 登录页面
│   ├── Dashboard.vue # 仪表板
│   ├── Profile.vue # 个人中心
│   ├── Admin.vue   # 管理页面
│   └── 404.vue     # 404 页面
├── App.vue          # 根组件
└── main.ts          # 入口文件
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 开发环境

```bash
npm run dev
```

### 生产构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 🔧 主要功能

### 状态管理 (Pinia)

- **用户状态管理**: 登录、用户信息、权限控制
- **应用状态管理**: 主题、语言、应用配置
- **持久化支持**: 自动同步到本地存储

### 路由管理 (Vue Router)

- **路由守卫**: 登录验证、权限检查
- **动态路由**: 根据用户权限动态加载
- **页面缓存**: 支持 keep-alive

### 持久化存储

```typescript
import { storage } from '@/utils/storage'

// 本地存储
storage.local.set('key', value, 3600) // 设置过期时间（秒）
storage.local.get('key')
storage.local.remove('key')

// 会话存储
storage.session.set('key', value)
storage.session.get('key')
```

### 环境变量配置

在 `src/config/env.ts` 中配置环境变量：

```typescript
export const envConfig = {
  VITE_APP_TITLE: 'Vite应用',
  VITE_APP_PORT: 8080,
  VITE_APP_BASE_API: '/api',
  VITE_APP_ENV: 'development'
}
```

### 主题切换

```typescript
import { useAppStore } from '@/stores/modules/app'

const appStore = useAppStore()
appStore.toggleTheme() // 切换主题
appStore.setTheme('dark') // 设置暗色主题
```

## 📝 开发指南

### 添加新页面

1. 在 `src/views/` 下创建页面组件
2. 在 `src/router/index.ts` 中添加路由配置
3. 如需权限控制，设置 `meta.requireAuth: true`

### 添加新的状态模块

1. 在 `src/stores/modules/` 下创建新模块
2. 在 `src/stores/index.ts` 中导出模块

### 自定义样式

- 全局样式在 `src/App.vue` 中定义
- 支持 CSS 变量进行主题切换
- 响应式断点已预设

## 🛠️ 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite 4
- **编程语言**: TypeScript
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **HTTP 客户端**: Axios
- **样式**: CSS3 + CSS Variables

## 📄 许可证

MIT License