在现有项目中使用 flu-cli

flu-cli 不仅可以用于创建新项目，也可以轻松集成到任何现有的 Flutter 项目中。通过简单的配置，你就可以在老项目中使用 flu-cli add 命令来快速生成代码。

核心原理

flu-cli 的代码生成功能主要依赖于以下两点：

1. 项目配置文件 (.flu-cli.json): flu-cli 会读取项目根目录下的配置文件来确定生成路径、默认类型等。VSCode 扩展也会读取此配置来提供智能代码片段。
2. 目录结构检测: flu-cli 会尝试检测项目的目录结构（Lite/Modular/Clean），以确定文件生成的默认路径。如果检测失败，它会使用默认的 lib/pages, lib/widgets 等路径。

集成步骤

1. 安装 flu-cli

如果你还没有安装 flu-cli，请先全局安装：

npm install -g flu-cli

2. 初始化项目配置

在你的现有项目根目录下，运行以下命令来初始化配置文件：

flu-cli config init

这将在你的项目中创建 .flu-cli.json 配置文件。

TIP

配置文件会根据你的项目结构自动生成默认配置。你可以根据实际需求修改它。

3. 关键：自定义配置

这是最重要的一步。默认配置可能不完全符合你的项目结构。你需要打开 .flu-cli.json 文件，根据你的项目实际情况进行修改：

配置示例

{
    "template": "custom",
    "generators": {
        "page": {
            "path": "lib/ui/pages",           // 你的页面路径
            "defaultType": "stateful",         // 默认类型
            "withViewModel": true,             // 是否生成 ViewModel
            "withBasePage": false,             // 是否使用 BasePage
            "basePageClass": "MyBasePage",     // 自定义 BasePage 类名
            "basePageImport": "package:your_app/core/base_page.dart"  // BasePage 导入路径
        },
        "viewModel": {
            "path": "lib/viewmodels",
            "withBaseViewModel": false,        // 是否使用 BaseViewModel
            "baseViewModelClass": "MyBaseViewModel",
            "baseViewModelImport": "package:your_app/core/base_viewmodel.dart"
        },
        "widget": {
            "path": "lib/ui/widgets",
            "defaultType": "stateless"
        },
        "model": {
            "path": "lib/data/models"
        },
        "service": {
            "path": "lib/services"
        }
    }
}

配置说明

• withBasePage: 如果你的项目不使用 BasePage，设置为 false
• withViewModel: 是否在生成页面时自动生成 ViewModel
• path: 各类型文件的生成路径，根据你的项目结构调整
• basePageClass / basePageImport: 如果你有自定义的基类，在这里配置

4. 开始使用

配置完成后，你就可以像在 flu-cli 创建的项目中一样使用 add 命令了：

# 生成页面（会根据配置决定是否生成 ViewModel）
flu-cli add page user_profile

# 生成 Widget
flu-cli add widget custom_button

# 生成 Service
flu-cli add service api

# 生成 Model
flu-cli add model user

5. VSCode 扩展智能代码片段

如果你安装了 Flu CLI VSCode 扩展，它会自动读取 .flu-cli.json 配置，并提供智能代码片段：

• 打开 .dart 文件时扩展会自动激活
• 输入 st 会根据配置显示适合的代码片段
• 如果 withBasePage: false，BasePage 相关的代码片段会自动隐藏

无需手动同步或配置，一切都是自动的！

常见问题

1. 生成的代码报错 "Target of URI doesn't exist"

原因: 生成的代码引用了不存在的基类文件（如 base_page.dart）。 解决: 请在 .flu-cli.json 中设置 withBasePage: false，或者配置正确的 basePageImport 路径。

2. 生成的文件位置不对

原因: flu-cli 未能识别你的项目结构，使用了默认路径（如 lib/pages）。 解决:

• 如果你的项目结构比较特殊，目前 flu-cli 默认会生成到 lib/pages。
• 你可以手动移动生成的文件。
• 或者，如果你的项目是模块化的，尝试使用 -f 参数指定模块：

  # 这通常会尝试在 lib/features/shop/pages 下生成
  flu-cli add page product -f shop

3. 想要生成纯 Flutter 代码（不带 ViewModel）

如果你只想生成简单的 UI，可以：

1. 在 .flu-cli.json 中设置 withViewModel: false
2. 或者使用命令行参数：

flu-cli add page simple --stateless --no-vm

4. VSCode 代码片段不显示

原因: 扩展未激活或配置文件未正确读取。 解决:

1. 确保已安装 Flu CLI VSCode 扩展
2. 打开 .dart 文件触发扩展激活
3. 检查 .flu-cli.json 文件是否在项目根目录
4. 尝试重启 VSCode