在Vue项目中注册全局组件

1.方法一

代码演示

代码如下（示例）： 在src/components文件夹下新建 xxx文件夹，xxx文件夹下新建index.vue

<template>
	<div>
		自定义的全局组件
    </div>
</template>

在main.js中引入，注册为全局组件。

// 省略其他
// 引入
import 组件名 from '@/components/xxx'
// 注册为全局组件
Vue.component('组件名',组件名)

2.方式二

代码演示

代码如下（示例）： 在src/components文件夹下新建yyy文件夹，在yyy文件夹下新建index.vue文件

<template>
	<div>
		通过注册插件的方式，注册全局组件
	</div>
</template>

在src/components文件夹下新建index.js文件

// 引入写好的全局组件
import 组件名1 from './xxx'
import 组件名2 from './yyy'
// 默认导出插件
export default {
	install: function(Vue) {
		console.log('自定义的插件~')
		// 在自定义的插件中注册为全局组件
		Vue.component('组件名1',xxx)
		Vue.component('组件名2',yyy)
		// 也可以往Vue的原型对象上添加属性或者方法，名字可以自定义
		// 在其他.vue结尾的文件中，可以通过this，访问自己添加的属性和方法
		Vue.prototype.num = 10
		Vue.prototype.$sayHi = () => {
			alert('Hi~')
		}
	}
}

import Page from './Page/index.vue';
import KfLayout from './Layout/index.vue';
import Form from './Form/index.vue';
import Table from './Table/index.vue';
import Dialog from './Dialog/index.js';
 
const components = {
	Page,
	KfLayout,
	"kf-form": Form,
	"kf-table": Table,
};
 
export default {
	install: function(Vue) {
	    Object.keys(components).forEach(key => {
	      Vue.component(key, components[key]);
	    });
	    Vue.use(Dialog);
	}
}

在main.js文件下，使用该插件。

import Vue from 'vue'
// 导入写好的自定义插件
import myCom from '@/components'
Vue.use(myCom)