vue3+ts的项目中实现骨架屏

一、src/components下新建目录 skeleton/index.vue 

骨架屏本质上就是一个div元素，给它设置宽高背景色 动画等.. 就能得到不一样的骨架屏样式

二、骨架屏注册成全局组件

// 统一的注册所有的全局组件

// 骨架屏组件
import XtxSkeleton from '@/components/skeleton/index.vue'
import { App } from 'vue'
export default {
    install(app: App) {
        app.component(XtxSkeleton.name, XtxSkeleton)
    },
}

三、main.ts注册成全局插件

// 导入全局组件 ，挂载到App上
import XtxUI from './components'
createApp(App).use(XtxUI).use(router).use(createPinia()).mount('#app')

 四、页面中使用