vue3项目内使用elementPlus 框架 同时使用某些 ant-design 某些组件

vue3项目内使用elementPlus 框架 同时使用某些 ant-design 某些组件

新建antd-lazy.js文件

/**
 * 按需加载antd组件
 */
import {
  ConfigProvider,
  Layout,
  Input,
  InputNumber,
  Button,
  Switch,
  Radio,
  Checkbox,
  Select,
  Card,
  Form,
  Row,
  Col,
  Modal,
  Table,
  Tabs,
  Badge,
  Popover,
  Dropdown,
  List,
  Avatar,
  Breadcrumb,
  Steps,
  Spin,
  Menu,
  Drawer,
  Tooltip,
  Alert,
  Tag,
  Divider,
  DatePicker,
  TimePicker,
  Upload,
  Progress,
  Skeleton,
  Popconfirm,
  PageHeader,
  Result,
  Statistic,
  Descriptions,
  Empty,
  Tree,
  TreeSelect,
  Carousel,
  Pagination,
  Cascader,
  Slider,
  Transfer,
  Rate,
  Collapse,
} from 'ant-design-vue'

/* 可省略这块 */
[Button, Select, Input, InputNumber, Switch, Checkbox, Card, Table, List, Menu, Tree, DatePicker, TimePicker].forEach((element) => {element.props.size ? element.props.size.default ='small' : '';});
import.meta.env.VITE_APP_ENV !== 'production' && console.warn('[jeecg-boot-app] NOTICE: Antd use lazy-load.')

export default function antdInstall(app) {
    app.use(ConfigProvider)
    app.use(Layout)
    app.use(Input)
    app.use(InputNumber)
    app.use(Button)
    app.use(Switch)
    app.use(Radio)
    app.use(Checkbox)
    app.use(Select)
    app.use(Card)
    app.use(Form)
    app.use(Row)
    app.use(Col)
    app.use(Modal)
    app.use(Table)
    app.use(Tabs)
    app.use(Badge)
    app.use(Popover)
    app.use(Dropdown)
    app.use(List)
    app.use(Avatar)
    app.use(Breadcrumb)
    app.use(Steps)
    app.use(Spin)
    app.use(Menu)
    app.use(Drawer)
    app.use(Tooltip)
    app.use(Alert)
    app.use(Tag)
    app.use(Divider)
    app.use(DatePicker)
    app.use(TimePicker)
    app.use(Upload)
    app.use(Progress)
    app.use(Skeleton)
    app.use(Popconfirm)
    app.use(PageHeader)
    app.use(Result)
    app.use(Statistic)
    app.use(Descriptions)
    app.use(Empty)
    app.use(Tree)
    app.use(TreeSelect)
    app.use(Carousel)
    app.use(Pagination)
    app.use(Cascader)
    app.use(Slider)
    app.use(Transfer)
    app.use(Rate)
    app.use(Collapse)
}

在main.js/main.ts 内引入并使用

import antdInstall from '@/components/antd-lazy'
app.use(antdInstall)

之后即可在其它页面直接使用ant-d组件