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。
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。
MassVision is a modern front-end project built with Vue 3 + TypeScript + Vite + daisy ui. The project integrates Pinia state management, Vue Router, Tailwind CSS style library, and a complete testing toolchain.
- Core Framework: Vue 3
- Build Tool: Vite
- Programming Language: TypeScript
- State Management: Pinia
- Router Management: Vue Router
- UI Styling: Tailwind CSS + DaisyUI
- HTTP Requests: Axios
- Utility Library: Crypto-JS (for encryption)
- Testing: Vitest (Unit Testing) + Playwright (E2E Testing)
- Code Standards: ESLint + Prettier
MassVision/
├── public/ # Static resources
├── src/
│ ├── assets/ # Resource files (CSS, images, etc.)
│ ├── components/ # Common components (AuthInput, Navbar, SvgIcon, etc.)
│ ├── router/ # Router configuration
│ ├── stores/ # Pinia state management
│ ├── utils/ # Utility functions (auth, http)
│ ├── views/ # Page views (Login, Register, Dashboard)
│ ├── App.vue # Root component
│ └── main.ts # Entry file
├── docs/ # Project documentation
├── e2e/ # E2E test files
├── index.html # Entry HTML
├── package.json # Project dependencies and scripts
├── vite.config.ts # Vite configuration
└── ...
- Node.js ^20.19.0 or >=22.12.0
npm installStart the local development server:
npm run devPerform type checking and build production-ready code:
npm run build# Run ESLint check and auto-fix
npm run lint
# Format code with Prettier
npm run formatRun unit tests with Vitest:
npm run test:unitRun E2E tests with Playwright:
npm run test:e2e- User Authentication: Includes Login and Register pages, along with related input components.
- Security: Uses
crypto-jsfor password hashing. - Network Requests: Encapsulated Axios instance with support for API base path configuration.
- Responsive Layout: Modern UI built with Tailwind CSS and DaisyUI.
---