本文最后更新于 2025-03-22，文章内容可能已经过时。

https://www.bilibili.com/video/BV1HdCPYPEdc?spm_id_from=333.788.videopod.episodes&vd_source=eecc2c8229facae905b6daed1650b44b

项目描述

项目内容

  • JWT认证

  • 审批流

  • 常规CRUD

  • 模块化/组件化

  • 菜单权限按钮

  • 架构设计

  • 变成技巧

  • 日志规范

  • 数据库读写

技术栈

  • Vite2.0

  • ElementPlus

  • Vuecli4.5

  • Koa/MongoDB

  • Vue3全家桶

系统模块

系统模块主要包括: 用户登录 系统首页 用户管理 菜单管理 角色管理 部门管理 休假管理 待我审批

项目开发流程

团队组成/分工

流程 描述
产品 负责需求调研、原型图设计
前端 负责前端页面开发构建，接口联调
Android / IOS 移动端开发
后端 负责接口设计、后台架构设计
测试 负责功能测试、功能验证
UED 平面设计 网页设计
运维 负责应用部署，linux性能管理
运营 负责产品推销、活动设计
大数据 负责数据库设计、包括数据迁移、数据库相关优化
算法 对应用产品性能优化

开发流程

需求 > 开发 > 测试 > 上线 > 回顾

  • 需求: 需求调研、需求设计、需求评审、用例评审

  • 开发: 接口设计、接口评审、前后端开发、CR 、自测

  • 测试: Bug修复、功能优化、需求调整、遗漏功能开发

  • 上线: 预发验证、灰度测试、checklist、权限配置、版本回退

  • 回顾: 事故复盘、问题总结、数据总览

项目搭建

创建项目

使用 npm 或者使用 pnpm 

npm create vue@latest
pnpm create vue

根据提示，输入项目名称，以及开发需要用到的插件!

目录结构

├── README.md
├── env.d.ts
├── eslint.config.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── api
│   │   └── index.ts
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   ├── config
│   │   └── index.ts
│   ├── http
│   │   ├── Interceptor.ts
│   │   └── index.ts
│   ├── layout
│   │   ├── components
│   │   │   ├── header
│   │   │   │   └── HeaderComp.vue
│   │   │   └── sidebar
│   │   │       └── SiderbarComp.vue
│   │   └── index.vue
│   ├── main.ts
│   ├── plugins
│   │   ├── element-plus.ts
│   │   └── pinia.ts
│   ├── router
│   │   ├── index.ts
│   │   ├── permissions.ts
│   │   └── routes.ts
│   ├── stores
│   │   └── counter.ts
│   ├── styles
│   │   ├── elementui.scss
│   │   ├── index.scss
│   │   └── variables.scss
│   ├── utils
│   │   └── index.ts
│   └── views
│       ├── AboutView.vue
│       ├── HomeView.vue
│       └── LoginPage.vue
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts