【vue3】封装自定义全局插件

【vue3】封装自定义全局插件

原vue2方法

main.js

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')

index.js

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导出

plugin.vue(自定义的组件)

<template>

  <div>

  </div>

</template>

<script>

export default {

  name: "Plugin",

}

</script>

<style scoped>

</style>

vue3的思路和vue2相同，只是执行的方法有区别。

vue3方法

区别

- use(plugin)自动调用install函数时

 vue2: 自动传入Vue实例

 vue3: 自动传入App应用实例

- 挂载组件

 vue2: Vue.extend(plugin) + 构造器实例化 + 挂载

 vue3: createApp(plugin) + 挂载

- 定义全局访问

 vue2: Vue.prototype.$plugin

 vue3: app.config.globalProperties.$plugin

main.js

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');

index.js

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封装性更强，只需更少的代码。