---
title: 创建最简单的 MWA
---

## 开始创建

### 1. 创建项目根目录和源代码目录

我们创建名为 `hello-modern` 的项目：

```bash
mkdir -p hello-modern/src
cd hello-modern
```

接下来都在项目根目录下执行命令。

### 2. 在 src 目录下，创建 App.jsx

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="macOS" label="macOS" default>

```bash
touch src/App.jsx
```

</TabItem>
<TabItem value="Windows" label="Windows" >

```bash
ni src/App.jsx
```

</TabItem>
</Tabs>

在 App.jsx 里默认导出一个 React 组件，作为应用的根组件。

```js title="src/App.jsx"
export default function App() {
  return <div>Hello World!</div>;
}
```

### 3. 添加框架依赖

在项目根目录下创建 `package.json`：

<Tabs>
<TabItem value="macOS" label="macOS" default>

```bash
touch package.json
```

</TabItem>
<TabItem value="Windows" label="Windows">

```bash
ni package.json
```

</TabItem>
</Tabs>


复制以下内容到文件里：
```json
{
  "name": "hello-modern",
  "scripts": {},
  "dependencies": {
    "react": "^17",
    "react-dom": "^17",
    "@modern-js/runtime": "^1.0.0"
  },
  "devDependencies": {
    "@modern-js/app-tools": "^1.0.0"
  }
}
```

### 4. 添加框架命令

添加本章节要用的 3 个命令到 `package.json` 的 npm scripts 里：

```json
"scripts": {
  "dev": "modern dev",
  "build": "modern build",
  "start": "modern start"
},
```

## 创建完成

一个基于 Modern.js 框架的 MWA 项目，到这里就已经创建完成了。

目录结构如下：

```md
.
├── src/
│   └── App.jsx
└── package.json
```

可以看到，由于 Modern.js 框架的**默认零配置、约定优于配置、开箱即用、避免样板文件、Universal App** 等设计，即使不借助任何脚手架、生成器、项目模板等工具，纯手动搭建一个项目，整个过程也是极其简单的。

## 安装依赖

```bash
pnpm install
```