rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
65 lines (52 loc) • 2.47 kB
Markdown
---
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 项目可以有一到多个应用入口。
:::note 注
应用入口不止 `App.[jt]sx` 一种，之后章节中会再次介绍。
:::
:::note 注
在不启用 SSG（Static Site Generation）的情况下，Modern.js 会为每一个应用入口，都自动生成一个对应的 HTML，用于在浏览器、WebView 等平台上运行。
一个应用入口适用于：
- 一个中后台应用（SPA）
- 一个桌面应用（SPA、Electron App）
- 一个PWA
- 一个大型的多页网站（SPA + SSR）
- 一个落地页、活动页或分享页
- 一个端内界面
- 一个微前端子应用
- ……
多个应用入口适用于：
- 简单的多页网站（多个 HTML 互相链接）
- 由多种不同类型入口组成的产品『系统』（整个产品不是单一的客户端，而是由多种不同客户端组成，比如同时有落地页、端内界面、端外独立 Web App、后台管理应用）
:::
hello-modern 项目目前是【 单入口 】形式的，我们接下来添加一个新入口，实现这个联系人列表应用的落地页，把项目转变成【 多入口 】形式。