1、创建组件
组件（component）是 Vue.js 最强大的功能之一。通过开发组件可以封装可服用的代码，将封装好的代码注册成标签，扩展 HTML 元素的功能。几乎任意类型应用的界面都可以抽象为一个组件树，而组件树可以用独立可复用的组件来构建。
组件是 Vue 自定义的一种文件，以 .vue 作为文件的后缀名。
创建组件的语法格式：
<!-- 组件的内容 -->
<template></template><!-- 组件的脚本 -->
<script>
export default {}
</script><!-- 组件的样式 -->
<style scoped></style>【实例】创建 MyComponent.vue 组件文件，实现用户信息的显示。
<template><p class="b-name">博客信息：{{blogName}}</p><p class="b-url">博客地址：{{blogUrl}}</p>
</template><script>
export default {data() {return {blogName: '您好，欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao'}}
}
</script><style scoped>.b-name{font-size: 26px;color: red;}.b-url{font-size: 24px;color:blue;}
</style>项目目录结果如下图：
2、注册组件
在使用组件之前需要将组件注册到应用中。Vue.js 提供了两种注册方式，分别是局部注册和全局注册，下面分别进行介绍。
2.1 注册局部组件
通过 Vue 实例中的 components 选项可以注册一个局部。对于 components 对象中的每个属性来说，其属性就是定义组件的名称，其属性值就是这个组件的选项对象。
【实例】在 App.vue 根组件中，注册局部组件。
<template><!-- 第三步：使用组件 --><MyComponent />
</template><script>
//第一步：引用组件
import MyComponent from './components/MyComponent.vue'export default {//第二步：注册组件components: {MyComponent,}
}
</script>执行结果：
2.2 注册全局组件
全局注册的组件也叫全局组件。
注册一个全局组件的语法格式如下：
app.component(tagName, options)参数的说明如下：
tagName：表示定义的组件名称。
options：表示组件的选项对象。
【实例】创建并注册一个全局组件。
（1）创建 GlobalComponent.vue 全局组件
<template><h1>我是一个全局组件</h1>
</template>（2）在 main.js 文件中，注册全局组件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//第一步：引用组件
import GlobalComponent from './components/GlobalComponent.vue'const app = createApp(App);app.use(router);//第二部：注册全局组件
app.component("GlobalComponent", GlobalComponent);app.mount('#app');（3）在 App.vue 根组件中，使用全局组件
<template><!-- 第三步：使用组件 --><GlobalComponent /><MyComponent />
</template>执行结果：
