Nuxt.js页面构建器：一个模块，构建万千网站

从"写代码"到"搭积木"

传统建站需要写 HTML、调 CSS、接 API——一个首页往往耗费数天。而本项目的页面构建器将这一流程彻底颠覆：你只需要拖拽模块，像搭积木一样拼出页面。左侧是分类清晰的组件面板，右侧是所见即所得的实时画布。从轮播图到文章列表，从评论区到课程播放器——拖过来，配置一下，页面就活了。

更惊人的是，它不只是"静态摆放"。每个模块背后都是一个完整的数据管道：选择"文章列表"模块，配置好分类、排序、分页，系统会自动从 WordPress 拉取数据渲染。你调整的是规则，不是死数据。

七大模块体系，覆盖全场景

构建器的工具栏按功能分为七个分组，覆盖了从内容展示到用户互动的完整链路：

这四十余个模块不是固定模板——每个都有独立的配置表单。比如"文章列表"模块可以配置：显示哪些分类、排序方式、分页数量、缩略图大小、是否显示摘要……仅此一个模块就能衍生出数十种不同的展示形态。

实时多设备预览

桌面端设计完，手机端效果如何？构建器内置三种设备预览——Desktop、Tablet、Mobile——一键切换，实时缩放画布到对应宽度。配合顶部工具栏的缩放滑块（25%~200%），每一个像素的响应式表现都尽在掌控。

这在传统开发流程中需要反复切窗口、调 Chrome DevTools，而这里只需点一个按钮。

数据导入导出：页面即文件

最体现"强大"的功能莫过于数据导入导出。你精心配置的页面可以一键导出为 JSON：

[
  { "type": "carousel", "id": "carousel-xxx", "formData": {...} },
  { "type": "article-list", "id": "article-xxx", "formData": {...} }
]

这个 JSON 文件就是页面的完整蓝图——包含所有模块的配置数据。换个站点、换个环境，导入即还原。这在以下场景中堪称神器：

• 多站点部署：主站配置好首页，导出后批量部署到分站
• A/B 测试：导出两个版本，快速切换对比
• 版本回滚：每次大改前导出一份，改坏了秒还原
• 团队协作：设计师导出配置给开发，开发在一键导入

每页独立设置

除了模块编排，构建器还提供页面级全局设置：

SEC 自定义功能允许你为单个页面注入专属的 CSS 样式——这在传统 CMS 中需要额外插件或改主题代码，而这里内置在构建器里。

技术亮点

markRaw 内存优化：每个模块的 JSON Schema 表单配置可能非常庞大。构建器使用 Vue 的 markRaw API 将这些配置对象标记为永不代理，避免 reactive 的递归追踪。这意味着即使页面上有 50 个模块，响应式系统也只追踪数据引用，不追踪深层字段——内存占用降低 90% 以上。

递归重组：导入/克隆的数据需要合并模块原型 Schema，构建器通过 reorganizePageData 递归遍历所有模块及其子项，使用 radash.assign 智能合并，确保导入的数据不丢失表单配置。

效果作用域隔离：所有数据监听使用 effectScope 包裹，组件卸载时 scope.stop() 一次性清理所有副作用，零内存泄漏。

总结

这个页面构建器不是简单的"可视化编辑"——它是一套完整的页面编排引擎。拖拽模块定义结构，配置表单注入数据规则，导出 JSON 完成迁移。一个人、一个下午，就能搭出一个结构完整、数据动态、多端适配的网站。

适合的网站类型：企业官网、电商商城、在线教育平台、知识付费社区、作品展示站、活动落地页、文档中心、团队介绍页、SaaS 产品页——几乎你能想到的任何内容站，都可以用它搭建。