vue3自定义封装组件：消息提示、轮播图、加载更多、骨架屏组件

加载更多组件 

定义组件：src/components/library/xtx-infinite-loading.vue

注册组件：src/components/library/index.js

import XtxInfiniteLoading from './xtx-InfiniteLoading.vue'
export default {
    install(app) {
        app.component(XtxInfiniteLoading.name, XtxInfiniteLoading)
    }
}

 引用组件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入自定插件
import ui from './components/library'

// 创建一个vue应用实例
createApp(App).use(store).use(router).use(ui).mount('#app')

使用组件： .vue文件

轮播图组件 

首先是轮播图的样式：src/components/library/xtx-carousel.vue 

然后是轮播图的结构与逻辑封装：src/components/library/xtx-carousel.vue

插件注册：src/components/library/index.js

+import XtxCarousel from './xtx-carousel.vue'


export default {
  install (app) {
    +app.component(XtxCarousel.name, XtxCarousel)
  }
}

插件使用：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'

+import ui from './components/library'

+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用

消息提示组件

封装组件： src/components/library/xtx-message.vue

插件定义：src/componets/library/index.js

import XtxMessage from './xtx-message.vue'

export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive函数
    // component是用来进行全局组件注册的
    // directive主要是用来自定义指令的
    // 如果要挂载原型 app.config.globalProperties 方式
    app.component(XtxMessage.name, XtxMessage)
  }
}

使用插件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
+import ui from './components/library'

+// 插件的使用，在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用：

骨架屏组件

 封装组件：src/components/library/xtx-skeleton.vue

插件定义： src/componets/library/index.js

import XtxSkeleton from './xtx-skeleton.vue'

export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    // component是用来进行全局组件注册的
    // directive主要是用来自定义指令的
    app.component(XtxSkeleton.name, XtxSkeleton)
  }
}

使用插件： src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
+import ui from './components/library'

+// 插件的使用，在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')

在.vue文件中使用：