2026.7.21实习日记

Vue 前端培训实习日记

一、今日学习主题

本次全天集中开展 Vue3+Element Plus 前端系统化培训，覆盖 Vue 内置动画、组件缓存、弹窗挂载、单文件组件规范、CSS 全套知识、Flex 弹性布局、企业项目技术栈规范、AI 编程工具使用规范，同时结合真实业务页面案例实操讲解，内容偏向企业实际开发落地，知识点细碎但实用性极强。

二、核心知识点学习记录

（一）Vue 内置过渡动画 Transaction

1. 作用：实现页面切换、打开弹窗时的过渡效果（页面顶部窄进度条、灰度切换动画），底层依靠 CSS 过渡实现透明度、位移等变化。
2. 两种使用方式
   • 简便写法：直接使用内置transaction-name，无需手写过渡样式，项目开发优先使用；
   • 自定义复写：通过内置名称搭配后缀，手动重写过渡透明度、时长（如 0.5 秒淡入淡出），日常开发极少用到。
3. 动画业务价值：页面加载慢时用动画缓冲用户等待感、提升交互体验；但无动画的页面加载速度感知更快，需按需取舍。
4. 补充：RSR、MongoDB 相关动画配套组件项目极少使用，仅做了解即可。

（二）组件缓存 KeepAlive

1. 功能：包裹组件后，组件卸载不会销毁，再次切换时直接从缓存读取，避免重复请求、重复渲染。
2. 企业通用规范：项目根组件外层统一包裹 KeepAlive，全局缓存页面组件，是业务系统标准写法。

（三）弹窗 / 浮动层挂载机制（Model 弹窗）

1. 浮动层布局痛点：若弹窗写在父组件内部，会被父容器宽高、z-index 层级截断遮挡；挂载至 body 根节点可规避该问题，层级不受父容器限制。
2. 挂载配置属性：可指定组件渲染后挂载到任意 DOM 节点（body、指定容器等），多个弹窗指定同一挂载点会统一渲染在该容器内；异步组件相关配置业务使用频率极低，仅了解。

（四）Vue 单文件组件 SFC 规范（.vue 文件）

单文件分为 template 模板、script 脚本、style 样式三大块，书写顺序无强制要求，个人习惯优先放模板，方便直观查看页面结构。

1. script 标签
   • <script setup>：组合式 API 语法，变量、方法无需手动 return，开发首选；无 setup 则需书写老式 Options API。
   • lang 属性：lang="ts"为 TypeScript，类型安全、强制声明变量类型；lang="js"为原生 JS。
2. style 样式标签
   • scope 作用域：添加后样式仅作用于当前组件，编译后会给 DOM 添加唯一属性区分，避免全局样式污染，企业开发强制推荐；
   • 全局样式写法：① 新建无 scope 的 style 标签共存；② 使用:deep()深度选择器，穿透修改子组件内部样式；
   • CSS 预处理器：支持 scss/less，可定义变量；目前更推荐原生 CSS 变量，无需额外编译工具。
3. CSS 原生变量
   • 定义：:root全局变量、父元素定义局部变量，子元素可继承使用；
   • 使用语法：var(变量名, 默认值)，变量不存在时自动使用兜底值，适配多主题、统一配色场景。

（五）CSS 系统完整知识梳理

1. CSS 基础构成：选择器 + 样式规则（属性 + 属性值），选择器负责匹配 DOM 元素，属性负责修改元素外观。
2. 常用选择器
   • 基础：标签选择器、ID 选择器（#）、类选择器（.）；
   • 属性选择器：匹配标签指定属性 / 属性值（如 input [type="text"]）；
   • 后代 / 父子选择器：空格匹配所有后代，>仅匹配直接子元素；
   • 伪类选择器：:hover鼠标悬浮、a 链接专用伪类（link/visited/hover/active）控制链接颜色、下划线。
3. 样式覆盖规则：后写样式覆盖同名前置样式，多选择器用逗号分隔批量统一样式；可合并 HTML、body 等公共标签样式精简代码。
4. 字体适配：多系统默认字体不一致，font-family 写字体列表向下兼容；自定义字体文件体积大，项目无特殊需求不引入。
5. 列表、表格基础样式：清除 ul 默认圆点、合并表格边框等业务高频操作。

（六）Flex 弹性布局（页面布局核心重点）

1. 布局发展：早期 float 浮动布局兼容性差，现代项目统一使用 Flex，适配卡片、页面分栏、居中布局。
2. 核心概念：容器开启display: flex，分为主轴、交叉轴，所有布局对齐规则围绕两轴控制。
3. 容器六大属性
   • flex-direction：主轴方向（row 横向默认、column 纵向、reverse 反向）；
   • flex-wrap：是否自动换行，卡片列表必备；
   • justify-content：主轴对齐（左 / 右 / 居中、两端留白），开发最常用；
   • align-items：交叉轴对齐（上下居中、拉伸、基线对齐文字）；
   • flex-flow：合并 direction+wrap 简写，可读性差不推荐；
   • align-content：多行元素整体交叉轴排布。
4. 子项属性
   • order：自定义子元素展示顺序；
   • flex-grow：空间富余时等分宽度；flex-shrink：空间不足时等比缩小；
   • flex-basis：预分配固定尺寸；align-self：单独修改单个子元素对齐方式。
5. 多层嵌套布局实战：后台管理系统经典布局（Header 顶部栏 + 侧边 Aside + 中间 Main 内容区 + Footer 底部），外层纵向 Flex，中间内容横向 Flex，通过多层嵌套实现复杂页面排版。

（七）企业项目技术栈硬性规范

1. Vue 版本：新项目统一 Vue3，配套组件库 Element Plus；遗留老项目为 Vue2+Element UI，禁止私自更换技术组件；
2. 技术选型约束：新增第三方组件、工具必须提前和技术负责人沟通，禁止私自引入非规定技术；
3. 开发工具红线：能源行业涉密项目，禁止使用 GitHub Copilot；OpenAI 工具谨慎使用，优先选用国内 AI 编程工具，防止业务代码、内部方案泄露，泄露需承担相关责任。

（八）AI 工具高效使用技巧（方案、编码辅助）

1. 写方案思路辅助：让 AI 检索同类产品、制定评分标准，迭代优化方案，剔除低收益方案；
2. 提示词约束技巧：给 AI 明确限制条件，减少代码乱改、逻辑漏洞；
3. 关键避坑：AI 会缓存历史无效内容，迭代完成后需指令清理历史垃圾，避免过时逻辑混入最终文档 / 代码；
4. 论文、原创文档使用：额外约束 AI 降低重复度，保证原创性。

三、实操案例收获

以后台管理 Layout 布局页面实操拆解：

1. 顶层容器display: flex; flex-direction: column实现上下分栏（Header + 主体 + Footer）；
2. 中间主体容器横向 Flex，左右侧边栏固定宽度，中间 Main 自动占满剩余空间；
3. 全局统一使用 CSS 变量管理主题色，所有页面直接复用，方便后期统一换肤；
4. 区分布局类样式（flex、宽高、排布）和美化类样式（颜色、圆角、字体），分层开发逻辑更清晰。

四、行业发展感悟

1. 浏览器兼容：早期 IE 系列兼容性问题消耗大量开发时间，现代浏览器统一 Webkit 内核，无需再处理老旧兼容问题，前端开发效率大幅提升；
2. 构建工具迭代：旧项目使用 Webpack，Vue 官方全新工具 Vite8 采用 Rust 重构，打包、启动速度更快；企业现有项目多停留在 Vite5/6，版本迭代落地周期较长；
3. 前后端分工：后端核心工作是编写接口，前端承担页面模块、交互、布局大量落地工作，需要大量实操积累经验，踩坑越多成长越快。

五、工作安排与后续计划

1. 今日课程收尾，明日无集中授课，安排拉取项目代码上手实操；
2. 疑问沟通：近期讲师项目任务繁重，后续问题需提前预约沟通，日常开发问题优先咨询带教同事；
3. 长期学习：前端知识点零散，Flex 布局、Vue 过渡、scope 样式为高频核心，课后自行复盘练习；
4. 安全红线牢记：所有代码、内部方案禁止使用境外 AI 工具，严守行业数据保密要求。

六、今日总结反思

1. 优点：本次培训理论结合真实业务页面案例，相比纯理论讲解更容易理解，最后 AI 工具、行业实战经验部分实用性最高；
2. 待巩固内容：Flex 多属性组合使用、深度穿透样式:deep()、Vue 过渡动画自定义写法，课后需要写 demo 练习；
3. 注意事项：企业开发有严格技术规范，不能凭个人习惯随意引入组件、修改基础架构，所有改动同步负责人；代码安全第一，严格遵守工具使用规定。