Vue-注册全局组件(自定义组件)的两种方法

第一种：在main.js中直接注册

// 引入
import PageTools from '@/components/PageTools'
// 注册为全局组件
Vue.component('PageTools', PageTools)

缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。

第二种：使用插件的形式注册

在src目录下，创建common文件夹，在common文件夹下创建components文件夹,然后创建两个组件，c-modal和c-table

目录结构如下：

c-modal/src/main.vue

<template>
  <div>我是自定义弹窗CModal</div>
</template>
<script>
export default{
  name: "CModal",
  props:{},
  data(){
    return {}
  }
}
</script>

c-modal/index.js

import CModal from "./src/main";
CModal.install = function (Vue) {
  Vue.component(CModal.name, CModal);
};
export default CModal;

c-table/src/main.vue

<template>
  <div>我是自定义表格</div>
</template>
<script>
export default{
  name: "CTable",
  props:{},
  data(){
    return {}
  }
}
</script>

c-table/index.js

import CTable from "./src/main";
CTable.install = function (Vue) {
  Vue.component(CTable.name, CTable);
};
export default CTable;

src/common/components/index.js

import CTable from "./c-table";
import CModal from "./c-modal";

export let _Vue;
export default {
  install (Vue) {
    if (this.installed && Vue === _Vue) return;
    Vue.use(CTable);
    Vue.use(CModal);
    _Vue = Vue;
  }
};

入口文件注册插件（main.js）

/*自定义公共组件*/
import commonUi from "../src/common/components";
Vue.use(commonUi);

在组件中使用

<template>
    <CTable></CTable>
</template>