---
title: 入口的用途​​​
---

上一章节中，我们介绍了如何编写 UI 组件。

这一章节中，继续沿用之前的代码，到目前为止，hello-modern 的目录结构是这样的：

```md
.
├── .vscode/
├── src/
│   ├── components/
│   │   ├── Avatar/
│   │   │   ├── index.stories.tsx
│   │   │   └── index.tsx
│   │   └── Item/
│   │       ├── index.test.tsx
│   │       └── index.tsx
│   ├── styles/
│   │   └── utils.css
│   ├── .eslintrc.json
│   ├── App.css
│   ├── App.tsx
│   └── modern-app-env.d.ts
├── .editorconfig
├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
```

hello-modern 项目是一个 MWA，`src/` 目录里是 MWA 源代码的主要部分，我们称之为【 Universal App 代码（大一统应用代码）】—— 既可以在客户端运行又可以在服务器端运行，有多种运行模式和部署模式，既能实现多页（MPA）的[移动端应用](/docs/start/mobile)，也能实现单页（SPA）的[内容网站](/docs/start/website)或[中后台项目](/docs/start/admin)。

我们把 `src/App.tsx` 称作【 应用入口（App Entry）】，一个 MWA 项目可以有一到多个应用入口。

:::info 注
应用入口不止 `App.[jt]sx` 一种，之后章节中会再次介绍。
:::

:::info 注
在不启用 SSG（Static Site Generation）的情况下，Modern.js 会为每一个应用入口，都自动生成一个对应的 HTML，用于在浏览器、WebView 等平台上运行。

一个应用入口适用于：

- 一个中后台应用（SPA）
- 一个桌面应用（SPA、Electron App）
- 一个PWA
- 一个大型的多页网站（SPA + SSR）
- 一个落地页、活动页或分享页
- 一个端内界面
- 一个微前端子应用
- ……

多个应用入口适用于：

- 简单的多页网站（多个 HTML 互相链接）
- 由多种不同类型入口组成的产品『系统』（整个产品不是单一的客户端，而是由多种不同客户端组成，比如同时有落地页、端内界面、端外独立 Web App、后台管理应用）
:::

hello-modern 项目目前是【 单入口 】形式的，我们接下来添加一个新入口，实现这个联系人列表应用的落地页，把项目转变成【 多入口 】形式。