【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 .

【vue3】 More articles on encapsulating custom global plug-ins

  1. vue3 series :vue3.0 Custom global shell layer V3Layer|vue3.x pc Desktop pop-up components

    be based on Vue3.0 Development PC Desktop custom dialog components V3Layer. I shared one two days ago vue3.0 The mobile side ejects the layer component , Today we share the latest development vue3.0 edition pc End pop-up components . V3Layer  A use of vue3.0 ...

  2. elementary analysis vue Encapsulate custom plug-ins

    In the use of vue In the process of , Often used Vue.use, But most people know little about it , I don't know what I did when I called , therefore , This paper gives a brief overview in vue in , How to encapsulate custom plug-ins . Before we start , Let's add , Actually use vue encapsulation ...

  3. Use vue3 The custom instructions for element-plus Of el-dialog Add drag function

    element-plus Provided el-dialog The dialog is very powerful , It's just a fly in the ointment. You can't change the position by dragging , A little regret , So what to do ? We can go through vue To implement a drag and drop dialog box ...

  4. Customize Angular plug-in unit - Website user guide

    Recently, due to the major revision of the project , In order to enable users to adapt to this new revision , So... Is introduced into the system “ User guidance ” function , For users who first enter the system, some simple use training training. For most websites , This is a very common function . the ...

  5. 【jQuery Based on learning 】08 Write custom jQuery plug-in unit

    Purpose : although jQuery All kinds of functions are perfect , But we still have to learn to write plug-ins ourselves . In this way, we can encapsulate some exclusive code that is often used in projects , In order to maintain and improve the development efficiency in the later period . jQuery Type of plug-in : Encapsulate the object side ...

  6. mvc Custom global exception handling

    Exception handling is an essential part of any website , How to display effectively , Record , The most important problem is to transmit abnormal information . This article will be based on html2cancas Screenshot function , Realization mvc Custom global exception handling . Let's take a look at the final results : ...

  7. Customize jQuery plug-in unit Step by Step

    1.1.1 Abstract With the separation of front-end and back-end technologies , Internet companies are interested in Mobile First Ideas are all in a rush , In order to solve the display effect of web pages on different mobile devices , One of the solutions is Responsive Desig ...

  8. Customize Cordova plug-in unit ( The basic chapter )

    cordova Custom plug in Be careful : Store custom cordova The plug-in directory can't have spaces, which may report an error cordova Installation download node.js, After installation, you can use it on the command line node and npm. install cordova Use ...

  9. Customize Cordova plug-in unit ( The basic chapter )

    cordova Custom plug in Be careful : Store custom cordova The plug-in directory can't have spaces, which may report an error cordova Installation download node.js, After installation, you can use it on the command line node and npm. install cordova Use ...

  10. hold axios Encapsulated in the vue The plug-in USES

    Preface since Vue2.0 I recommend you to use axios Start ,axios Be known by more and more people . Use axios It's relatively easy for us to make a request , however axios No encapsulation reuse , The project is getting bigger and bigger , Caused code redundancy ...

Random recommendation

  1. background-position ( turn )

    http://blog.csdn.net/JeamKing/article/details/5617088   notes : This is someone else's blog link address   See this link for specific effect pictures grammar :background-po ...

  2. Export... From a database excel report form

    Usually, you need to export the datasets or other lists in the background database excel report form , Here we mainly quote Apose.cells dll Class library , (1) Go straight to the main code : protected void txtExport_Cl ...

  3. DevExpress Set in PanelControl Background approach

    The first, of course, is to set BackColor The color of the , However, it is often not reflected after setting , This is Dev The benefits are not good , Then we need to define two properties ourselves 1. Set up LookAndFeel Under the style by Flat or UtralFl ...

  4. build Android The steps of the project and its first Android program

    1. Android system architecture 1> The bottom is Linux System 2> Function library layer from C or C++ Written 3>Application frameWork Application framework layer 4> The top layer is the application layer 2.JVM And DVM Introduce ...

  5. ubuntu14.04 Service version /etc/init.d/smbd restart Invalid solution

    Just installed ubuntu14.04 End of configuration smbd Find out service perhaps /etc/init.d/smbd restart No output is displayed , It didn't work echo $? Output 1, Check the script and find if init_is_ ...

  6. .Net Programmers learn to use Oracle series (5): Three data types

    <.Net Programmers learn to use Oracle series : Navigation directory > Outline of this article 1.Oracle Overview of data types 2. Character type 2.1. Character set & NLS 2.2. Two common strings 2.3.NCHAR ...

  7. 【bootstrap】 Time selector datetimepicker and daterangepicker

    stay bootstrap There are two kinds of time selectors in :dateTimePicker and dateRangePicker 1.dateTimePicker It seems to be an official plug-in :   Documents needed : <link rel= ...

  8. Three level cascade query of province name and code ( Ensure that the name does not duplicate ) Of SQL sentence

    Three level cascade query of province name and code ( Ensure that the name does not duplicate ) Of SQL sentence 1. Province . City and county level database tables 2.SQL sentence SELECT DISTINCT t.`province_name`,t.`province_co ...

  9. OJ topic : Invert a number to output

    Title Description : Enter a number , If num = 12345 , Output 54321, And so on . Code implementation : ) ; }

  10. use Matlab Carry out partial fractional expansion

    [r p k]=residue[num,den] for example H(s)=(2s3+5s2+3s+6)/(s3+6s2+11s+6) num=[2 5 3 6]; den=[1 6 11 6]; [r p k] ...