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 编辑器
Monaco`editor.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 数据源调试~~
~~加载、刷新与请求复用~~

三、运行时与预览能力

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

四、事件系统

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

3.5 KiB Raw Permalink Blame History Unescape Escape