vue3中按需引入Ant Design Vue出现A plugin must either be a function or an object with an “install” function.

问题

创建一个js文件专门用来按需引入ant design vue组件。

import {Button,message,Form,FormItem,Input,InputPassword,Layout,
    LayoutHeader,LayoutContent, LayoutSider,Menu,SubMenu,MenuItem,
    Table,Tag,Modal,Textarea
} from "ant-design-vue"
const antDesignUi = {
    install: function(app) {
        app.use(Textarea)
        app.use(Modal)
        app.use(Tag)
        app.use(Table)
        app.use(Menu)
        app.use(SubMenu)
        app.use(MenuItem)
        app.use(Layout)
        app.use(LayoutContent)
        app.use(LayoutHeader)
        app.use(LayoutSider)
        app.use(Button)
        app.use(Form)
        app.use(FormItem)
        app.use(Input)
        app.use(InputPassword)
        app.config.globalProperties.$message = message;
    }
}
export default antDesignUi

之后出现A plugin must either be a function or an object with an “install” function.的警告。

解决

在 Vue 3 中，app.use() 方法只接受插件作为参数，并且插件必须是一个简单的函数，而不能是一个对象。但是，在你的代码中，你试图使用 app.use() 导入 Ant Design Vue 的组件。

解决这个问题的方法是，你需要将 Ant Design Vue 的组件包装在一个能够被 Vue 3 识别的插件中。你可以使用 Vue 3 提供的 createApp() 方法中的 component() 方法来创建一个包含所有要用的组件的插件，然后再将其作为参数传递给 app.use() 方法。
修改后的代码如下

import {Button,message,Form,FormItem,Input,InputPassword,Layout,
    LayoutHeader,LayoutContent, LayoutSider,Menu,SubMenu,MenuItem,
    Table,Tag,Modal,Textarea
} from "ant-design-vue"
const antDesignUi =  {
    install: (app) => {
      app.component(Button.name, Button)
      app.config.globalProperties.$message = message
      app.component(Form.name, Form)
      app.component(FormItem.name, FormItem)
      app.component(Input.name, Input)
      app.component(InputPassword.name, InputPassword)
      app.component(Layout.name, Layout)
      app.component(LayoutHeader.name, LayoutHeader)
      app.component(LayoutContent.name, LayoutContent)
      app.component(LayoutSider.name, LayoutSider)
      app.component(Menu.name, Menu)
      app.component(SubMenu.name, SubMenu)
      app.component(MenuItem.name, MenuItem)
      app.component(Table.name, Table)
      app.component(Tag.name, Tag)
      app.component(Modal.name, Modal)
      app.component(Textarea.name, Textarea)
    }
}
export default antDesignUi