市面上的 WordPress 页面构建器不少，Elementor、Visual Composer、Brizy… 用过都知道，要么功能受限，要么性能拉胯，要么升级就炸。
瓜奇的构建器不一样，它不是个”页面编辑器”，而是一套完整的低代码开发框架。
在 WordPress 生态里的独特性
传统 WP 构建器的痛点
Elementor 这类构建器的问题是啥？
- 性能差
- 生成的代码臃肿，一堆 div 嵌套
- 每个组件都要加载一堆 CSS/JS
- 页面一复杂，加载慢得要死
- 扩展难
- 想加个自定义组件？得写插件
- 想改个现有组件？改核心文件，升级就没了
- 二开成本比从头写还高
- 绑定太紧
- 构建器的数据跟 WP 后台绑死了
- 换个主题？数据格式不兼容
- 升级构建器？页面可能全乱
- 功能受限
- 只能做页面展示
- 复杂业务逻辑？搞不定
- 想做个表单提交？还得靠插件
瓜奇构建器的架构差异
瓜奇的 Layers 机制：
// nuxt.config.ts
extends: [
"./layers/base", // 基础层：核心组件和功能
"./layers/custom" // 自定义层：你的二开代码
]这意味着啥？
- 构建器是个独立的 Layer，不是核心的一部分
- 你可以不用构建器，直接写代码
- 也可以用构建器快速搭，再写代码深度定制
- 构建器和手写代码是同一套机制，不冲突
传统 WP 构建器：
WP 主题 ← 构建器插件（额外加一层）
↓
生成的是特殊格式的数据
只能用构建器编辑瓜奇：
base 层（基础组件）← builder 层（可视化编辑）← custom 层（你的代码）
↓
生成的是标准的组件配置
可以用手写代码覆盖易用性和灵活性
拖拽布局，所见即所得
瓜奇的构建器界面分三栏：
┌──────────────────────────────────────────────┐
│ 左侧：组件列表 │ 中间：实时预览 │ 右侧：属性配置 │
│ │ │ │
│ 📦 文章模块 │ [页面实际渲染] │ 标题：______ │
│ 🛍️ 商品模块 │ │ 样式：______ │
│ 📋 表单模块 │ │ 动画：______ │
│ 🎨 轮播图 │ │ │
│ ... │ │ │
└──────────────────────────────────────────────┘关键点：
- 中间预览区是真实渲染，不是假的预览
- 你看到的跟用户看到的一模一样
- 支持 PC/平板/手机三种设备切换预览
- 每个设备可以有不同的布局
配置化，不需要写代码
每个组件都有一套标准化的配置：
// 组件配置示例
{
type: "commonModulePost", // 组件类型
id: "module_12345", // 唯一 ID
settings: {
title: "最新文章", // 显示标题
first: 10, // 显示数量
orderby: "DATE", // 排序方式
columns: 3, // 列数
box: { // 样式配置
padding: "20px",
background: "#f5f5f5"
}
}
}用户在构建器里做什么？
- 选组件
- 填配置
- 拖位置
不需要写一行代码。
但这不是重点
光说拖拽配置，市面上构建器都能做。
瓜奇的厉害之处在于：这些配置可以转换成代码。
// 构建器生成的配置，可以直接用在代码里
const modules = [
{
type: "commonModulePost",
settings: { /* ... */ }
}
]
// 在你的自定义组件里直接用
<template v-for="module in modules">
<component :is="module.type" :settings="module.settings" />
</template>这意味着：
- 构建器不是个封闭系统
- 配置可以在代码里复用
- 可视化编辑和代码开发是互通的
可扩展性：类 WP 子主题机制
瓜奇允许你层级式地扩展和覆盖
类比 WP 的子主题：
WP 子主题：
parent-theme/ ← 父主题（不能改）
├── header.php
└── footer.php
child-theme/ ← 子主题（可以覆盖）
├── header.php ← 覆盖父主题的 header
└── functions.php ← 新增功能瓜奇的 Layer 机制：
layers/base/ ← 基础层（核心组件）
├── components/
│ ├── header.vue
│ └── footer.vue
└── composables/
layers/custom/ ← 自定义层（你的二开）
├── components/
│ ├── header.vue ← 覆盖 base 的 header
│ └── custom/
│ └── myModule.vue ← 新增组件
└── composables/
└── myUtils.js ← 新增工具函数怎么覆盖组件？
很简单，复制一份到 custom 层，改就完了。
假设你想改文章列表组件的样式：
# 原始组件在
layers/builder/app/components/builder/settings/modules/commonModulePost.vue
# 复制到 custom 层
cp layers/custom/app/components/builder/settings/modules/commonModulePost.vue
# 然后随便改，不影响升级瓜奇会自动使用 custom 层的组件，覆盖 base 和 builder 层。
升级瓜奇的时候：
git pull origin main # 更新 base
# custom 层不会被覆盖
# 你的修改安全得很支持自定义组件，几乎可以实现任何功能
91+ 内置组件
瓜奇构建器目前有 91 个组件设置模块：
内容类：
- 文章模块、商品模块、文档模块
- 话题模块、链接模块、社区模块
布局类：
- 网格、轮播图、磁贴区域
- 垂直菜单、锚点导航
交互类：
- 表单、聊天、签到
- 优惠券、推广、会员
功能类：
- HTML 代码（随便写）
- 自定义模块（完全自定义）
组件的标准化接口
每个组件都遵循同一个接口规范：
// 组件 Props
{
data: {}, // GraphQL 返回的数据
settings: {}, // 组件配置
id: "", // 组件唯一 ID
archive: {} // 页面上下文
}好处：
- 写一次，到处复用
- 不同组件之间数据结构统一
- 可以组件组合组件
多少个组件可以有 N 种组合
组件组合的威力
假设你有 20 个组件：
20 个组件选 1 个 = 20 种可能
20 个组件选 2 个 = 20 × 19 = 380 种
20 个组件选 3 个 = 20 × 19 × 18 = 6,840 种
...实际上瓜奇有 91+ 个组件，组合数量是天文数字。
但更重要的是：组件可以无限嵌套。
{
type: "commonModuleGrid", // 网格组件
settings: {
columns: 2,
items: [
{
type: "commonModulePost", // 左边是文章列表
settings: { first: 5 }
},
{
type: "commonModuleForm", // 右边是表单
settings: { formId: 123 }
}
]
}
}复杂布局可以这样搭：
页面
├── Header（全局）
├── 顶部 Banner（轮播图）
├── 内容区（网格 2 列）
│ ├── 左：文章列表（10 篇）
│ └── 右：侧边栏
│ ├── 最新文章
│ ├── 分类菜单
│ └── 联系表单
└── Footer（全局）每个节点都是一个组件，可以独立配置、独立替换。
配置即代码，代码即配置
传统构建器：
- 生成的数据是特殊格式
- 只能在构建器里编辑
- 想批量改？得一个一个点
瓜奇：
- 配置就是 JSON
- 可以用代码批量生成
- 可以用 Git 管理
- 可以做版本控制
// 用代码批量生成页面
const pageConfig = {
modules: [
{
type: "commonModulePost",
settings: {
title: "最新文章",
first: 10
}
},
{
type: "commonModuleProduct",
settings: {
title: "热销商品",
first: 5
}
}
]
};
// 保存到数据库
await useRequest("/api/request", {
method: "POST",
body: {
action: "builder.savePage",
data: { config: pageConfig }
}
});这意味着：
- 可以用脚本批量创建页面
- 可以做模板系统
- 可以做 A/B 测试
- 可以做动态布局
其他细节优势
1. 热更新，所见即所得
改了 custom 层的组件：
# 文件保存，自动热更新
# 不需要刷新浏览器
# 不需要重新构建开发效率极高。
2. 类型安全
// 组件有完整的 TypeScript 类型定义
const props = defineProps<{
data?: GqlPostData;
settings?: GqlModuleSettings;
id: string;
archive?: GqlArchiveContext;
}>();开发时有智能提示，不会写错。
3. 性能优化
构建器生成的页面：
- 是标准的 Nuxt 页面
- 支持 SSR（服务端渲染）
- 支持代码分割
- 支持懒加载
不是像 Elementor 那种臃肿的 DOM 结构。
4. 多设备支持
每个组件可以针对不同设备设置不同配置：
{
type: "commonModulePost",
settings: {
desktop: {
columns: 3, // PC 显示 3 列
first: 12
},
tablet: {
columns: 2, // 平板显示 2 列
first: 8
},
mobile: {
columns: 1, // 手机显示 1 列
first: 5
}
}
}不是简单的响应式，是真的不同布局。
5. 跟手写代码完全互通
用构建器搭好的页面：
// 可以在代码里读取配置
const pageConfig = await usePageConfig();
// 可以修改配置
pageConfig.modules[0].settings.first = 20;
// 可以动态添加组件
pageConfig.modules.push({
type: "custom.myComponent",
settings: { /* ... */ }
});构建器和手写代码不是两个世界，是同一套机制。
总结
瓜奇的低代码构建器不是个”页面编辑器”，而是：
1. 可视化编辑工具
- 拖拽配置，所见即所得
- 不懂代码也能搭出复杂页面
2. 组件开发框架
- 91+ 内置组件
- 支持自定义组件
- 标准化接口，易于扩展
3. Layer 架构
- 类 WP 子主题机制
- custom 层覆盖不惧升级
- 代码和可视化编辑互通
4. 配置即代码
- JSON 配置，易于管理
- 支持 Git、版本控制
- 可以批量生成、脚本化
5. 性能和灵活性兼备
- 不是传统构建器的臃肿 DOM
- 是标准的 Nuxt 页面
- 支持 SSR、代码分割、懒加载
市面上的构建器：
- 要么易用但不灵活
- 要么灵活但难用
- 要么升级就炸
瓜奇：
- 易用：拖拽配置
- 灵活：Layer 机制，随便改
- 安全：custom 层不惧升级
这不是个页面编辑器，而是一套完整的低代码开发框架。
在 WordPress 生态里，瓜奇的构建器是独一份。