用 new 命令创建入口​​​

Modern.js 支持自动创建新入口，前面的章节中提到过，pnpm run new 可以启用可选功能。

我们也可以通过它来创建新的工程元素，在项目根目录下执行 pnpm run new：

# 请选择你想要的操作
❯ 创建工程元素
  启用可选功能

# 创建工程元素
❯ 新建「应用入口」
  新建「Server 自定义」源码目录

# 请填写入口名称
- landing-page

# 是否需要调整默认配置
❯ 否
  是

创建完成，项目会变成这样：

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

可以看到联系人列表应用的文件，都被自动重构到 src/hello-modern/ 里。

同时新建了一个 src/landing-page/，里面同样有 App.tsx（pnpm run new 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）

执行 pnpm run dev，显示：

访问 http://localhost:8080/，可以像之前一样看到联系人列表应用。

访问 http://localhost:8080/landing-page，可以看到刚创建的新入口 landing-page 的页面（Modern.js 自动生成的默认页面）。

手动调整应用入口

Modern.js 框架的设计原则之一是【约定优于配置（Convention over Configuration）】，多数情况下可以按约定直接写代码，不需要做任何配置，这里 src/ 中的目录结构就是一种约定：

src/hello-modern/ 和 src/landing-page/ 被自动识别为两个应用入口：hello-modern 和 landing-page。

其中 src/hello-modern/ 的目录名跟项目名（package.json 里的 name）一致，会被认为是项目主入口，项目 URL 的根路径（开发环境里默认是 http://localhost:8080/）会自动指向主入口。

其他入口的 URL，是在根路径后追加入口名，比如 http://localhost:8080/landing-page。

注

src/ 下如果有 App.[jt]sx，就认为这个应用工程是单入口的，src/ 下的其他文件和目录，都会被视为入口内部的文件。

src/ 下如果没有 App.[jt]sx，那么 src/ 下一级目录里，如果有 App.[jt]sx，这个目录就会被视为一个应用入口。

App.jsx 被看作约定中标识，也有其他形式的标识，之后的章节中会继续介绍。

接下来，我们把 src/hello-modern/App.tsx 重命名为 src/contacts/App.tsx：

mv src/hello-modern src/contacts

再次执行 pnpm run dev，结果变成：

现在不再有主入口，联系人列表现在是一个普通入口，需要用 http://localhost:8080/contacts 访问。

---

本小节的代码可以在这里查看。