awake

README.md

@@ -0,0 +1,156 @@
+# 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