第一周总结

本周工作内容
​​Vue3 基础知识学习​​
学习了 Vue3 的基本指令和语法，包括：
v-model：实现数据的双向绑定
v-if/v-else：条件渲染
v-for：列表渲染
@（v-on）：事件绑定
:（v-bind）：动态绑定属性
实践了 Vue3 的 setup 语法，使用 ref 和 reactive 定义响应式数据。
完成了多个 Vue3 的示例代码，包括数据渲染、表单输入、条件渲染、列表渲染、事件绑定等。
​​Element Plus 组件学习​​
学习了 Element Plus 常用组件的使用，包括：
el-input：输入框
el-select：选择器
el-radio：单选框
el-checkbox：多选框
el-image：图片展示
el-carousel：走马灯（轮播图）
配置了 vite.config.js，实现了 Element Plus 的按需引入和主题定制。
实践了 Element Plus 组件的动态绑定和事件处理。
学到的知识
​​Vue3 核心概念​​
ref 和 reactive 的区别：ref 用于基本数据类型，reactive 用于对象或数组。
setup 语法糖的使用，简化了代码结构。
指令的灵活运用，如 v-model 绑定表单输入、v-for 渲染列表等。
​​Element Plus 组件​​
组件的属性和事件绑定方式。
如何通过 vite.config.js 配置按需引入和主题定制。
本地图片的引入和动态绑定。
​​工程化配置​​
使用 vite 构建工具，配置别名（@）和 SCSS 预处理。
通过 unplugin-auto-import 和 unplugin-vue-components 实现自动导入。
遇到的问题及解决方法
​​问题​​：Element Plus 主题色定制不生效。
​​解决方法​​：检查 vite.config.js 中的 scss 配置，确保 additionalData 正确引入了自定义的 SCSS 文件，并在文件中覆盖了主题变量。
​​问题​​：el-image 组件预览功能无法加载本地图片。
​​解决方法​​：将本地图片路径通过 import 导入，再绑定到 preview-src-list 中。
​​问题​​：v-for 渲染列表时 key 的重复警告。
​​解决方法​​：确保 key 的唯一性，使用数据的唯一标识（如 id）作为 key。
代码统计
​​Vue3 基础代码​​
代码量：约 50 行（模板 + 脚本）。
完成时长：2 小时。
​​Element Plus 组件代码​​
代码量：约 100 行（模板 + 脚本 + 配置）。
完成时长：4 小时（包括配置和调试）。
​​工程化配置​​
代码量：约 30 行（vite.config.js + index.scss）。
完成时长：2 小时。
总结
本周系统学习了 Vue3 的基础知识和 Element Plus 组件的使用，掌握了响应式数据的定义和动态绑定的技巧。通过实践解决了配置和组件使用中的问题，对前端工程化有了更深入的理解。下一步计划深入学习 Vue3 的组合式 API 和状态管理（如 Pinia）。