JeecgBoot Vue3 ：构建高效的企业级前端业务模块

技术栈与环境前端技术栈开发工具WebStorm / VSCode核心框架Vue3.0 TypeScript Vite6 Ant-Design-Vue4生态库Pinia ECharts UnoCSS Vxe-Table Qiankun ES6包管理Node / Npm / Pnpm环境要求本地环境安装 Node.js、Npm、PnpmPnpm 版本要求 9 版本以上Node.js 版本建议 v20.15.0要求 Node 20注意Vite 不再支持已结束生命周期EOL的 Node.js 18。现在需要使用 Node.js 20.19 或 22.12官✨ 使用体验与亮点基础用法在官方文档中已有详尽介绍这里重点分享一下在实际项目中的使用感受。1. 高效的组件封装框架封装了大量贴合企业业务的高频组件极大减少了重复代码开发者只需关注业务配置。2. 丰富的示例库系统提供了非常丰富的组件示例在生成代码时可以直接选择所需组件系统会自动生成对应代码真正实现了“配置即开发”。强烈建议大家亲自体验一下会有更直观的感受。 踩坑与解决方案在使用过程中我也遇到了一些细节问题以下是我的解决方案分享。问题一时间范围查询的参数处理现象描述在表格页面中框架对时间范围查询RangePicker有默认的处理逻辑会自动将时间参数拆分为xxx_begin和xxx_end例如warningTime_begin和warningTime_end。但这种处理方式目前仅在列表查询接口中生效且是一次性的。在其他场景如导出接口中如果不做处理直接将时间数组拼接到 URL 后会导致报错。默认的日期处理逻辑导出时的报错数组无法直接拼接在 URL 中解决方案在封装的导出逻辑中增加对时间范围参数的统一处理使其与查询接口保持一致。编写参数处理函数在/src/hooks/system/useListPage.ts中新增setRangeQuery方法import { cloneDeep } from lodash-es; async function setRangeQuery(queryParam) { let queryParamClone cloneDeep(queryParam); if (queryParam.rangeField) { let fieldsValue queryParam.rangeField.split(,); fieldsValue.forEach((item) { if (queryParamClone[item]) { let range queryParamClone[item]; queryParamClone[item _begin] range[0]; queryParamClone[item _end] range[1]; delete queryParamClone[item]; } else { queryParamClone[item _begin] ; queryParamClone[item _end] ; } }); } return queryParamClone; }在导出方法中调用找到onExportXls方法在请求发出前调用setRangeQuery对参数进行格式化。页面配置在页面的查询参数变量中添加rangeField属性值为时间范围参数的字段名多个字段用逗号隔开。这样配置后导出功能即可正常工作。问题二表格工具栏按钮对齐问题现象描述在某些分辨率或布局下表格上方的标题与右侧工具栏按钮可能会出现无法水平对齐的情况影响美观。解决方案修改/src/components/Table/src/components/TableHeader.vue文件的样式。给表格标题区域和工具栏容器添加 Flex 布局样式强制垂直居中对齐/* 示例代码具体请参考实际文件修改 */ .table-header { display: flex; justify-content: space-between; align-items: center; /* 关键属性 */ }