前端转flutter——项目架构、初始化

可以用前端项目的思路理解 Flutter，但也要转换一下概念：

> **Flutter 里的页面、按钮、布局、样式，全都是 Widget。**  
> Widget 大概可以理解成前端里的组件 Component。

下面我用“前端转 Flutter”的方式，通俗讲一下：

1. Flutter 项目怎么初始化  
2. 项目目录分别是什么  
3. 项目结构该怎么组织  
4. 推荐一个适合初学者的结构  
5. 如何新增页面、组件、功能模块  

---

# 一、先理解：Flutter 项目和前端项目的对应关系

如果你之前写过 React / Vue，可以这样类比：

| 前端 | Flutter |
|---|---|
| `package.json` | `pubspec.yaml` |
| `npm install` | `flutter pub get` / `flutter pub add` |
| `src/` | `lib/` |
| `main.tsx` / `main.js` | `lib/main.dart` |
| 组件 Component | Widget |
| `render()` | `build()` |
| 函数组件 | `StatelessWidget` |
| 有状态组件 | `StatefulWidget` |
| `setState` | `setState()` |
| React Router / Vue Router | Navigator / GoRouter |
| CSS / Tailwind | Flutter Widget 属性 |
| `div` | `Container` |
| `flex` | `Row` / `Column` / `Flex` |
| 图片资源 `assets` | Flutter `assets` |
| 全局状态管理 | Provider / Riverpod / Bloc |

---

# 二、Flutter 项目初始化

## 1. 安装 Flutter

如果你还没安装，需要先安装 Flutter SDK。

检查环境：

```bash
flutter doctor
```

正常会看到类似：

```text
[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Connected device
```

如果是初学者，可以先用：

- Android 模拟器
- iOS 模拟器
- Chrome 浏览器 Web 调试

---

## 2. 创建项目

进入你要放项目的目录：

```bash
cd ~/projects
```

创建 Flutter 项目：

```bash
flutter create my_app
```

进入项目：

```bash
cd my_app
```

运行项目：

```bash
flutter run
```

如果想指定 Chrome：

```bash
flutter run -d chrome
```

如果设备列表不确定，可以先看设备：

```bash
flutter devices
```

---

## 3. 初始化后的项目长这样

刚创建出来的项目大概是：

```text
my_app/
├── android/
├── ios/
├── web/
├── linux/
├── macos/
├── windows/
├── lib/
│   └── main.dart
├── test/
│   └── widget_test.dart
├── analysis_options.yaml
└── pubspec.yaml
```

作为前端，你可以这样理解：

```text
android/        Android 原生工程
ios/            iOS 原生工程
web/            Web 相关配置
lib/            你的主要代码，相当于前端的 src/
test/           测试目录
pubspec.yaml    相当于 package.json
```

你平时 90% 时间都在改：

```text
lib/
pubspec.yaml
```

---

# 三、`pubspec.yaml` 是什么？

`pubspec.yaml` 类似前端的 `package.json`。

例如：

```yaml
name: my_app
description: A new Flutter project.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
```

其中：

```yaml
dependencies:
```

相当于：

```json
"dependencies": {}
```

安装第三方包：

```bash
flutter pub add go_router
```

相当于前端的：

```bash
npm install react-router
```

安装依赖：

```bash
flutter pub get
```

相当于：

```bash
npm install
```

---

# 四、Flutter 项目最重要的是 `lib/`

Flutter 的业务代码基本都放在：

```text
lib/
```

默认只有一个：

```text
lib/main.dart
```

但是真实项目不要把所有东西都塞进 `main.dart`。

你可以把 `lib/` 理解成前端项目的 `src/`。

前端项目你可能这样组织：

```text
src/
├── main.tsx
├── App.tsx
├── routes/
├── pages/
├── components/
├── hooks/
├── services/
├── utils/
└── styles/
```

Flutter 也可以类似地组织：

```text
lib/
├── main.dart
├── app.dart
├── routes/
├── pages/
├── widgets/
├── services/
├── utils/
├── constants/
└── theme/
```

但更推荐按“功能模块”组织。

---

# 五、初学者推荐的项目结构

一开始不要太复杂。

不要一上来就搞：

```text
data/
domain/
usecases/
entities/
repositories/
```

初学者容易被架构劝退。

推荐你先按这个结构来：

```text
lib/
├── main.dart
├── app.dart
│
├── core/
│   ├── constants/
│   ├── theme/
│   ├── utils/
│   └── widgets/
│
├── features/
│   ├── home/
│   │   ├── home_page.dart
│   │   └── widgets/
│   │
│   ├── counter/
│   │   ├── counter_page.dart
│   │   └── widgets/
│   │
│   └── auth/
│       ├── login_page.dart
│       └── widgets/
│
├── routes/
│   └── app_routes.dart
│
└── services/
    └── api_service.dart
```

---

# 六、这个结构怎么理解？

## 1. `main.dart`

程序入口，相当于前端的：

```ts
main.tsx
```

或者：

```ts
index.tsx
```

它只做启动应用的事情。

---

## 2. `app.dart`

根组件，相当于前端里的：

```jsx
<App />
```

一般放：

```dart
MaterialApp
```

或者：

```dart
MaterialApp.router
```

---

## 3. `routes/`

路由配置，相当于：

```ts
router.tsx
```

例如 React Router：

```tsx
<Routes>
  <Route path="/" element={<Home /> } />
  <Route path="/login" element={<Login /> } />
</Routes>
```

Flutter 里也可以用类似方式组织。

---

## 4. `core/`

公共基础内容。

比如：

```text
core/
├── constants/     常量
├── theme/         主题、颜色、字体
├── utils/         工具函数
└── widgets/       通用组件
```

相当于前端里的：

```text
src/
├── constants/
├── styles/
├── utils/
└── components/
```

---

## 5. `features/`

功能模块，相当于前端的：

```text
src/features/
```

比如：

```text
features/
├── auth/
├── home/
├── profile/
├── settings/
```

每一个 feature 放一个完整功能。

例如登录模块：

```text
features/auth/
├── login_page.dart
├── register_page.dart
├── widgets/
├── services/
└── models/
```

---

# 七、一个最简单的 Flutter 初始化示例

我们把默认项目改造成一个比较清晰的结构。

---

## 1. 创建项目

```bash
flutter create my_app
cd my_app
```

---

## 2. 创建文件夹

macOS / Linux：

```bash
mkdir -p lib/core/theme
mkdir -p lib/core/widgets
mkdir -p lib/core/utils
mkdir -p lib/routes
mkdir -p lib/features/home
mkdir -p lib/features/counter
```

Windows PowerShell：

```powershell
mkdir lib/core/theme -Force
mkdir lib/core/widgets -Force
mkdir lib/core/utils -Force
mkdir lib/routes -Force
mkdir lib/features/home -Force
mkdir lib/features/counter -Force
```

最后结构：

```text
lib/
├── main.dart
├── app.dart
├── core/
│   ├── theme/
│   ├── utils/
│   └── widgets/
├── features/
│   ├── home/
│   └── counter/
└── routes/
```

---

# 八、写入口文件 `main.dart`

把 `lib/main.dart` 改成：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/app.dart';

void main() {
  runApp(const MyApp());
}
```

这里注意：

```dart
import 'package:my_app/app.dart';
```

`my_app` 是你的项目名。

如果你的项目名不是 `my_app`，要改成你自己的项目名。

例如你创建的是：

```bash
flutter create todo_app
```

那就写：

```dart
import 'package:todo_app/app.dart';
```

---

# 九、写根组件 `app.dart`

创建：

```text
lib/app.dart
```

内容：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/counter/counter_page.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的 Flutter 应用',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      home: const HomePage(),
      routes: {
        '/counter': (context) => const CounterPage(),
      },
    );
  }
}
```

这个就像前端的：

```jsx
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/counter" element={<CounterPage />} />
      </Routes>
    </Router>
  );
}
```

---

# 十、写一个首页 `HomePage`

创建：

```text
lib/features/home/home_page.dart
```

内容：

```dart
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('这是首页'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/counter');
              },
              child: const Text('去计数器页面'),
            ),
          ],
        ),
      ),
    );
  }
}
```

你可以把它理解成一个页面组件。

其中：

```dart
Scaffold
```

相当于一个页面的基础骨架，通常包含：

```text
AppBar    顶部导航栏
body      页面主体
floatingActionButton  右下角浮动按钮
drawer    侧边栏
bottomNavigationBar   底部导航
```

---

# 十一、写一个计数器页面 `CounterPage`

创建：

```text
lib/features/counter/counter_page.dart
```

内容：

```dart
import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  void addCount() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('计数器'),
      ),
      body: Center(
        child: Text(
          '当前数字：$count',
          style: const TextStyle(
            fontSize: 24,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addCount,
        child: const Icon(Icons.add),
      ),
    );
  }
}
```

这个非常像前端的有状态组件。

React 里可能是：

```jsx
function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前数字：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
```

Flutter 里是：

```dart
setState(() {
  count++;
});
```

---

# 十二、现在的项目结构

现在你的项目大概是：

```text
lib/
├── main.dart
├── app.dart
│
├── core/
│   ├── theme/
│   ├── utils/
│   └── widgets/
│
├── features/
│   ├── home/
│   │   └── home_page.dart
│   │
│   └── counter/
│       └── counter_page.dart
│
└── routes/
```

虽然 `routes/` 暂时没用上，但后面可以抽出去。

---

# 十三、把通用组件放到 `core/widgets/`

假设我们做一个通用按钮。

创建：

```text
lib/core/widgets/app_button.dart
```

内容：

```dart
import 'package:flutter/material.dart';

class AppButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const AppButton({
    super.key,
    required this.text,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        minimumSize: const Size(double.infinity, 48),
      ),
      child: Text(text),
    );
  }
}
```

这就像前端里的通用按钮组件：

```jsx
<Button text="登录" onClick={handleLogin} />
```

然后在首页使用：

```dart
import 'package:my_app/core/widgets/app_button.dart';
```

修改 `home_page.dart`：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/core/widgets/app_button.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: AppButton(
            text: '去计数器页面',
            onPressed: () {
              Navigator.pushNamed(context, '/counter');
            },
          ),
        ),
      ),
    );
  }
}
```

---

# 十四、项目里的文件是怎么互相引用的？

Flutter 使用 `import`。

例如：

```dart
import 'package:my_app/app.dart';
```

意思是导入：

```text
lib/app.dart
```

再比如：

```dart
import 'package:my_app/features/home/home_page.dart';
```

意思是导入：

```text
lib/features/home/home_page.dart
```

再比如：

```dart
import 'package:my_app/core/widgets/app_button.dart';
```

意思是导入：

```text
lib/core/widgets/app_button.dart
```

你可以把：

```text
package:my_app/
```

理解成：

```text
lib/
```

所以：

```dart
package:my_app/features/home/home_page.dart
```

约等于：

```text
lib/features/home/home_page.dart
```

---

# 十五、什么时候该拆文件夹？

初学者最容易纠结：

> 这个文件该放哪？

给你一个简单判断标准。

---

## 1. 如果只是一个页面

放在对应 feature 里：

```text
features/home/home_page.dart
```

---

## 2. 如果页面里有很多小组件

给这个 feature 建一个 `widgets/`：

```text
features/home/
├── home_page.dart
└── widgets/
    ├── user_card.dart
    ├── banner_card.dart
    └── menu_item.dart
```

---

## 3. 如果多个页面都用到这个组件

放到公共组件：

```text
core/widgets/
```

或者：

```text
shared/widgets/
```

例如：

```text
core/widgets/app_button.dart
core/widgets/loading_view.dart
core/widgets/error_view.dart
```

---

## 4. 如果是接口请求

先放：

```text
lib/services/
```

例如：

```text
services/api_service.dart
```

项目大了以后可以放：

```text
core/network/
```

---

## 5. 如果是工具函数

放：

```text
core/utils/
```

例如：

```text
core/utils/date_utils.dart
core/utils/validators.dart
```

---

# 十六、初学者不要过度设计

很多教程一上来就给你：

```text
data/
domain/
presentation/
repositories/
usecases/
entities/
datasources/
```

这个不是不对，而是对初学者太重了。

刚开始建议你这样：

```text
lib/
├── main.dart
├── app.dart
├── core/
├── features/
└── services/
```

等你项目变大，再慢慢演进：

```text
features/auth/
├── pages/
├── widgets/
├── services/
├── models/
```

再大一点：

```text
features/auth/
├── data/
├── domain/
└── presentation/
```

项目结构是随着项目变大的，不是一开始就必须最复杂。

---

# 十七、推荐你一开始这样组织

我建议你直接用这个版本：

```text
lib/
├── main.dart
├── app.dart
│
├── core/
│   ├── constants/
│   │   └── app_constants.dart
│   ├── theme/
│   │   └── app_theme.dart
│   ├── utils/
│   │   └── validators.dart
│   └── widgets/
│       ├── app_button.dart
│       └── loading_view.dart
│
├── features/
│   ├── home/
│   │   ├── home_page.dart
│   │   └── widgets/
│   │
│   ├── auth/
│   │   ├── login_page.dart
│   │   ├── register_page.dart
│   │   └── widgets/
│   │
│   └── profile/
│       ├── profile_page.dart
│       └── widgets/
│
├── routes/
│   └── app_routes.dart
│
└── services/
    ├── api_service.dart
    └── storage_service.dart
```

这个结构非常适合初学者。

---

# 十八、把主题抽出来

创建：

```text
lib/core/theme/app_theme.dart
```

内容：

```dart
import 'package:flutter/material.dart';

class AppTheme {
  static ThemeData get light {
    return ThemeData(
      useMaterial3: true,
      colorSchemeSeed: Colors.blue,
      appBarTheme: const AppBarTheme(
        centerTitle: true,
      ),
    );
  }

  static ThemeData get dark {
    return ThemeData(
      useMaterial3: true,
      colorSchemeSeed: Colors.blue,
      brightness: Brightness.dark,
    );
  }
}
```

然后 `app.dart` 使用：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/core/theme/app_theme.dart';
import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/counter/counter_page.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的 Flutter 应用',
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      home: const HomePage(),
      routes: {
        '/counter': (context) => const CounterPage(),
      },
    );
  }
}
```

---

# 十九、把路由抽出来

创建：

```text
lib/routes/app_routes.dart
```

内容：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/features/counter/counter_page.dart';
import 'package:my_app/features/home/home_page.dart';

class AppRoutes {
  static const home = '/';
  static const counter = '/counter';

  static Map<String, WidgetBuilder> get routes {
    return {
      home: (context) => const HomePage(),
      counter: (context) => const CounterPage(),
    };
  }
}
```

然后 `app.dart`：

```dart
import 'package:flutter/material.dart';

import 'package:my_app/core/theme/app_theme.dart';
import 'package:my_app/routes/app_routes.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的 Flutter 应用',
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      initialRoute: AppRoutes.home,
      routes: AppRoutes.routes,
    );
  }
}
```

这样路由就集中管理了。

页面跳转：

```dart
Navigator.pushNamed(context, AppRoutes.counter);
```

---

# 二十、如何新增一个功能模块？

比如新增一个 `profile` 页面。

---

## 1. 创建文件夹和文件

```text
lib/features/profile/profile_page.dart
```

内容：

```dart
import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('个人中心'),
      ),
      body: const Center(
        child: Text('这是个人中心'),
      ),
    );
  }
}
```

---

## 2. 添加路由

修改：

```text
lib/routes/app_routes.dart
```

```dart
import 'package:flutter/material.dart';

import 'package:my_app/features/counter/counter_page.dart';
import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/profile/profile_page.dart';

class AppRoutes {
  static const home = '/';
  static const counter = '/counter';
  static const profile = '/profile';

  static Map<String, WidgetBuilder> get routes {
    return {
      home: (context) => const HomePage(),
      counter: (context) => const CounterPage(),
      profile: (context) => const ProfilePage(),
    };
  }
}
```

---

## 3. 从页面跳转

在任意页面里：

```dart
Navigator.pushNamed(context, AppRoutes.profile);
```

---

# 二十一、接口请求怎么放？

初学者可以先建：

```text
lib/services/api_service.dart
```

例如：

```dart
class ApiService {
  Future<Map<String, dynamic>> fetchUserInfo() async {
    // 这里先模拟请求
    await Future.delayed(const Duration(seconds: 1));

    return {
      'name': '张三',
      'age': 18,
    };
  }
}
```

页面中使用：

```dart
final apiService = ApiService();
final user = await apiService.fetchUserInfo();
```

项目大了之后，可以改成：

```text
lib/core/network/api_client.dart
```

但是刚开始不用太复杂。

---

# 二十二、前端转 Flutter 最容易不适应的地方

## 1. 没有 HTML 和 CSS

Flutter 不写：

```html
<div class="container"></div>
```

而是写 Widget：

```dart
Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Hello'),
)
```

---

## 2. 布局主要靠 Row、Column、Stack

例如水平排列：

```dart
Row(
  children: [
    Text('姓名'),
    Text('张三'),
  ],
)
```

垂直排列：

```dart
Column(
  children: [
    Text('第一行'),
    Text('第二行'),
  ],
)
```

层叠布局：

```dart
Stack(
  children: [
    Image.network('xxx'),
    Text('标题'),
  ],
)
```

---

## 3. 一切皆 Widget

页面是 Widget：

```dart
Scaffold
AppBar
Text
Button
Padding
Center
Column
```

全都是 Widget。

---

## 4. 状态更新要告诉 Flutter 重新 build

前端里你可能习惯了：

```js
state.count++
```

然后框架自动更新。

Flutter 里如果是 `StatefulWidget`，要这样：

```dart
setState(() {
  count++;
});
```

意思是：

> 状态变了，请重新执行 build，更新 UI。

---

# 二十三、推荐学习顺序

作为前端转 Flutter，建议按这个顺序学：

## 第一阶段：基础 UI

先熟悉这些：

```text
MaterialApp
Scaffold
AppBar
Text
Container
Row
Column
Stack
ListView
GridView
Image
Icon
ElevatedButton
TextField
```

---

## 第二阶段：页面跳转

学会：

```dart
Navigator.push
Navigator.pushNamed
Navigator.pop
```

或者后面用：

```dart
go_router
```

---

## 第三阶段：状态管理

先会用：

```dart
StatefulWidget
setState
```

再学：

```text
Provider
```

或者：

```text
Riverpod
```

我个人比较推荐初学者学：

```text
Riverpod
```

原因：

- 比 Bloc 简单
- 比全局 Provider 更清晰
- 适合中大型项目
- 和前端状态管理思想比较接近

---

## 第四阶段：网络请求

学习：

```text
http
dio
jsonDecode
FutureBuilder
async/await
```

推荐先用：

```yaml
dio
```

相当于前端里的 axios。

安装：

```bash
flutter pub add dio
```

---

## 第五阶段：项目结构优化

当你写了几个页面之后，再慢慢整理：

```text
features/
core/
shared/
routes/
services/
```

---

# 二十四、一个适合初学者的最终结构

你可以直接按这个来：

```text
lib/
├── main.dart
├── app.dart
│
├── core/
│   ├── constants/
│   ├── theme/
│   ├── utils/
│   └── widgets/
│
├── features/
│   ├── auth/
│   │   ├── login_page.dart
│   │   ├── register_page.dart
│   │   └── widgets/
│   │
│   ├── home/
│   │   ├── home_page.dart
│   │   └── widgets/
│   │
│   └── profile/
│       ├── profile_page.dart
│       └── widgets/
│
├── routes/
│   └── app_routes.dart
│
└── services/
    ├── api_service.dart
    └── storage_service.dart
```

这个结构不会太重，也足够支撑你从入门到做完整项目。

---

# 二十五、记住这几个原则

## 1. `main.dart` 尽量简单

只负责启动。

---

## 2. `app.dart` 放根 Widget

比如：

```dart
MaterialApp
```

---

## 3. 页面按功能模块放

不要这样：

```text
lib/
├── page1.dart
├── page2.dart
├── page3.dart
```

建议：

```text
lib/features/home/home_page.dart
lib/features/auth/login_page.dart
lib/features/profile/profile_page.dart
```

---

## 4. 通用组件放 `core/widgets`

比如：

```text
按钮
输入框
弹窗
加载动画
空状态
错误页
```

---

## 5. 页面太复杂就拆 Widget

如果一个页面的 `build()` 很长，就拆：

```text
home_page.dart
widgets/
├── home_banner.dart
├── home_menu.dart
└── home_list.dart
```

就像前端拆组件一样。

---

## 6. 一开始不要过度架构

先跑起来，再整理。

先能写：

```text
页面
组件
路由
请求
状态
```

再慢慢理解：

```text
repository
usecase
dependency injection
clean architecture
```

---

# 二十六、最后给你一个最简版心智模型

你可以这样记：

```text
main.dart        应用入口
app.dart         根组件
routes/          路由
core/            公共工具、主题、通用组件
features/        业务功能模块
services/        接口请求、本地存储
```

对应前端：

```text
main.dart        main.tsx
app.dart         App.tsx
routes/          router.tsx
core/            utils + styles + common components
features/        pages / features
services/        api / services
```

一句话总结：

> **Flutter 项目组织核心就是：入口归入口，路由归路由，公共能力放 core，业务功能按 feature 拆分。**