250 lines
5.4 KiB
Markdown
250 lines
5.4 KiB
Markdown
# Vue3 前端设计师工具
|
|
|
|
一个基于 Vue3 构建的现代化、响应式前端设计师工具应用，支持多端适配和国际化。
|
|
|
|
## 🚀 技术栈
|
|
|
|
### 核心框架
|
|
- **Vue 3** - 使用 Composition API 构建现代化应用
|
|
- **Vite** - 快速的构建工具和开发服务器
|
|
- **Pinia** - 轻量级状态管理解决方案
|
|
- **Vue Router 4** - 客户端路由管理
|
|
|
|
### 国际化
|
|
- **Vue I18n** - 完整的国际化解决方案
|
|
- 支持中文 (zh-CN) 和英文 (en-US)
|
|
- 动态语言切换
|
|
|
|
### 样式系统
|
|
- **原生 CSS** - 使用 Scoped CSS 和 CSS 变量
|
|
- **响应式设计** - 移动优先的响应式布局
|
|
- **主题系统** - 支持浅色、深色和高对比度主题
|
|
- **CSS 变量** - 完整的颜色、字体、间距变量系统
|
|
|
|
### 工具链
|
|
- **ESLint** - 代码质量检查
|
|
- **Prettier** - 代码格式化
|
|
- **现代 JavaScript** - ES6+ 语法
|
|
|
|
## 📱 多端适配
|
|
|
|
### 响应式断点
|
|
- **移动端**: < 768px
|
|
- **平板端**: 768px - 1024px
|
|
- **桌面端**: > 1024px
|
|
|
|
### 特性
|
|
- 移动优先设计理念
|
|
- 自适应布局和字体大小
|
|
- 触摸友好的交互设计
|
|
- 键盘导航支持
|
|
- 平板横竖屏适配
|
|
- 移动端性能优化
|
|
|
|
## 🌍 国际化
|
|
|
|
### 支持语言
|
|
- 🇨🇳 中文 (zh-CN)
|
|
- 🇺🇸 English (en-US)
|
|
|
|
### 功能特性
|
|
- 自动检测浏览器语言
|
|
- 本地存储语言偏好
|
|
- 完整的文本翻译
|
|
- 日期时间格式化
|
|
- 数字货币格式化
|
|
- RTL 语言支持准备
|
|
|
|
## 🎨 主题系统
|
|
|
|
### 主题类型
|
|
- **浅色主题** - 明亮清晰的默认主题
|
|
- **深色主题** - 护眼的暗色主题
|
|
- **高对比度** - 无障碍访问专用
|
|
|
|
### 功能
|
|
- 系统主题自动检测
|
|
- 手动主题切换
|
|
- 平滑过渡动画
|
|
- 移动端状态栏颜色适配
|
|
|
|
## 📦 项目结构
|
|
|
|
```
|
|
src/
|
|
├── assets/ # 静态资源
|
|
│ └── styles/ # 样式文件
|
|
│ ├── global.css # 全局样式
|
|
│ ├── responsive.css # 响应式布局
|
|
│ └── themes.css # 主题系统
|
|
├── components/ # 可复用组件
|
|
├── composables/ # 组合式函数
|
|
│ ├── useTheme.js # 主题管理
|
|
│ ├── useI18n.js # 国际化扩展
|
|
│ └── useResponsive.js # 响应式检测
|
|
├── locales/ # 国际化文件
|
|
│ ├── lang/ # 语言包
|
|
│ │ ├── zh-CN.js # 中文语言包
|
|
│ │ └── en-US.js # 英文语言包
|
|
│ └── i18n.js # i18n 配置
|
|
├── pages/ # 页面组件
|
|
├── router/ # 路由配置
|
|
│ └── index.js # 路由定义
|
|
├── services/ # 服务层
|
|
│ └── api.js # API 请求封装
|
|
├── stores/ # Pinia 状态管理
|
|
│ └── index.js # Store 配置
|
|
├── App.vue # 根组件
|
|
└── main.js # 应用入口
|
|
```
|
|
|
|
## 🛠️ 开发命令
|
|
|
|
### 安装依赖
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 开发模式
|
|
```bash
|
|
npm run dev
|
|
```
|
|
启动开发服务器，支持热重载。
|
|
|
|
### 代码检查
|
|
```bash
|
|
npm run lint
|
|
```
|
|
运行 ESLint 检查代码质量。
|
|
|
|
### 代码格式化
|
|
```bash
|
|
npm run format
|
|
```
|
|
使用 Prettier 格式化代码。
|
|
|
|
### 构建生产版本
|
|
```bash
|
|
npm run build
|
|
```
|
|
构建优化后的生产版本。
|
|
|
|
### 预览构建结果
|
|
```bash
|
|
npm run preview
|
|
```
|
|
本地预览构建后的应用。
|
|
|
|
## 🎯 核心功能
|
|
|
|
### 响应式设计
|
|
- 移动优先的布局策略
|
|
- 基于断点的组件适配
|
|
- 自适应字体和间距系统
|
|
- 设备类型自动检测
|
|
|
|
### 性能优化
|
|
- 组件懒加载
|
|
- 路由懒加载
|
|
- 图片响应式优化
|
|
- 移动端动画性能优化
|
|
|
|
### 开发者体验
|
|
- 完整的开发工具链
|
|
- 热重载开发环境
|
|
- 代码规范检查
|
|
- 自动格式化
|
|
|
|
### 可访问性
|
|
- 高对比度主题支持
|
|
- 键盘导航支持
|
|
- 语义化 HTML 结构
|
|
- 适当的 ARIA 标签
|
|
|
|
## 🔧 环境配置
|
|
|
|
### 环境变量
|
|
创建 `.env` 文件配置环境变量：
|
|
|
|
```env
|
|
# API 配置
|
|
VITE_API_BASE_URL=http://localhost:3000/api
|
|
|
|
# 开发配置
|
|
VITE_DEV_TOOLS=true
|
|
```
|
|
|
|
### 浏览器支持
|
|
- **移动端**: iOS 13+, Android 8+
|
|
- **桌面端**: Chrome 80+, Firefox 75+, Edge 80+
|
|
- **平板端**: iPadOS, Android 平板
|
|
|
|
## 🚀 快速开始
|
|
|
|
1. **克隆项目**
|
|
```bash
|
|
git clone <repository-url>
|
|
cd apps/FrontendDesigner
|
|
```
|
|
|
|
2. **安装依赖**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **启动开发**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. **访问应用**
|
|
打开浏览器访问 `http://localhost:5173`
|
|
|
|
## 📝 开发规范
|
|
|
|
### 代码规范
|
|
- 使用 ESLint 进行代码检查
|
|
- 使用 Prettier 进行代码格式化
|
|
- 遵循 Vue 3 最佳实践
|
|
- 优先使用 Composition API
|
|
|
|
### 组件开发
|
|
- 组件名使用 PascalCase
|
|
- 文件名使用 PascalCase
|
|
- Props 使用 camelCase
|
|
- 事件名使用 kebab-case
|
|
|
|
### 样式规范
|
|
- 使用 Scoped CSS
|
|
- 优先使用 CSS 变量
|
|
- 移动优先的响应式设计
|
|
- 语义化的类名
|
|
|
|
## 🔮 未来规划
|
|
|
|
- [ ] 添加单元测试
|
|
- [ ] 集成 E2E 测试
|
|
- [ ] 添加 PWA 支持
|
|
- [ ] 性能监控
|
|
- [ ] 更多国际化语言
|
|
- [ ] 暗色模式增强
|
|
- [ ] 组件库集成
|
|
|
|
## 📄 许可证
|
|
|
|
本项目使用 MIT 许可证。
|
|
|
|
## 🤝 贡献
|
|
|
|
欢迎提交 Issue 和 Pull Request 来改进这个项目。
|
|
|
|
## 📞 支持
|
|
|
|
如有问题或建议，请通过以下方式联系：
|
|
- 创建 GitHub Issue
|
|
- 发送邮件至项目维护者
|
|
|
|
---
|
|
|
|
**由 Vue3 + Vite 驱动 | 多端适配 | 国际化支持**
|