从下载、初始化到生成页面的完整配置路径

先完成接入,再逐步细化模板与规则。

本页聚焦实际使用路径,按“安装、初始化、创建页面、配置、生成结果”展开, 适合第一次接触 `create-page-common` 的开发人员快速定位配置入口。

安装与启动

推荐先直接运行 `create-page-common`,它包含完整的工作台、服务端与模板目录。

步骤 1

下载或克隆仓库源码。

# 克隆主仓库
git clone https://gitee.com/rwx666888/create-page-common.git

# 或下载压缩包后手动解压
# https://gitee.com/rwx666888/create-page-common/repository/archive/dev.zip
注释说明:首次使用建议直接下载完整仓库,因为服务端、前端工作台和模板文件都在这里。
步骤 2

进入 `server` 目录安装依赖。

# 进入服务端目录
cd create-page-common/server

# 安装依赖
npm i
注释说明:`server` 目录负责启动服务并装载 `create_cfg_tmpl` 下的配置和模板。
步骤 3

根据目标模板启动服务。

# Vue2 + Element UI
npm run vue2

# Vue3 + Element Plus
npm run vue3
注释说明:`vue2` 对应 Vue2 + Element UI;`vue3` 对应 Vue3 + Element Plus。

版本建议: 文档建议 Node 14 附近版本;高版本环境如遇依赖异常,可优先切回兼容版本再排查。

初始化项目

初始化的目标是让生成器拿到两类信息:Swagger 数据源,以及目标项目根路径。

1. 填写 Swagger 地址

支持在线 URL、本地 yaml、本地 json。初始化后会解析接口、字段、tags 分组等信息。

# 在线 swagger 地址
https://example.com/swagger.json

# 或本地 swagger 文件
swagger 文本粘贴到输入框中即可
注释说明:如果接口文档解析失败,后续页面创建区将无法正确列出 API。

2. 填写目标项目根路径

目标项目根路径就是最终写入视图、API、路由文件的位置。

# 目标项目根路径示例
D:/workspace/your-admin-project
注释说明:路径填错会直接导致生成位置不对,或校验目标项目结构失败。
初始化项目

创建页面

初始化成功后,就可以围绕某个 API 配置页面结构。常用流程如下。

步骤 1

选择页面类型。当前常见类型包括列表页、详情页、表单页。

# 页面类型示例
- listPage   列表页
- infoPage   详情页
- formPage   表单页
注释说明:这些页面类型最终会映射到 `template` 配置中的不同模板文件。
步骤 2

选择对应接口,并按需调整字段显示、显示顺序、表单元素类型等信息。

创建页面
步骤 3

为字段补充表单验证规则。常见规则包括 `required`、`trigger`、`type` 等。

表单验证
{
  required: true,
  message: "请输入用户名",
  trigger: "blur"
}
注释说明:验证配置会进入页面模板,最终拼成表单 rules 对象。
步骤 4

根据表单元素类型打开“组件配置”,设置组件属性与数据源。

组件配置
{
  placeholder: "请选择状态",
  clearable: true,
  multiple: false
}
注释说明:这里配置的是组件属性,最终会通过模板过滤器写入生成后的组件标签中。
步骤 5

如果是字典类组件,还可以配置本地静态数据源。

数据源配置
[
  { value: 1, label: "启用" },
  { value: 0, label: "停用" }
]
注释说明:目前主要支持本地静态数据源,且可尝试从字段描述中自动提取字典信息。
步骤 6

点击“生成”按钮,输出页面、API、路由与 mock 文件。

生成页面

ajax / request 配置

如果希望生成后的 API 文件能直接运行,目标项目中的请求模块必须导出 `get`、`post`、`del`、`put` 方法,并且参数结构要兼容生成器默认格式。

请求方法导出

配置定位:`server/create_cfg_tmpl/<模板>/config/config.js -> projectPath -> httpFile`,先确保这里指向的请求文件路径正确。

# 目标请求文件示例
import axios from "axios";

const instance = axios.create({
  baseURL: "/api"
});

# 导出 get / post / del / put
export const post = (url, data, config = {}) => instance.post(url, data, config);
export const get = (url, params, config = {}) => instance.get(url, {
  params,
  ...config
});
export const del = (url, data, config = {}) => instance.delete(url, {
  data,
  ...config
});
export const put = (url, params, config = {}) => instance.put(url, params, config);
注释说明:如果你的项目只有 `get` 和 `post`,也可以只保留这两个导出;前提是你关闭不需要的 API 生成,或手动补齐生成后的文件。

关闭 API 文件自动生成

配置定位:`server/create_cfg_tmpl/<模板>/config/config.js -> makeFile -> isMakeApi`。修改后需要重启服务。

关闭 API 生成: 如果请求层格式完全不兼容,可把 `makeFile.isMakeApi` 设为 `false`,由人工维护 API 文件。

# 配置路径:config.js -> makeFile -> isMakeApi
makeFile: {
  isMakeView: true,
  isMakeApi: false,
  isMakeRouter: true,
  isMakeMock: false
}
注释说明:关闭 API 生成后,页面和路由仍可正常生成,只是相关接口文件改为手动维护。

如果你的项目中确实存在同名导出方法,但方法参数定义不满足 `(url, data, config)` 这一类默认格式,还可以继续修改 API 生成配置。

# 修改位置:
# web-project/src/mixins/create.js -> _fnMakeApiCfg()
#
# 处理方式:
# 1. 找到 _fnMakeApiCfg 方法
# 2. 调整 return 对象中的 type 属性值
# 3. 让生成器输出的请求方法名,和你的项目请求封装保持一致
注释说明:这种方式适合项目已有固定请求封装,但你仍希望保留 API 文件自动生成能力的场景。

常用全局配置

配置文件位于 `server/create_cfg_tmpl/**/config/config.js`,模板文件位于 `server/create_cfg_tmpl/**/template/`。下面列出最常用、最需要先理解的配置项。

重要: 修改配置文件后需要重启 `server` 服务;修改模板文件通常刷新页面即可生效。

注意: `web-project/public/tmpl_cfg` 与 `server/www/tmpl_cfg` 下的文件属于临时产物,启动时会被源模板覆盖,不建议直接修改。

1. 响应模型配置

用于告诉生成器如何从接口响应结构中提取真正的数据内容。

# 配置路径:config.js -> responseModel
responseModel: {
  hasWrapper: false, // [true|false] [必须] 是否有包装层,例如:{ code: 0, data: {}, msg: 'success' }
  codeKey: "code",   // 状态码键名,hasWrapper 为 true 时必填
  dataKey: "body",   // 数据键名,hasWrapper 为 true 时必填
  msgKey: "msg"      // [可选] 提示消息键名
}
注释说明:如果你的接口返回结构是 `{ code, body, msg }` 这种包装层格式,这里必须配置正确。

2. 生成文件开关

控制要不要生成页面、API、路由、mock,以及是否启用路由分组。

# 配置路径:config.js -> makeFile
# 生成文件的配置
makeFile: {
  isMakeView: true,      // 是否生成视图文件
  isMakeApi: true,       // 是否生成 API 文件
  isMakeRouter: true,    // 是否生成路由文件
  isMakeMock: false,     // 是否生成 mock 数据文件
  useRouterGroup: false  // 是否启用路由分组;启用后按 tag 拆分子路由文件
}
注释说明:建议第一次接入时先只生成页面、API、路由,确认主链路正常后再考虑 mock 或分组路由。

3. 目标项目路径

决定生成器把文件写到什么位置,以及路由解析时如何识别已有页面路径。

# 配置路径:config.js -> projectPath
projectPath: {
  apisFilePath: "src/apis",         // API 文件保存目录(相对目标项目根目录)
  httpFile: "@/apis/request.js",    // 请求封装文件路径(供生成 API 文件引用)
  routerFile: "src/router/index.js",// 主路由文件路径
  routerMatchMark: "@/views/"       // 路由中用于匹配页面路径的标记
}
注释说明:这部分最直接决定生成结果是否能落到正确目录。

4. 模板路径配置

不同类型页面分别对应不同模板文件与输出目录。

# 配置路径:config.js -> template
template: {
  listPage: {
    savePath: "src/views",            // 列表页输出目录
    suffix: "-list",                  // 文件名后缀
    dirSuffix: "-page",               // 目录名后缀
    template: "page/list-page.art"    // 使用的模板文件
  },
  infoPage: {
    savePath: "src/views",            // 详情页输出目录
    suffix: "-info",                  // 文件名后缀
    dirSuffix: "-page",               // 目录名后缀
    template: "page/info-page.art"    // 使用的模板文件
  },
  formPage: {
    savePath: "src/views",            // 表单页输出目录
    suffix: "-form",                  // 文件名后缀
    dirSuffix: "-page",               // 目录名后缀
    template: "page/form-page.art"    // 使用的模板文件
  }
}
注释说明:如果你的项目目录结构、命名后缀和默认模板不同,就从这里开始改。

5. 表单组件配置

定义有哪些表单元素、默认校验方式、组件路径和数据源能力。

# 配置路径:config.js -> formItemOpts
formItemOpts: [
  {
    value: "input", // 组件类型标识,需与模板文件名对应
    label: "单行文本框", // 在工作台显示的名称
    valid: {
      trigger: "blur" // 默认校验触发方式
    }
  },
  {
    value: "select", // 下拉组件
    label: "下拉选择框", // 显示名称
    valid: {
      trigger: "change" // 下拉通常在 change 时校验
    },
    dataSource: {
      dataType: "array", // 数据源类型
      default: [{ value: null, label: "全部" }]
    }
  },
  {
    value: "cusDatePicker", // 自定义组件类型
    label: "日期选择器(双)", // 显示名称
    path: "@/components/cusDatePicker/index.vue", // 组件导入路径
    valid: {
      trigger: "change",
      type: "date" // 默认校验数据类型
    }
  }
]
注释说明:这里决定“字段默认匹配成什么控件”,也是扩展自定义组件时最核心的入口之一。

6. 自动识别规则

根据字段名称或类型自动匹配日期组件、多选组件等常见表单元素。

# 配置路径:config.js -> formFieldDetection / formItemCig
formFieldDetection: {
  findDate: true, // 自动识别日期相关字段
  findArray: true // 自动识别数组/多选相关字段
},
formItemCig: {
  dataTimeRangeRegExp: "^(start|end|begin)|(start|end|begin)$", // 时间范围字段识别规则
  isStartRegExp: "^(start|begin)|(start|begin)$" // 起始字段识别规则
}
注释说明:如果字段自动匹配结果不符合项目习惯,可以从这里调整检测规则。

7. mock 数据规则

用于根据字段名称猜测 mock 数据类型,例如姓名、手机号、日期、城市等。

# 配置路径:config.js -> mockCig
mockCig: {
  columnTypeMap: {
    integer: /integer/, // 数值类型
    name: /(title|name$)/i, // 名称字段
    city: /(^city|city$)/i, // 城市字段
    phone: /(^(phone|mobile)|(phone|mobile)$)/i, // 手机号字段
    date: /(^date|date$)|birthday/i // 日期字段
  }
}
注释说明:这部分只在需要生成 mock 文件时更关键;如果你不生成 mock,可以先不调整。

表单验证配置

表单验证提示信息通常位于 `config-form-valid-msg.js`。修改后建议重启服务,以保证工作台中使用的是最新规则。

export default {
  required: "{label}不能为空",
  email: "{label}格式不正确",
  phone: "{label}格式不正确"
}
注释说明:这类配置主要影响默认提示信息与表单规则生成结果,适合统一团队校验文案风格。

常见问题

1. 为什么修改配置后页面没变化?

处理方式:
1. 重启 server 服务
2. 刷新浏览器,必要时使用 Ctrl + F5
3. 确认修改的是 create_cfg_tmpl 下的源配置,而不是 tmpl_cfg 临时文件
注释说明:这是最常见的问题,尤其是在同时改模板和配置时容易混淆。

2. 为什么生成后的 API 文件不能直接运行?

优先检查:
1. httpFile 指向的请求文件是否存在
2. 请求文件是否导出 get / post / del / put
3. 方法参数是否与生成器默认格式兼容
注释说明:如果不兼容,最稳妥的做法是先关闭 API 生成,等模板改完后再打开。

3. 字段自动匹配的组件不符合预期怎么办?

优先排查:
1. formFieldDetection 是否开启
2. formItemCig 中的正则是否符合你的字段命名
3. formItemOpts 中是否声明了想要的组件
注释说明:大多数自动匹配问题都可以通过调整字段检测规则和组件声明来解决。