157 lines
3.7 KiB
Markdown
157 lines
3.7 KiB
Markdown
# 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
|