MFE-starter 项目教程

MFE-starter 项目教程

MFE-starterMFE Starter项目地址:https://gitcode.com/gh_mirrors/mf/MFE-starter

1. 项目的目录结构及介绍

MFE-starter 项目的目录结构如下：

MFE-starter/
├── apps/
│   ├── shell/
│   └── mfe1/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json

目录介绍

• apps/: 包含所有微前端应用，例如 shell 和 mfe1。
• libs/: 包含共享的库代码。
• tools/: 包含项目工具和脚本。
• workspace.json: Nx 工作区配置文件。
• nx.json: Nx 配置文件。
• package.json: 项目依赖和脚本。
• tsconfig.base.json: TypeScript 基础配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 apps/ 目录下，每个应用都有自己的启动文件。以 shell 应用为例：

apps/shell/
├── src/
│   ├── main.ts
│   ├── index.html
│   └── ...
├── tsconfig.app.json
└── ...

启动文件介绍

• main.ts: 应用的主入口文件，负责初始化和启动 Angular 应用。
• index.html: 应用的根 HTML 文件。
• tsconfig.app.json: TypeScript 配置文件，用于应用的编译。

3. 项目的配置文件介绍

项目的配置文件主要位于项目根目录和 apps/ 目录下。

配置文件介绍

• workspace.json: 定义了工作区中的项目和任务。
• nx.json: 包含 Nx 的配置选项，如缓存、任务调度等。
• package.json: 定义了项目的依赖和脚本，如 start、build 等。
• tsconfig.base.json: 基础 TypeScript 配置，被其他配置文件继承。

每个应用还有自己的配置文件，如 tsconfig.app.json，用于特定应用的 TypeScript 配置。

以上是 MFE-starter 项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

MFE-starterMFE Starter项目地址:https://gitcode.com/gh_mirrors/mf/MFE-starter