快速开始
欢迎使用 Morning Framework！本指南将帮助你在几分钟内开始使用这个企业级可视化开发框架。
📋 环境要求
在开始之前，请确保你的开发环境满足以下要求：
- Node.js: 版本 20 或更高
- 包管理器: pnpm (推荐)
🛠️ 项目初始化
1. 安装框架
...
2. 引入注册框架
...
3. 启动开发服务器
bash
# 使用开发模式启动
pnpm dev
# 使用生产模式启动
pnpm build
pnpm preview🚀 快速体验
项目结构说明
Morning Framework 采用模块化架构
核心功能体验
- 可视化设计器: 访问首页即可看到完整的设计器界面
- 组件拖拽: 从左侧面板拖拽组件到画布
- 属性配置: 选中组件后在右侧面板配置属性
- 实时预览: 点击预览按钮查看实时效果
- 主题切换: 支持亮色/暗色主题切换
🎯 开发模式说明
Morning Framework 支持多种开发模式：
设计器模式 (默认)
启动完整的设计器界面，包含可视化编辑功能。
...
预览模式
...
🎯 核心功能使用
组件系统
Morning Framework 提供多层次的组件支持
设计器操作
组件拖拽
- 从左侧组件面板拖拽组件到中央画布
- 支持嵌套布局和层级管理
- 实时视觉反馈和位置引导
属性配置
- 选中组件后在右侧面板配置属性
- 支持动态表单和实时预览
- 样式属性和交互事件配置
预览和导出
- 实时预览: 画布区域实时显示设计效果
- 全屏预览: 支持独立窗口预览模式
- Schema 导出: 可导出组件配置 Schema
主题和国际化
- 主题系统: 支持亮色/暗色主题切换
- 色彩定制: 可配置主题色彩系统
- 多语言支持: 内置国际化(i18n)支持
📚 深入学习
现在你已经体验了 Morning Framework 的基本功能，接下来可以：
💡 开发技巧
组件开发
- 遵循统一的组件契约规范
- 支持设计时和运行时双模式
性能优化
- 使用动态导入减少初始包体积
- 组件按需加载和懒加载机制
- 优化渲染性能和内存使用
调试开发
- 使用 Vue Devtools 进行调试
- 查看组件状态和数据流
- 监控性能指标和渲染时间
❓ 常见问题
环境配置
- 确保 Node.js 版本符合要求
- 检查包管理器兼容性
- 验证依赖安装完整性
开发问题
- 查看控制台错误信息
- 检查组件注册和导入
- 验证配置文件和路径
功能使用
- 参考组件文档和示例
- 查看源码实现和注释
- 参与社区讨论和交流
开始你的可视化开发之旅！ 🚀