一、什么是全局组件

• 业务组件一般都定义成了局部组件，使用的时候需要在components中注册，
• 全局通用组件一般是需要定义为全局组件的，不需要局部注册

二、注册方式

2.1、main.js中直接注册全局

import PageTools from '@/components/PageTools'
Vue.component(’PageTools‘, PageTools)

2.2、Vue.use()全局注入

2.2.1、Vue.use()

• 作用：它是Vue提供一个静态方法，用来向·Vue注册插件(增强vue的功能)。

• 格式：Vue.use(obj)

• Vue.use 可以接收一个对象，Vue.use(obj)

• 对象obj中需要提供一个 install 函数

• 在 Vue.use(obj)时，会自动调用该 install 函数，并传入Vue构造器

• Vue.ues( { install:function ( Vue ){ } } )

2.2.2、新建插件js

• 新建plugins文件夹、文件夹下面新建index.js文件

import basicContainer from "@/components/basic-container/main";
// 字典标签组件
import DictTag from "@/components/DictTag";
import FlowPath from "@/components/asset/flowPath";

export default {
  install: function (Vue) {
    // 注册全局容器
    Vue.component("basicContainer", basicContainer);
    Vue.component("DictTag", DictTag);
    Vue.component("FlowPath", FlowPath);
  }
};

2.2.4、main.js中

// 引入全局组件
import install from '@/plugins/';
// 注入
Vue.use(install)

三、类比ElementUI

//按钮组件
import ElButton from "@/components/el-button";
//表格组件
import ElTable from "@/components/el-table";

export default {
  install: function (Vue) {
    // 注册全局容器
    Vue.component("ElButton", ElButton);
    Vue.component("ElTable ", ElTable );
  }
};

main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);