Vue3项目探索

组件封装

代码中有很多处组件的封装，例如SVG图标的组件封装，在代码中对于icon的展示有独特的封装， 它并非简单的存储svg，而是只存储svg的核心部分，然后再使用forwardRef来实现封装并后期利用className等对svg样式进行修改。这样在代码后续调用的时候就可以对svg图标进行丰富的自定义和操作。

首先是导入方式，此处在svg的路径后使用了?react后缀，其目的是告诉Vite：将这个SVG文件转换为一个React组件，这样在转化后Assistant就是一个可以直接渲染的React组件：<Assistant / >

用户列表管理（对比 Vue3 核心差异 + 网络请求）

这个案例是「用户列表管理」（包含列表展示、关键词筛选、分页、新增 / 删除用户），复杂度适中，能覆盖 React 与 Vue3 核心差异，且重点体现 React 网络请求的写法。全程用 TS + React Hooks，对比 Vue3 逐点标注差异，帮你快速掌握核心区别。

一、案例准备

1. 环境（和 Vue3 一致，快速过）

# 创建 React+TS 项目（类比 Vue3 + Vite）
npm create vite@latest react-user-list -- --template react-ts
cd react-user-list && npm i && npm i axios antd # 安装axios（网络请求）、antd（UI组件，类比Element Plus）
npm run dev

基础入门

一、核心认知：React 是什么？（类比 Vue）

Vue3 是「渐进式框架」，有完整的模板、指令、响应式体系；React 是「UI 库」（核心只管视图渲染），更像「函数式的视图生成器」，核心思想：用函数描述 UI，数据变了函数重新执行，UI 就更新。

关键类比（Vue3 → React）

组件传值

我上次所撰写的页面属于一个分步骤走的流程页面，因此每个步骤页面都有共同的父组件index.vue，因此各个步骤页面的 数据都是统一通过父组件进行请求和分发的，因此只有父子组件之间的数据流动。这里我是使用的 defineProps和 defineEmits来实现组件双向绑定（v-model）的标准且兼容性广泛的方法。其核心在于理解 v-model 本质上是语法糖，它自动处理了一个名为 modelValue的 prop 和一个名为 update:modelValue的自定义事件 。

此次教学课程为硅谷甄选运营平台项目,包含运营平台项目模板从0到1开发，以及数据大屏幕、权限等业务。

此次教学课程涉及到技术栈包含 :vue3+TypeScript+vue-router+pinia+element-plus+axios+echarts 等技术栈。

一、vue3组件通信方式

通信仓库地址:https://gitee.com/jch1011/vue3_communication.git

不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。

这是对于计算机设计大赛的项目进行的简略撰写以及技巧记录

前提准备

数据库格式

数据库user-list中的存储方式类似于：

{
  "username": "aaa",
  "password": "123",
  "love": [],
  "commit": []
}