vue 组建自己的组件库并引入全局组件的实现

1、建立自己的组件库

例如在components里创建一个目录为mycomponents，里面放入自己的vue组件，如其中一个组件为MyTest.vue，文件内容如下：

<template>
    <div>
        这是一个测试组件，内容为{{ content }}
    </div>
</template>

<script>
export default {
    props:['content']
}
</script>

2、注册组件库

在自己创建的组件库文件夹mycomponents里新建一个index.js，用于注册自己需要设置为全局组件的组件，如：

import MyTest from './MyTest'//引入刚创建的组件
import OtherCom from './OtherCom'//引入其他组件，可多个
const MyComponent = {
    install: function(Vue) {
        // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component('TytMyTest', MyTest) //第一个参数为注册组件的名称，在页面里就可以直接使用，如本里可以直接使用<tyt-my-test></tyt-my-test>，第二个参数为上面import组件的名称
        Vue.component('TytOther', OtherCom)
    }
}
export default MyComponent

3、在main.js里引入

import mycomponent from '@/components/mycomponents/index' //这里可以不加最后的index，vue会自动找到
Vue.use(mycomponent);

4、使用组件

至此，页面里就可以直接使用事先定义好的组件名称来使用自定义组件了

<tyt-my-test></tyt-my-test>
<tyt-other></tyt-other>

参考：https://www.cnblogs.com/lsc-boke/p/11007879.html