组件的使用在前端项目开发中绝对是不可缺少的组件部分，组件的使用不仅在开发中更便捷节约开发时间。

在项目后期的维护中，组件开发的项目相对于没有组件的项目，其维护成本及便捷两者之间绝对有着天壤之别。

因此在开发中对于组件的开发及使用，绝对是所有开发者需要了解及使用的组成部分。

uni-app框架vue3全局组件创建及使用完整流程如下。

一、创建公用组件空数据组件globa_empty

    在根目录components文件中创建components.vue，写入如下代码

<template>
	<view >
		<view class="empty">
			<view class="empty_tips">{{tips}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:"empty",
		props:{
			tips:{
				type:String,
				default:'暂无相关数据'
			}
		}
	}
</script>
<style lang="scss" scoped>
	.empty{
		padding:60rpx;
		text-align: center;
		&_tips{
			color: #999;
			font-size: 24rpx;
		}
	}
</style>

二、main.js中配置全局组件

// #ifdef VUE3
import { createSSRApp } from 'vue'
import globalEmpty from '@/components/globa_empty.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.component('globalEmpty', globalEmpty)
  return {
    app
  }
}
// #endif

三、页面中使用全局空数据组件

<template>
	<view class="pages">
		<globalEmpty ></globalEmpty>
	</view>
</template>

关于组件：

    对于组件的使用，对于一些使用频次比较高的组件，可以考虑将组件如上述流程配置成全局组件，这样避免每次使用都需要单独引用。

    全局的组件，在使用时也更加方便，对于后期项目的维护来说全局的组件也便于管理。