my-v0

Vue 3 + Vite 大屏低代码编辑器前端

技术栈

• 框架：Vue 3、Vite、TypeScript、Pinia、Vue Router
• 样式 / UI：Tailwind CSS、Element Plus、Iconify
• 画布：vue3-moveable（拖拽缩放）、vue3-selecto（框选）、vue3-sketch-ruler（标尺）、vue-draggable-plus（图层拖拽排序）
• 图表 / 编辑器：ECharts、Monaco Editor
• 数据：Axios、Mock.js

开发

Node ^22.18.0 || >=24.12.0，包管理器用 pnpm

pnpm install
pnpm dev

pnpm build          # vue-tsc --build + vite build
pnpm type-check
pnpm preview
pnpm lint           # oxlint + eslint（都会 --fix）
pnpm format         # prettier --write src/

构建分包与性能

生产构建通过 Vite 8 的 Rolldown codeSplitting.groups 拆分 Vue、Element Plus 和画布交互依赖；编辑器、ECharts 图表和 Monaco 编辑器均按实际使用时异步加载。异步模块加载期间显示 loading，避免首次打开编辑器、首次拖入图表或打开 JSON 编辑器时出现空白区域

首屏效果

• 页面加载时间：实测约从 6 s 降至 1 s
• 首屏入口 JS：从 6,585.31 kB（gzip 1,751.85 kB）降至 165.12 kB（gzip 60.45 kB）
• 入口 JS 未压缩体积减少约 97.5%，gzip 体积减少约 96.5%

生产构建产物

以下数据来自 pnpm build：

Chunk	未压缩体积	gzip 体积	加载时机
入口index JS	165.12 kB	60.45 kB	首屏
vue	96.61 kB	37.58 kB	首屏
element-plus JS	294.87 kB	99.25 kB	编辑器加载后
canvas JS	292.04 kB	95.24 kB	编辑器加载后
编辑器业务 JS	79.36 kB	25.17 kB	编辑器加载后
图表component / ECharts	1,166.65 kB	389.20 kB	首次渲染图表节点
MonacoEditor JS	58.71 kB	15.63 kB	首次打开 JSON 编辑器
Monacoeditor.api JS	3,625.00 kB	926.34 kB	首次打开 JSON 编辑器

Monaco 的 CSS 为 308.18 kB（gzip 101.96 kB），同样延迟到首次打开 JSON 编辑器后加载

Element Plus CSS 为 116.01 kB（gzip 16.05 kB），随编辑器模块加载

项目目标

一、编辑器核心架构

• 项目初始化与基础布局
• 工具栏实现
• 物料面板（可扩展架构）
• 图层面板
• 插件化注册机制
• 物料 DSL 设计
• 拖拽渲染流程
• 节点拖动与缩放
• 框选与多选操作
• 画布标尺接入
• 图层排序与画布层级联动
• 页面 DSL 设计与落地
• 属性面板
• 右键菜单
• 组合式函数拆分
• 撤销重做基础能力
• 批处理与历史记录管理
• ECharts 图表物料接入

二、代码与数据能力

• 网页代码编辑器接入
• 页面 Schema 导入导出与实时编辑
• 静态数据源
• API 数据源
• 数据源管理界面
• API 数据源调试
• 加载、刷新与请求复用

三、运行时与预览能力

• 大屏自适应预览
• 页面持久化与独立访问
• 运行时上下文

四、事件系统

• 事件调度机制
• 事件配置面板
• 跨组件事件联动
• 事件函数编辑体验优化
• 代码沙箱
• 物料可触发事件声明
• ......

五、后端规划