1、定义一个Message.vue组件其内容如下

2、创建一个叫Message.js的文件其内容如下：

// 提供一个能够显示Message组件的函数
// 这个函数将来：导入直接使用，也可以挂载在vue实例原型上import { createVNode, render } from 'vue'
import HelloWorld from "@/components/Message.vue";// DOM容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-msssage-container')
document.body.appendChild(div)// 定时器标识
let timer = nullexport default ({ type, text }) => {// 渲染组件// 1. 导入消息提示组件// 2. 将消息提示组件编译为虚拟节点(dom节点)// createVNode(组件,属性对象（props）)const vnode = createVNode(HelloWorld, { type, text })// 3. 准备一个装载消息提示组件的DOM容器// 4. 将虚拟节点渲染再容器中// render(虚拟节点,DOM容器)render(vnode, div)// 5. 3s后销毁组件clearTimeout(timer)timer = setTimeout(() => {render(null, div)}, 3000)
}

3、在app.vue中导入并使用：

4、效果如下：当点击左边按钮后会弹出一个消息提示框，3秒后关闭

5、如果想使用this.$message这种方式则需定义一个UI.js文件用来挂载Message.js其内容如下：

import Message from "@/Message";
export default {install (app) {// 定义一个原型函数app.config.globalProperties.$message = Message}
}

6、在main.js中导入并使用use挂载到app上，如下所示

import { createApp } from 'vue'
import App from './App.vue'
import UI from "@/UI";
// 导入自己UI组件库
// import UI from './UI'// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(UI).mount('#app')

这种方式的缺点是还是得在选项式上才方便使用，在组合式方式上不推荐