【vue3】封裝自定義全局插件

• 2021 年 8 月 20 日
• 筆記
• VUE, 前端, 開發

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