import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import plugin from './···/plugin/index' //安装自定义的插件 Vue.use(plugin); new Vue({ router, store, render: h => h(App) }).$mount('#app')
import Plugin from "./Plugin"; const plugin = {}; /** * Vue: 在main.js中Vue.use时会自动传入vue实例作为实参 * 同时会自动执行install函数 */ plugin.install = function(Vue) { //1、创建组件构造器 const pluginConstructor = Vue.extend(Plugin); //2、new的方式,根据组件构造器,可以创建出来一个组件对象 const plugin = new pluginConstructor(); //3、将组件对象,手动挂载到某一个元素上 plugin.$mount(document.createElement("div")); //4、plugin.$el对应的就是上面挂载的div document.body.appendChild(plugin.$el); //5、定义Vue.$plugin的全局访问 Vue.prototype.$plugin = plugin; }; export default plugin; //将plugin导出
<template> <div> </div> </template> <script> export default { name: "Plugin", } </script> <style scoped> </style>
vue3的思路和vue2相同,只是执行的方法有区别。
- use(plugin)自动调用install函数时 vue2: 自动传入Vue实例 vue3: 自动传入App应用实例 - 挂载组件 vue2: Vue.extend(plugin) + 构造器实例化 + 挂载 vue3: createApp(plugin) + 挂载 - 定义全局访问 vue2: Vue.prototype.$plugin vue3: app.config.globalProperties.$plugin
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import plugin from "···/plugin/index"; createApp(App).use(store).use(router).use(plugin).mount('#app');
import Plugin from "./Plugin"; import {createApp} from 'vue' const plugin = {}; plugin.install = function(app) { //1、实例化并绑定组件 const plugin = createApp(Plugin); const instance = plugin.mount(document.createElement("div")); //2.将挂载的Node添加到body中 document.body.appendChild(instance.$el); //3、定义全局 app.config.globalProperties.$plugin = instance; }; export default plugin;
整体思路相同,可见vue3封装性更强,只需更少的代码。