跳转到主文档

入口的用途​​​

上一章节中,我们介绍了如何编写 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 项目是一个 MWA,src/ 目录里是 MWA 源代码的主要部分,我们称之为【 Universal App 代码(大一统应用代码)】—— 既可以在客户端运行又可以在服务器端运行,有多种运行模式和部署模式,既能实现多页(MPA)的移动端应用,也能实现单页(SPA)的内容网站中后台项目

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

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

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

一个应用入口适用于:

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

多个应用入口适用于:

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

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