---
title: 用 new 命令创建入口​​​
---

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

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

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

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

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

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

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

```md
.
├── .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`，显示：

![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/landing-page.png)

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

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

## 手动调整应用入口

Modern.js 框架的设计原则之一是【[约定优于配置（Convention over Configuration）](https://en.wikipedia.org/wiki/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`。

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

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

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

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

```bash
mv src/hello-modern src/contacts
```

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

![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/contacts.png)

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

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c07/hello-modern-2)。