First, the concept of vue components

It is a reusable Vue instance, it has a unique component name, it can extend HTML elements, and use the component name as a custom HTML tag. Because components are reusable Vue instances, they receive the same options as new Vue(), such as data, computed, watch es, methods, and lifecycle hooks. The only exceptions are root-instance-specific options like el.

Creating vue components

1. First of all, we create a .vue file under the component file with the naming rule of big hump, and create the components to be reused in the file
2. The basic template style of the component consists of three tags`

<template></template>
<script></script>
<style><style>

3. Component references
In the file where the component is to be imported, the import tag is imported through the tag of the file name, and imported and registered in the script tag

<template>
  <div id="app">
    <router-view class="page has-tabs"></router-view>
    <TabsCom class="tabs"></TabsCom>
  </div>
</template>
<script>

import TabsCom from './components/TabsCom.vue'
export default {
  components:{TabsCom,}
}
</script>

4. Precautions: In the vue file, you must strictly abide by the code specifications, otherwise an error will be reported

2. Encapsulation and invocation of native vue plugins

Introduction: vue plug-ins and vue component classes, but its functions are more powerful and can be called as needed. Although the encapsulation process is cumbersome, it is easy to use. We will call a lot of plug-ins during the work process.

Creating a vue plugin

1. Create a new toast folder in src, then create a vue file and index.js under the toast file, write the specific functions of the plug-in in the vue file, and then import and instantiate it in the index.js file, and must implement the plug-in The install method, then create an instance of the component, mount it in the real dom, and add it to the body, the last cloth is the method of the associated plugin
ToastCom.vue file

<template>
  <div class="toast" v-if="msg">
    {{ msg }}
  </div>
</template>
<script>
//When msg is empty, the prompt is hidden and displayed when there is text
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    show(str="Loading....",delay=2000) {
      console.log(delay)
      this.msg = str;
      setTimeout(() => this.hide(), delay);
    },
    hide() {
      this.msg = "";
    }
  }
};
</script>
<style scoped >
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 15px;
  border: #fff;
  /* background-color: #fff; */
  border-radius: 4px;
  background-color: rgba(0,0,0,.4);
  z-index: 10000;
}
</style>

index.js file

/*How to use the component
1.import components
2.Get the constructor of the component
3.Create an instance of the component
4.Mount it into the real dom and insert the body
5.Associate Toast
*/ 

//1. Import components
import ToastVue from "./ToastCom.vue"
var Toast ={}
//vue plugins must implement the install method
Toast.install = function(Vue){
   // 2. Get the constructor of the component
   var  ToastCom = Vue.extend(ToastVue);
//    3. Create an instance of the component
var instance = new ToastCom();
//4. Mount it into the real dom and insert it into the body
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
//5. Associate Toast
Toast.show = instance.show;
Toast.hide =instance.hide;


    //Mount the current object on the prototype of vue, all components and instances of vue can use the $toast method
    Vue.prototype.$toast=Toast;
}
export default Toast;

2. Import and use the plugin in the mian.js file, so that it can be used globally

3. Import in the required file, pass this.$plugin name.method name, call it on the login page as follows
In conclusion, as a novice, the key point is to understand the creation process of components and plug-ins, and the specific steps of the use process