自定义element-ui plus 函数式调用，在API，js中直接使用全局组件

npm方式:

npm install -D unplugin-vue-components unplugin-auto-import

yarn 方式 :

yarn add unplugin-vue-components;
yarn add unplugin-auto-import;

 

 使用官方的这个：

vite.config.js中配置
plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [VantResolver(), ElementPlusResolver()],
        }),
    ],

 LoginDialog.js定义

import {createApp} from 'vue'
import SubDialog from './LoginDialog.vue'

/**
 * 关键函数挂在整个页面上去
 */
const createDialog = () => {
    const mountNode = document.createElement('div')
    mountNode.setAttribute('id', 'dialog-mask-dialog')
    const Instance = createApp(SubDialog, {
        show: true,
        close: () => {
            Instance.unmount(mountNode);
            document.body.removeChild(mountNode);
        }
    })

    document.body.appendChild(mountNode)
    Instance.mount(mountNode)
}

export default createDialog

LoginDialog.vue 定义