1、首先建一个HelloWorld.vue其中的内容如下:
2、再新建一个js文件,这里我起名为helloworld.js内容为:
// 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展import HelloWorld from "@/components/HelloWorld.vue";
export default {install (app) {// 在app上进行扩展,app提供 component directive 函数// 如果要挂载原型 app.config.globalProperties 方式app.component(HelloWorld.name, HelloWorld)}
}
3、再main.js中使用插件,内容如下:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'// 就是下边这一行,将其导入然后挂载到app上
import ui from './helloworld'
// 插件的使用,在main.js使用app.use(插件)
createApp(App).use(ui).mount('#app')
4、再App.vue中使用组件
5、效果如下:
