【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封裝性更強，只需更少的程式碼。