Vue 頁面建構器

一個基於 Vue.js 的拖拉式頁面建構器，類似 Layoutit.com，讓您輕鬆創建網頁並生成代碼。

🚀 功能特性

• 🎨 拖拉式編輯: 從組件庫拖拉組件到畫布
• 🔧 屬性編輯: 實時編輯組件的樣式和屬性
• 💻 代碼生成: 支持生成 HTML、CSS、Vue、React 代碼
• 💾 項目管理: 保存和載入項目文件
• ⌨️ 快捷鍵: 支持常用操作的鍵盤快捷鍵
• 📱 響應式: 支持不同屏幕尺寸預覽
• 🎯 實時預覽: 即時預覽設計效果

🛠️ 技術棧

• 前端框架: Vue 3 + TypeScript
• 構建工具: Vite
• 樣式框架: Bootstrap CSS
• 狀態管理: Pinia
• 拖拉功能: Vue Draggable Plus
• 圖標: Lucide Vue Next
• UI 組件: Element Plus

📦 可用組件

Bootstrap 佈局組件

• 容器 (Container): 響應式容器
• 行 (Row): Bootstrap 行佈局
• 列 (Column): 響應式列佈局，支持 sm/md/lg 斷點

Element Plus UI 組件

• 按鈕 (Button): 多種類型和尺寸的按鈕
• 輸入框 (Input): 文字輸入組件
• 卡片 (Card): 內容卡片容器
• 文字 (Text): 文字顯示組件
• 圖片 (Image): 圖片顯示組件

🚀 快速開始

安裝依賴

npm install

啟動開發伺服器

npm run dev

構建生產版本

npm run build

預覽生產版本

npm run preview

📖 使用指南

1. 添加組件: 從左側組件庫拖拉組件到中間畫布
2. 編輯屬性: 選中組件後在右側屬性面板編輯
3. 調整樣式: 修改組件的 CSS 樣式屬性
4. 響應式預覽: 使用工具列切換不同設備尺寸
5. 導出代碼: 生成 HTML、Vue 或 React 代碼
6. 保存項目: 將設計保存為 JSON 文件

⌨️ 快捷鍵

• Ctrl + Z: 撤銷
• Ctrl + Y: 重做
• Delete: 刪除選中組件
• Ctrl + S: 保存項目
• Ctrl + N: 新建項目

🏗️ 項目結構

src/
├── components/           # Vue 組件
│   ├── ComponentLibrary/ # 組件庫
│   ├── PageBuilder/      # 頁面建構器
│   └── PropertyEditor/   # 屬性編輯器
├── stores/              # Pinia 狀態管理
├── types/               # TypeScript 類型定義
├── utils/               # 工具函數
│   ├── componentDefinitions.ts  # 組件定義
│   └── codeGenerator.ts         # 代碼生成器
└── main.ts             # 應用入口

🤝 貢獻

歡迎提交 Issues 和 Pull Requests 來改進這個項目！

📄 授權

MIT License