Vue 3.0 CLI 是一个基于 Vue.js 3.0 的命令行工具，用于快速搭建现代化的前端项目。在这个版本中，组件是构建用户界面的基本单元，是 Vue 框架的核心概念。组件可以复用，有助于保持代码的模块化和可维护性。
组件一般包含三个主要部分：模板（template）、脚本（script）和样式（style）。在 `.vue` 文件中，这些部分分别由 `<template>`、 `<script>` 和 `<style>` 标签包裹。
1. **模板（Template）**：模板用于定义组件的结构和内容。每个组件都至少有一个顶级的 `div` 元素，它将包含组件的所有内容。模板中的指令（如 `v-for`、`v-if` 等）用于控制数据如何绑定到视图上。
2. **脚本（Script）**：脚本部分通常用来定义组件的逻辑，包括数据（data）、属性（props）、方法（methods）等。在 `export default` 对象中，我们可以声明组件的名称（name）、接收的属性（props）等。例如，`props` 字段定义了组件期望从父组件接收的数据，它们是只读的，并且可以通过类型限制进行约束。
3. **样式（Style）**：组件内的样式通过 `<style>` 标签定义，提供了组件作用域的 CSS，避免全局样式冲突。这意味着样式仅应用于当前组件，不会影响其他组件。
在大型项目中，为了代码组织和维护，有时会将模板、脚本和样式分别放在不同的文件中。`.vue` 文件将这些部分聚合在一起，而 `.js` 文件则独立处理逻辑部分。例如，`main.js` 可能用于设置应用的入口，而组件的逻辑可能在单独的 `.js` 文件中定义。
在 `app.vue` 文件中，`script` 部分通常包含整个应用的配置，如路由设置、状态管理等，而其他组件的 `script` 更专注于组件自身的功能。`app.vue` 作为主程序入口，不包含常规组件的 `data`、`props` 等属性。
组件的使用涉及到导入和注册。例如，在 `views/home.vue` 中，我们首先通过 `import` 导入 `HelloWorld` 组件，然后在 `components` 字段中注册，最后在模板中使用 `<HelloWorld>` 标签，并通过 `props` 传递数据。
组件间的通信主要通过 props（父向子）和事件（子向父）实现。在上面的例子中，`msg` 是一个从 `views/home.vue` 传给 `HelloWorld` 组件的 prop。
Vue 3.0 CLI 提供了一种高效的方式来创建和管理组件，使得开发者可以构建复杂的应用程序，同时保持代码的清晰和模块化。对于初学者，理解组件的结构、用途以及它们之间的交互方式是掌握 Vue.js 开发的关键。通过实例代码的学习和实践，可以更深入地了解这一强大的特性。
