vxe-gantt 甘特图组件在 Nuxt 中的集成与使用

vxe-gantt 是一个功能强大的 Vue 甘特图组件库适用于项目进度管理、任务排期等场景。与大多数 UI 组件库一样它强依赖浏览器 DOM 环境无法在服务端渲染SSR时直接运行。在 Nuxt 4 项目中使用 vxe-gantt 时需要借助官方提供的 Nuxt 模块并将组件包裹在 中以确保仅在客户端加载。本文将从安装、模块配置到具体使用提供完整的集成指南帮助你在 Nuxt 4 项目中快速使用甘特图组件。安装执行以下命令安装 vxe-gantt 及其依赖的 UI 库、表格核心库以及对应的 Nuxt 模块npm install vxe-pc-ui vxe-table vxe-gantt vxe-pc-ui-nuxt vxe-gantt-nuxt-D配置 Nuxt 模块由于 vxe-gantt 内部大量依赖浏览器 API如鼠标拖拽、DOM 尺寸计算、ResizeObserver 等不能在服务端渲染。因此所有使用甘特图组件的地方都必须用 标签包裹。// ...exportdefaultdefineNuxtConfig({// ...modules:[// ...vxe-pc-ui-nuxt,vxe-gantt-nuxt,vxe-table-nuxt,// ...],vxeBaseSetting:{// global: true // 是否全局加载如果 false 则按需加载},vxeTableSetting:{// global: true // 是否全局加载如果 false 则按需加载},vxeGanttSetting:{// global: true // 是否全局加载如果 false 则按需加载},// ...})使用支持 Client 模式templateClientOnlyvxe-ganttv-bindganttOptions/vxe-gantt/ClientOnly/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,height:200,columns:[{field:name,title:任务名称,minWidth:200},{field:start,title:开始时间,width:100},{field:end,title:结束时间,width:100}],data:[{id:10001,name:A项目,start:2024-03-01,end:2024-03-04,progress:3},{id:10002,name:城市道路修理进度,start:2024-03-03,end:2024-03-08,progress:10},{id:10003,name:B大工程,start:2024-03-03,end:2024-03-11,progress:90},{id:10004,name:超级大工程,start:2024-03-05,end:2024-03-11,progress:15},{id:10005,name:地球净化项目,start:2024-03-08,end:2024-03-15,progress:100},{id:10006,name:一个小目标项目,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,name:某某计划,start:2024-03-15,end:2024-03-24,progress:70},{id:10008,name:某某科技项目,start:2024-03-20,end:2024-03-29,progress:50},{id:10009,name:地铁建设工程,start:2024-03-19,end:2024-03-20,progress:5},{id:10010,name:铁路修建计划,start:2024-03-12,end:2024-03-20,progress:10}]})/scripthttps://gantt.vxeui.com