入口的用途​​​

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

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

.
├── .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 项目是一个应用工程，src/ 目录里是应用工程源代码的主要部分，我们称之为【 Universal App 代码（大一统应用代码）】—— 既可以在客户端运行又可以在服务器端运行，有多种运行模式和部署模式，既能实现多页（MPA）的移动端应用，也能实现单页（SPA）的内容网站或中后台项目。

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

注

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

注

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

一个应用入口适用于：

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

多个应用入口适用于：

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

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