创建运行vue3框架
第一步：npm init vue@latest 创建项目
第二步：npm install 安装
第三步：npm i sass 安装组件库(Element Plus)
第四部：npm run dev 运行
注册main.js
import { createApp } from 'vue' (从Vue3核心库中导入 创建应用实例的方法)
import App from './App.vue' (导入根组件 App.vue)
import ElementPlus from 'element-plus' (导入 Element Plus 组件库的 **核心模块** 和 **全局样式文)
import 'element-plus/dist/index.css'
import Header from "./pages/Header.vue" (导入Header页面级组件)
const app = createApp(App) 调用`createApp`方法，以`App.vue`为根组件，创建一个 Vue 应用实例
app.use(ElementPlus) 给 Vue 应用实例 “安装” Element Plus 插件，让全局都能使用 Element Plus 的组件
app.component("Header", Header) 全局注册组件：第一个参数是组件的 “使用名称”<Header></Header>，第二个参数是导入的组件本身。
APP.vue根组件的内容
<template>
<Header :form-data="formData"/>
</template>
这种写法的本质是 “父子组件嵌套” ：当前组件（可理解为 “父组件”）通过模板标签直接使用子组件，子组件的渲染位置完全由父组件的模板结构决定。
核心功能：通过 props 传递数据
模板中通过 :属性名="数据" 的语法（Vue 的 props 传递方式）向子组件传递数据，这是父子组件通信的核心方式：
1. 数据传递规则
:form-data="formData"：将父组件的formData数据，通过form-data这个 props 名称传递给子组件（如Header等）。
2. 子组件如何接收数据？
以 Header 组件为例，它需要在自身的代码中声明接收 form-data 这个 props：
<!-- Header.vue 中 -->
<script setup>
import { defineProps } from 'vue'
// 声明接收 props：form-data//
const props = defineProps({
formData: {
type: Object, // 假设 formData 是一个对象//
required: true // 表示这个数据是必须传递的//
}
})
// 使用 props 中的数据//
console.log(props.formData)
</script>
引用响应式数据
<script setup> \\这是 Vue 3 引入的 `<script setup>` 语法糖，用于简化组件的编写\\
import { ref } from 'vue' \\导入了 Vue 的 `ref` 函数，用于创建响应式数据\\
const formData = ref({ \\定义了 `formData` 响应式对象\\
title: "上海餐饮管理有限公司",
\\`tagList`：数组类型，包含两个对象，每个对象有 `label` 和 `value` 属性，看起来是标签选择数据\\
tagList: [{ label: "中型饭店", value: 1 }, { label: "其他类", value: 2 },],
name: "某某餐饮",} )
const tableData = [ { \\这是一个普通的 JavaScript 数组，包含一条数据记\\
ledgerName: '2025年7-9月清洗记录',
operationFrequency: '季度',
reportDate: '2025-07-01',
},
</script>
组件案例“header”
这段代码是一个 Vue 3 的单文件组件，分为模板（template）、脚本（script）和样式（style）三部分：
1.模板部分（<template>）
<template>
<div class="header"> \\一个类名为 `header` 的容器 div\\
\\一个类名为 `title` 的 div，通过 `{{ formData.title }}` 绑定显示标题文本\\
<div class="title"> {{formData.title}}</div>
\\ 一个类名为 `tag-group` 的 div，用于展示标签组\\
<div class="tag-group"> \\类名为 `tag-group` 的 div，用于展示标签组\\
\\使用 `v-for` 指令遍历 `formData.tagList` 数组，为每个元素渲染一个 `el-tag` 组件（Element Plus 组件库的标签组件）\\
<el-tag v-for="itme in formData.tagList" :key="item.value" type="primary">{{ item.label }}</el-tag> \\`key="item.value"` 为循环的每个标签指定唯一 key,`type="primary"` 设置标签的主题样式为主要色,`{{ item.label }}` 显示标签的文本内容\\
</div>
</div>
</template>
2. 脚本部分（<script setup>）
<script setup>
import { defineProps } from 'vue' \\导入 `defineProps` 函数，用于定义组件的 props（父组件传递过来的属性）\\
const props = defineProps({ \\通过 `defineProps` 定义了 `formData` 属性：\\
formData: {
type: Object, \\类型为 `Object`（对象）\\
required: true, \\`required: true` 表示这是一个必填属性，父组件必须传递该属性\\
})
3. 样式部分（<style>）
<style lang="scss" scoped> \\使用 `lang="scss"` 指定使用 SCSS 预处理器,`scoped` 表示样式只作用于当前组件，不会污染其他组\\
.header { \\为 `.header` 容器内的元素设置样式\\
.title { \\`.title` 类：字体大小 24px，粗体\\
font-size: 24px;
font-weight: bold;
}
.tag-group { \\`.tag-group` 类：顶部外边距 5px，底部内边距 5px\\
margin-top: 5px;
padding-bottom: 5px;
.el-tag {
margin-right: 10px; \\标签组内的 `.el-tag` 组件：右侧外边距 10px（标签之间的间距）\\
}
}
}
</style>
Element Plus 的 el-descriptions
<el-descriptions :column="3" border> \\:column="3"`：设置描述列表每行显示 3 个信息项（即一行展示 3 组 "标签 + 内容"）\\
\\`border`：添加边框样式，使整个信息列表呈现表格化的边框效果，更清晰地区分各信息项\\
<!-- 各类信息项 -->
<el-descriptions-item label="门牌店名:">{{ formData.name }}</el-descriptions-item>
\\每个 `el-descriptions-item` 代表一组信息，包含 `label`（标签 / 标题）和内容：\\
\\门牌店名：绑定 `formData.name`\\
<el-descriptions-item label="是否位于商业综合体内:">
<el-tag size="small">是</el-tag>
</el-descriptions-item>
\\否位于商业综合体内：固定显示 `<el-tag size="small">是</el-tag>`（标签组件，显示 "是"）\\
</el-descriptions>
