# fetm

**Repository Path**: gengkaibo/fetm

## Basic Information

- **Project Name**: fetm
- **Description**: fetm (Front End Technology Middleground) 前端技术中台是一套经过反复沉淀积累下来的拥有大量公共组件及函数的技术中台框架
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: gitee-master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-06-12
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

https://npmmirror.com/sync/fetm-components
https://npmmirror.com/sync/fetm-hooks
快速刷新镜像站

# fetm(Front End Technology Middleground) 前端技术中台

fetm 是一套经过反复沉淀积累下来的拥有大量公共组件及函数的技术中台框架，采用 pnpm 的 monorepo 方式组织依赖，包含 eslint-config（eslint 默认规则）、plop（代码生成工具：可生成模板代码及 openAPI 自动化接口调用类等）、shared/components（vue3 公共组件模块）、shared/hooks（公共 vue3 函数式方法模块）、shared/style（公共样式模块）、shared/utils（公共工具类模块）等公共部分。将项目复制到框架的 web 目录下，然后即可按需引入框架任何能力，提高项目开发效率及代码规范。

前端技术中台是一个在前端技术领域提供共享服务和能力的平台。以下是关于前端技术中台的一些关键点和特点：

## 定义与目的

前端技术中台是前端技术架构中的一个重要组成部分，旨在提供一套标准化的前端技术解决方案和工具集，以便快速响应业务需求，提升开发效率，并保证前端技术的统一性和可维护性。

## 主要功能和作用

- 共享服务：提供诸如用户认证、权限管理、数据缓存、API 管理等前端常用的共享服务，减少重复开发和维护成本。
- 技术组件：提供一系列经过封装和优化的前端技术组件，如 UI 组件库、交互组件库等，方便开发者快速构建前端页面和交互逻辑。
- 开发工具：提供集成化的开发环境、代码编辑器、调试工具等，提升开发者的开发体验和效率。
- 标准化：通过制定前端技术标准、规范和最佳实践，确保前端技术的统一性和可维护性。

## 技术特点

- 高复用性：前端技术中台提供的共享服务和组件具有高度的复用性，可以在多个项目中重复使用，减少开发成本。
- 可扩展性：前端技术中台采用模块化、组件化的设计思想，方便扩展新的服务和组件。
- 灵活性：前端技术中台支持多种前端技术栈和框架，可以根据项目需求灵活选择。

## 实现方式

- 技术选型：选择合适的前端技术栈和框架，如 React、Vue、Angular 等，构建前端技术中台的基础架构。
- 服务拆分：将前端常用的共享服务拆分成独立的模块或组件，实现服务的解耦和复用。
- 组件库建设：建设包含常用 UI 组件和交互组件的组件库，方便开发者快速构建前端页面和交互逻辑。
- 开发工具集成：集成前端开发工具链，如 Webpack、Babel、ESLint 等，提升开发者的开发体验和效率。

## 价值

- 前端技术中台可以帮助团队快速响应业务需求，提升开发效率，减少重复开发和维护成本。
- 通过制定前端技术标准、规范和最佳实践，可以确保前端技术的统一性和可维护性，提高前端代码的质量和可读性。
- 前端技术中台还可以促进团队之间的协作和共享，提高团队的凝聚力和整体战斗力。
- 综上所述，前端技术中台是一个在前端技术领域提供共享服务和能力的平台，具有高度的复用性、可扩展性和灵活性。通过建设前端技术中台，可以帮助团队提升开发效率、保证前端技术的统一性和可维护性，并促进团队之间的协作和共享。

## 目录结构

```
.
├─ 📁.vscode
├─ 📁eslint-config # eslint默认规则
├─ 📁plop # 代码生成能力
├─ 📁shared # 公共部分
│  ├─ 📁components # 公共组件
│  ├─ 📁hooks # 公共vue3 hooks函数
│  ├─ 📁styles # 公共样式
│  └─ 📁utils # 工具类
├─ 📁types # 公共的类型声明文件，可被其他模块的tsconfig.json include
├─ 📁web # 前端项目位置（已经添加到.gitignore中，前端拉取该项目后，自行创建web目录）
│  └─ 📄common.d.ts
├─ 📄.editorconfig
├─ 📄.gitignore
├─ 📄.npmrc
├─ 📄eslint.config.js
├─ 📄LICENSE
├─ 📄package.json
├─ 📄pnpm-lock.yaml
├─ 📄pnpm-workspace.yaml
├─ 📄README.md
├─ 📄tsconfig.json
└─ 📄uno.config.ts
```

## 其他 web 项目怎么使用 fetm 框架？

前端拉取该项目后，自行创建 web 目录，再将项目复制或克隆到 fetm 的 web 目录下，然后即可按需引入 fetm 任何公共部分，以及使用 fetm 的代码生成能力。

## 注意事项

1. 必须使用 `pnpm`