js狠疯狂：10分钟生成项目，前后端一体化高效开发方案

01 疯狂的开始

“这不可能吧！” 小李盯着屏幕，几乎有些不敢相信自己的耳朵。

那是一个平常的周一早晨，项目组在公司会议室开着例行周会。项目经理老张突然提出一个新需求：“能不能在10分钟内生成一个从后端API到PC端、移动端的完整项目？”

所有人顿时沉默了几秒钟，随后开发小组爆发出一阵笑声。小张忍不住说道：“10分钟？搭个空壳项目可能都不够，完整的项目更是天方夜谭吧？” 然而，老张并没有笑，而是继续解释：“最近几个客户提出了大量定制化需求，他们希望产品能快速成型，并且展示给用户。之前我们每次都要从零搭建，太费时了。公司希望我们开发一个‘快速生成系统’，能够在几个简单的命令后，自动生成出一个功能齐全的项目雏形。”

笑声渐渐停了下来，所有人开始认真思考这件事。小李心想，这确实不是不可能的事——如果能通过脚手架自动生成基础项目，并复用一部分已有的代码，或许真的可以做到。毕竟，过去几年，团队已经在各种项目中积累了大量的组件和代码片段。通过合理的封装和模板化处理，这些资源应该可以重新利用。

于是，这个疯狂的想法从当天的会议室开始，逐渐演变成了一个实际可行的技术突破。而这条从“10分钟生成项目”的设想到内部系统化产品的开发之路，充满了迭代与挑战。

02 起初的尝试：

2.1.从 Express 到 Koa

最初阶段：团队一致确定了js的技术栈，尽管公司有专业的java大牛，也提出了微服务的架构。但为了有极低的准入门槛，谁都能上手。js成为了我们的首选。

在最初的技术选型阶段，团队并不是直接就决定采用 Egg.js。实际上，最早的几个版本是基于 Express 和 Koa 开发的。Express 因为它的轻量级和简洁性，成为了我们最初搭建后端 API 的首选框架。通过 Express，我和团队能够迅速搭建起一个基础的 API 系统，处理路由、数据库连接、以及一些基础的中间件。

但是很快，我们意识到，随着项目规模的扩大，Express 开始变得不太适合我们了。它的自由度虽高，但往往缺乏一些企业级应用需要的功能，比如更强的模块化能力和插件体系。

于是，我们转向了 Koa，希望借助它的中间件机制和简洁的设计来提升开发体验。Koa 让我们在某些场景下获得了更高的灵活性，但随着客户需求的增加，团队最终发现 Koa 的开发速度依然无法跟上定制化项目的快节奏。

2.2.产品的持续迭代：Egg.js 的加入

为了进一步提升开发效率，我们转向了 Egg.js——一个专为企业级开发设计的框架，特别适合我们当时的情况约定大于配置。Egg.js 的插件机制和一体化解决方案，大大降低了我们为每个新项目构建基础设施的时间。同时，我们还引入了 Sequelize，一个功能强大的 ORM 框架，帮助我们更加便捷地管理和操作数据库。

这个组合让我们可以专注于业务逻辑，而不用每次都手动配置项目结构、环境、以及数据库模型等重复性工作。借助 Egg.js 的强大功能，项目的生成速度显著提高，脚手架工具能够根据不同的需求自动生成相应的项目模块，大大减少了人工的干预。

也是从这一刻开始，实现了基本的10分钟构想。

2.3.从后端到前端：统一的技术栈

选用js，是为实现前后端一致性,这样不仅能减少语言切换的学习成本，也让整个团队能够在前后端通用的基础上高效协作。对于前端部分，我们分别选择了 Vue 3 和 Uniapp：

• PC端：基于 Vue 3 + Element Plus，为每个项目快速生成管理后台界面，适配各种复杂的交互需求。
• 移动端：采用 Uniapp 作为核心框架，结合 uView 组件库和 UnoCSS 实现轻量化的风格控制，快速适配多端设备（iOS、Android、小程序等）。

这种技术栈不仅大大提高了开发效率，还增强了各个模块之间的复用性，开发者只需维护同一套代码，就能覆盖多个平台需求。

03 内部工具的延伸：桌面和文档系统

除了客户项目，公司内部的开发流程也需要简化和优化。于是我们将这套快速生成系统逐步扩展到了公司内部的桌面应用和文档管理系统。为了适应内部需求，团队开发了基于 Electron 的桌面应用，并且结合这套生成系统，搭建了一套专为公司内部文档管理而设计的系统。

通过这些工具，我们能够自动化管理项目文档、开发手册，甚至可以为每个项目生成定制化的说明书和部署流程，进一步提升了开发和交付效率。

最终的解决方案：如何实现“10分钟项目生成”？

经过多次迭代和尝试，我们构建了一个高度自动化的项目生成体系，能够通过几条命令迅速搭建出一个完整的全栈项目。这一系统结合了以下几项核心技术：

1. 脚手架工具：我们开发了一个定制化的脚手架工具，支持命令行选择不同的项目模板，几分钟内完成基础项目结构的生成。
2. Monorepo 管理：借助 Monorepo 架构，我们将前后端代码放在同一代码库中，极大提升了代码的可复用性和统一性。
3. 模板化代码生成：通过一系列预定义的代码模板（CRUD、用户认证、支付集成等），大部分的代码生成工作可以在脚手架初始化时自动完成，开发者只需专注于业务逻辑的实现。
4. 复用 UI 组件：PC端和移动端的 UI 组件库已经高度模块化，开发者可以快速从 Element Plus 和 uView 、vant等各类3方框架中直接使用现成的组件，极大减少了界面开发的工作量。

更多设想

这是1个做了很久的项目，至今在公司仍旧发挥着不可思议的效果。虽然并没有真正意义上实现：10分钟一个项目，但10天的项目，1天不到完成的变态能力，也让公司狠狠地降本增效了一下。

在这个过程中，我们接触了大量从来没有接触过的好玩技术，也狠狠地体验了一把当产品的快乐！从内部npm库构建到内部桌面文档中心，再到各类意想不到的小工具，脚手架，vscode插件，甚至是ai训练。看着一个个从来没有过的东西，从0到1的一起构建出来。真的是满满的成就感。

在我们的设想中：可以通过客户的几句话，快速的实现一个项目。然后得到相应的pc地址和移动端地址。 然后转到测试手里，测试完成后，部署到生产环境，就可以交付给客户啦！！

分享的初衷：

这个项目其实有跟很多有趣的人介绍过，甚至有时候卡壳的时候，还会请教一些大佬外援提点建议。 在不涉及隐私的情况下，作为这个项目的主要发起人，我们是期望可以有更多有趣的想法和设想加入进来！

可能会有人笑：想法太天真。谁知道呢！？总得先要有想法，万一实现了呢！

最后，还是期望有更多的私信和评论，参与到交流中来吧！

原文链接：https://juejin.cn/post/7415672130212626432