Nuxt.js頁面建構器：一個模組，構建萬千網站

從「寫程式碼」到「堆積木」

傳統建站需要寫 HTML、調 CSS、接 API——一個首頁往往耗費數天。而本專案的頁面建構器將此流程徹底顛覆：你只需要拖曳模組，像堆積木一樣拼出頁面。左側是分類清晰的元件面板，右側是所見即所得的即時畫布。從輪播圖到文章列表，從評論區到課程播放器——拖過來，設定一下，頁面就活了。

更驚人的是，它不只是「靜態擺放」。每個模組背後都是一個完整的資料管道：選擇「文章列表」模組，設定好分類、排序、分頁，系統會自動從 WordPress 拉取資料渲染。你調整的是規則，不是死資料。

七大模組體系，覆蓋全場景

建構器的工具列按功能分為七個分組，覆蓋了從內容展示到使用者互動的完整鏈路：

這四十餘個模組不是固定模板——每個都有獨立的設定表單。僅「文章列表」一個模組就能衍生出數十種不同的展示形態。

即時多裝置預覽

桌面端設計完，手機端效果如何？建構器內建三種裝置預覽——Desktop、Tablet、Mobile——一鍵切換，即時縮放畫布到對應寬度。配合頂部工具列的縮放滑桿（25%~200%），每一個像素的響應式表現都盡在掌控。

資料匯入匯出：頁面即檔案

最體現「強大」的功能莫過於資料匯入匯出。你精心設定的頁面可以一鍵匯出為 JSON——包含所有模組的設定資料。換個站點、換個環境，匯入即還原。

• 多站點部署：主站設定好首頁，匯出後批量部署到分站
• A/B 測試：匯出兩個版本，快速切換對比
• 版本回滾：每次大改前匯出一份，改壞了秒還原
• 團隊協作：設計師匯出設定給開發，開發一鍵匯入

每頁獨立設定

技術亮點

markRaw 記憶體最佳化：每個模組的 JSON Schema 表單設定可能非常龐大。建構器使用 Vue 的 markRaw API 將這些設定物件標記為永不代理，避免 reactive 的遞迴追蹤。頁面上有 50 個模組時，記憶體佔用降低 90% 以上。

遞迴重組：匯入/克隆的資料需要合併模組原型 Schema，建構器透過 reorganizePageData 遞迴遍歷所有模組及其子項，智慧合併。

效果作用域隔離：所有資料監聽使用 effectScope 包裹，元件卸載時一次性清理所有副作用，零記憶體洩漏。

總結

這個頁面建構器是一套完整的頁面編排引擎。拖曳模組定義結構，設定表單注入資料規則，匯出 JSON 完成遷移。

適合的網站類型：企業官網、電商商城、線上教育平台、知識付費社群、作品展示站、活動落地頁、文件中心、團隊介紹頁、SaaS 產品頁——幾乎任何內容站都能用它搭建。