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          # 入口文件

🚀 快速开始

安装依赖

npm install

开发环境

npm run dev

生产构建

npm run build

预览构建结果

npm run preview

🔧 主要功能

状态管理 (Pinia)

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

路由管理 (Vue Router)

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

持久化存储

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 中配置环境变量：

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

主题切换

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