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)