MassVision 是一个基于 Vue 3 + TypeScript + Vite + daisy ui构建的现代前端项目。项目集成了 Pinia 状态管理、Vue Router 路由、Tailwind CSS 样式库以及完整的测试工具链。
- 核心框架: Vue 3
- 构建工具: Vite
- 编程语言: TypeScript
- 状态管理: Pinia
- 路由管理: Vue Router
- UI 样式: Tailwind CSS + DaisyUI
- HTTP 请求: Axios
- 工具库: Crypto-JS (用于加密)
- 测试: Vitest (单元测试) + Playwright (E2E 测试)
- 代码规范: ESLint + Prettier
MassVision/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 资源文件 (CSS, 图片等)
│ ├── components/ # 公共组件 (AuthInput, Navbar, SvgIcon 等)
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── utils/ # 工具函数 (auth, http)
│ ├── views/ # 页面视图 (Login, Register, Dashboard)
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── docs/ # 项目文档
├── e2e/ # E2E 测试文件
├── index.html # 入口 HTML
├── package.json # 项目依赖与脚本
├── vite.config.ts # Vite 配置
└── ...
- Node.js ^20.19.0 或 >=22.12.0
npm install启动本地开发服务器：
npm run dev进行类型检查并构建生产环境代码：
npm run build# 运行 ESLint 检查并修复
npm run lint
# 运行 Prettier 格式化代码
npm run format使用 Vitest 运行单元测试：
npm run test:unit使用 Playwright 运行 E2E 测试：
npm run test:e2e- 用户认证: 包含登录 (Login) 和注册 (Register) 页面，以及相关的输入组件。
- 安全: 使用
crypto-js进行密码哈希处理。 - 网络请求: 封装了 Axios 实例，支持 API 基础路径配置。
- 响应式布局: 基于 Tailwind CSS 和 DaisyUI 构建的现代化 UI。