vue前端架构
发布时间:2026/8/14 2:58:51 作者:尧图编辑部 阅读量:1,286

frontend/├── public/│ └── favicon.ico├── src/│ ├── api/ # API 接口│ │ ├── index.js # axios 配置│ │ ├── testCase.js # 测试用例 API│ │ ├── execution.js # 执行 API│ │ └── user.js # 用户 API│ ├── assets/ # 静态资源│ │ ├── images/│ │ └── styles/│ │ ├── variables.scss│ │ └── global.scss│ ├── components/ # 公共组件│ │ ├── common/│ │ │ ├── AppHeader.vue│ │ │ ├── AppSidebar.vue│ │ │ └── AppFooter.vue│ │ ├── test/│ │ │ ├── TestCaseList.vue│ │ │ ├── TestExecutionPanel.vue│ │ │ └── TestResultChart.vue│ │ └── charts/│ │ ├── LineChart.vue│ │ └── PieChart.vue│ ├── composables/ # 组合式函数│ │ ├── useWebSocket.js│ │ └── useTable.js│ ├── layouts/ # 布局│ │ ├── DefaultLayout.vue│ │ └── AuthLayout.vue│ ├── router/ # 路由配置│ │ └── index.js│ ├── stores/ # Pinia 状态管理│ │ ├── index.js│ │ ├── testStore.js│ │ ├── executionStore.js│ │ └── userStore.js│ ├── utils/ # 工具函数│ │ ├── request.js # 请求封装│ │ ├── format.js # 格式化工具│ │ └── validator.js # 验证工具│ ├── views/ # 页面视图│ │ ├── Dashboard.vue # 仪表盘│ │ ├── TestCases.vue # 测试用例管理│ │ ├── TestCaseDetail.vue # 测试用例详情│ │ ├── TestCaseCreate.vue # 创建测试用例│ │ ├── Executions.vue # 执行历史│ │ ├── ExecutionDetail.vue # 执行详情│ │ ├── Reports.vue # 测试报告│ │ └── Login.vue # 登录页面│ ├── App.vue # 根组件│ └── main.js # 入口文件├── .env.development # 开发环境变量├── .env.production # 生产环境变量├── index.html├── package.json├── vite.config.js└── README.mdcd frontend# 1. 核心依赖npm install vue-router4 pinia axios# 2. UI 组件库npm install element-plusnpm install element-plus/icons-vue# 3. 工具库npm install dayjs lodash-es# 4. 开发依赖npm install -D types/node sass# 5. 如果需要图表npm install echarts vue-echarts# 6. 如果需要 Markdownnpm install marked highlight.js