Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目

用户6158139695162026-03-15 18:11

前言

本文主要是基于抖音哲玄前端进行学习与总结，如有需要可以抖音搜索哲玄前端进行了解学习。
个人目前是纯前端，对于服务端所知不够，如果你也有学习完整项目的想法，可以和跟着我的文章一起学习了解整个项目的过程。后续会持续更新。文章中若有不对的地方请多多指教，我会及时更正。

项目背景

日常开发中我们往往面临

重复性很高的工作
CRUD等基础工作
多套系统交付间产生大量工作
更多偏向纯前端开发，设计不到基建、服务相关知识

从这些点出发，我们将开发这个项目。

项目介绍

技术栈：NodeJS 、Koa 、 vue3 、 webpack5
一个企业级应用框架，用于快速构建企业级应用
项目一开始经历了技术选型，然后确定整体架构。项目初始化后，先从BFF层开始开发。

项目架构

项目整体分成3层：

js 复制代码

前端（Web/App/小程序） 
       ↓
专属 BFF（如 Web-BFF、Mobile-BFF）  
       ↓ 
通用后端服务（微服务/数据库/第三方API）

其中BFF层的结构方式为

项目elpis-cor解析（BFF层）

elpis-cor是基于koa来实现的解析器，专门解析规定app目录下的中间件部分。结构目录简单组成：

js 复制代码

elpis
  |--app           //解析器指定解析的中间件
      |--middleware
      |    |--error-handler.js    //错误边界中间件
      |--router
      |    |--view.js             //加载路由
      middleware.js     //注入中间件地方
  |--config        //环境配置
  |--elpis-core    //解析器
      ｜--loader        //解析器相关文件都放这
          ｜--middleware.js    //middleware中间件解析器
          ｜--router.js        //路由中间件解析器
            ...
      ｜--index.js      //解析器入口
  |--logs          //日志
  |--index.js      //入口文件
  |--package.json  //配置文件

index.js入口文件是整个项目的入口，可以传入一些配置，比如项目名、首页地址等，然后先去加载解析器，同时会去加载注入中间件的app下的middleware.js，利用loader去处理整体的app文件下中间件。