短视频达人 (Super Video)
一个基于 Vue 3 的现代化短视频应用，专注于提供优质的视频创作和分享体验。
📱 项目介绍
短视频达人是一个功能丰富的短视频应用，旨在帮助用户轻松创作、编辑和分享精彩的短视频内容。项目采用现代化的前端技术栈，提供流畅的用户体验和强大的功能支持。
✨ 核心特性
- 🎬 视频创作 - 直观的视频录制和编辑工具
- 🎨 智能引导 - 新手友好的操作引导系统
- 📱 响应式设计 - 完美适配各种设备尺寸
- ⚡ 高性能 - 基于 Vite 的快速构建和热更新
- 🔧 类型安全 - 完整的 TypeScript 支持
- 🎯 代码质量 - 严格的代码规范和自动化检查
🛠️ 技术栈
前端框架
- Vue 3.5.18 - 渐进式 JavaScript 框架
- TypeScript 5.8.3 - 类型安全的 JavaScript 超集
- Vite 7.1.2 - 下一代前端构建工具
样式和 UI
- Tailwind CSS 3.4.17 - 实用优先的 CSS 框架
- PostCSS 8.5.6 - CSS 后处理器
- Autoprefixer 10.4.21 - 自动添加浏览器前缀
开发工具
- ESLint 9.35.0 - 代码质量检查
- Prettier 3.6.2 - 代码格式化
- Husky 9.1.7 - Git hooks 管理
- Lint-staged 16.1.6 - 暂存文件检查
- Commitlint - Commit 信息规范
包管理
- pnpm 10.13.1 - 高效的包管理器
- Node.js 22.14.0 - JavaScript 运行时
🚀 快速开始
环境要求
- Node.js >= 22.14.0
- pnpm >= 10.13.1
安装依赖
# 切换到指定 Node.js 版本
nvm use 22.14
# 安装依赖
pnpm install
开发模式
# 启动开发服务器
pnpm dev
# 访问应用
# http://localhost:5173
构建部署
# 构建生产版本
pnpm build
# 预览构建结果
pnpm preview
代码质量
# 代码检查
pnpm lint
# 自动修复
pnpm fix
📁 项目结构
src/
├── components/ # 可复用组件
│ ├── common/ # 通用基础组件
│ ├── video/ # 视频相关组件
│ └── user/ # 用户相关组件
├── views/ # 页面组件
├── composables/ # 组合式函数
├── stores/ # 状态管理
├── utils/ # 工具函数
├── types/ # TypeScript 类型定义
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ ├── icons/ # 图标资源
│ └── styles/ # 样式文件
└── router/ # 路由配置
🎯 功能模块
已实现功能
- ✅ 项目基础架构搭建
- ✅ 响应式布局系统
- ✅ 引导系统组件
- ✅ 模块切换器
- ✅ 代码质量保障
规划中功能
- 🔄 用户认证系统
- 🔄 视频录制和编辑
- 🔄 内容分享功能
- 🔄 社交互动功能
📝 开发规范
代码风格
- 使用 ESLint + Prettier 统一代码格式
- 遵循 TypeScript 严格类型检查
- 采用 Vue 3 Composition API
- 组件命名使用 PascalCase
Git 提交规范
使用约定式提交格式：
# 功能开发
git commit -m "feat: 添加新功能"
# 问题修复
git commit -m "fix: 修复登录问题"
# 文档更新
git commit -m "docs: 更新 README"
组件开发
- 单一职责原则
- 可复用性设计
- 完整的 TypeScript 类型定义
- 详细的组件文档
🤝 贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'feat: 添加某个功能') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
📞 联系方式
如有问题或建议，请通过以下方式联系：
- 项目 Issues: GitHub Issues
- 邮箱: your-email@example.com
⭐ 如果这个项目对你有帮助，请给它一个星标！