【vue3】 Encapsulate custom global plug-ins
primary vue2 Method
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import plugin from './···/plugin/index'
// Install custom plug-ins
Vue.use(plugin);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
index.js
import Plugin from "./Plugin";
const plugin = {};
/**
* Vue: stay main.js in Vue.use Automatically passed in when vue Instance as argument
* At the same time, it will automatically execute install function
*/
plugin.install = function(Vue) {
//1、 Create a component constructor
const pluginConstructor = Vue.extend(Plugin);
//2、new The way , According to the component constructor , You can create a component object
const plugin = new pluginConstructor();
//3、 The component object , Manually mount to an element
plugin.$mount(document.createElement("div"));
//4、plugin.$el Corresponding to the above mounted div
document.body.appendChild(plugin.$el);
//5、 Definition Vue.$plugin Global access to
Vue.prototype.$plugin = plugin;
};
export default plugin; // take plugin export
plugin.vue( Custom components )
<template>
<div>
</div>
</template>
<script>
export default {
name: "Plugin",
}
</script>
<style scoped>
</style>
vue3 And vue2 identical , Only the method of execution is different .
vue3 Method
difference
- use(plugin) Automatically call install Function time
vue2: Auto in Vue example
vue3: Auto in App Application example
- Mount components
vue2: Vue.extend(plugin) + Constructor instantiation + mount
vue3: createApp(plugin) + mount
- Define global access
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、 Instantiate and bind components
const plugin = createApp(Plugin);
const instance = plugin.mount(document.createElement("div"));
//2. To mount Node Add to body in
document.body.appendChild(instance.$el);
//3、 Define global
app.config.globalProperties.$plugin = instance;
};
export default plugin;
The whole idea is the same , so vue3 More encapsulation , Just less code .