搭建项目技术

核心框架

• 基础框架 vue3
• 路由管理 Vue Router
• 状态管理 Pinia

UI组件库

• UI库 Element-plus 或 Ant Design Vue
• 原子化CSS框架 Tailwind CSS --可选

构建工具

• vite

http客户端

• axios

代码规范

• 代码风格检查 ESlint + Perttier
• Git提交校验拦截 Husky + lint-staged

配套工具

• 类型系统 TypeScript --推荐
• 样式预处理器 Sass/SCSS
• 开发环境模拟数据 Mockjs
• 容器化部署 Docker
• 项目文档 VitePress

其他细节

• 环境变量管理 vite使用.env文件，区分开发/测试/生产环境
• 目录结构
• 权限管理
• 部署
  • Docker容器化
  • Nginx做静态资源服务器
  • CI/CD工具 自动部署

测试练手

• 寻找公开免费接口
  • 推荐使用 Reqres.in（专门用于测试的伪服务端）
    • 登录接口：POST reqres.in/api/login
    • 请求参数：{ "email": "eve.holt@reqres.in", "password": "cityslicka" }
    • 返回 token：{ "token": "QpwL5tke4Pnpja7X4" }
  • JSONPlaceholder：提供了模拟的 RESTful API，可用于测试增删改查操作
    • 获取列表：GET jsonplaceholder.typicode.com/posts
    • 新增数据：POST jsonplaceholder.typicode.com/posts
    • 修改数据：PUT jsonplaceholder.typicode.com/posts/1
    • 删除数据：DELETE jsonplaceholder.typicode.com/posts/1