JeecgBoot前端组件Antd按需加载

TIP

JeecgBoot使用的是Ant Desgine (opens new window)，但最近是使用Timeline时间线组件，发现不生效。原因就是JeecgBoot并没有全部将antd组件引入，需要我们手动引入所需组件，也就是懒加载策略。

报错信息

Failed to resolve component: a-timeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

解决步骤

配置按需加载:src/commponents/registerGlobComp.ts,新增Timeline组件

import type { App } from 'vue';
import { Icon } from './Icon';
import AIcon from '/@/components/jeecg/AIcon.vue';
//Tinymce富文本
import Editor from '/@/components/Tinymce/src/Editor.vue';

import { Button, JUploadButton } from './Button';

// 按需注册antd的组件
import {
  // Need
  Button as AntButton,
  Select,
  Alert,
  Checkbox,
  DatePicker,
  TimePicker,
  Calendar,
  Radio,
  Switch,
  Card,
  List,
  Tabs,
  Descriptions,
  Tree,
  Table,
  Divider,
  Modal,
  Drawer,
  TreeSelect,
  Dropdown,
  Tag,
  Tooltip,
  Badge,
  Popover,
  Upload,
  Transfer,
  Steps,
  PageHeader,
  Result,
  Empty,
  Avatar,
  Menu,
  Breadcrumb,
  Form,
  Input,
  Row,
  Col,
  Spin,
  Space,
  Layout,
  Collapse,
  Slider,
  InputNumber,
  Carousel,
  Popconfirm,
  Skeleton,
  Cascader,
  Rate,
  //在这个进行所需组件的配置！！！
  Timeline,
} from 'ant-design-vue';
const compList = [AntButton.Group, Icon, AIcon, JUploadButton];

//敲敲云—仪表盘设计器（拖拽设计）
import DragEngine from '@qiaoqiaoyun/drag-free';
import('@qiaoqiaoyun/drag-free/lib/index.css');
console.log('---初始化---， 全局注册仪表盘--------------');

export function registerGlobComp(app: App) {
  compList.forEach((comp) => {
    app.component(comp.name || comp.displayName, comp);
  });
  //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了）
  app.component(Editor.name, Editor);

  app
    .use(Select)
    .use(Alert)
    .use(Button)
    .use(Breadcrumb)
    .use(Checkbox)
    .use(DatePicker)
    .use(TimePicker)
    .use(Calendar)
    .use(Radio)
    .use(Switch)
    .use(Card)
    .use(List)
    .use(Descriptions)
    .use(Tree)
    .use(TreeSelect)
    .use(Table)
    .use(Divider)
    .use(Modal)
    .use(Drawer)
    .use(Dropdown)
    .use(Tag)
    .use(Tooltip)
    .use(Badge)
    .use(Popover)
    .use(Upload)
    .use(Transfer)
    .use(Steps)
    .use(PageHeader)
    .use(Result)
    .use(Empty)
    .use(Avatar)
    .use(Menu)
    .use(Tabs)
    .use(Form)
    .use(Input)
    .use(Row)
    .use(Col)
    .use(Spin)
    .use(Space)
    .use(Layout)
    .use(Collapse)
    .use(Slider)
    .use(InputNumber)
    .use(Carousel)
    .use(Popconfirm)
    .use(DragEngine)
    .use(Skeleton)
    .use(Cascader)
    .use(Rate)
    //在这个进行所需组件的配置！！！！
    .use(Timeline);
  console.log("注册antd组件完成！");
}

如上就可以实现按需加载antd组件，其他的组件类似。
如果您在使用JeecgBoot过程中对于集成工作流有需要，请访问JeecgFlow (opens new window)