2026.7.21实习日记

Vue 前端培训实习日记一、今日学习主题本次全天集中开展 Vue3Element Plus 前端系统化培训覆盖 Vue 内置动画、组件缓存、弹窗挂载、单文件组件规范、CSS 全套知识、Flex 弹性布局、企业项目技术栈规范、AI 编程工具使用规范同时结合真实业务页面案例实操讲解内容偏向企业实际开发落地知识点细碎但实用性极强。二、核心知识点学习记录一Vue 内置过渡动画 Transaction作用实现页面切换、打开弹窗时的过渡效果页面顶部窄进度条、灰度切换动画底层依靠 CSS 过渡实现透明度、位移等变化。两种使用方式简便写法直接使用内置transaction-name无需手写过渡样式项目开发优先使用自定义复写通过内置名称搭配后缀手动重写过渡透明度、时长如 0.5 秒淡入淡出日常开发极少用到。动画业务价值页面加载慢时用动画缓冲用户等待感、提升交互体验但无动画的页面加载速度感知更快需按需取舍。补充RSR、MongoDB 相关动画配套组件项目极少使用仅做了解即可。二组件缓存 KeepAlive功能包裹组件后组件卸载不会销毁再次切换时直接从缓存读取避免重复请求、重复渲染。企业通用规范项目根组件外层统一包裹 KeepAlive全局缓存页面组件是业务系统标准写法。三弹窗 / 浮动层挂载机制Model 弹窗浮动层布局痛点若弹窗写在父组件内部会被父容器宽高、z-index 层级截断遮挡挂载至 body 根节点可规避该问题层级不受父容器限制。挂载配置属性可指定组件渲染后挂载到任意 DOM 节点body、指定容器等多个弹窗指定同一挂载点会统一渲染在该容器内异步组件相关配置业务使用频率极低仅了解。四Vue 单文件组件 SFC 规范.vue 文件单文件分为 template 模板、script 脚本、style 样式三大块书写顺序无强制要求个人习惯优先放模板方便直观查看页面结构。script 标签script setup组合式 API 语法变量、方法无需手动 return开发首选无 setup 则需书写老式 Options API。lang 属性langts为 TypeScript类型安全、强制声明变量类型langjs为原生 JS。style 样式标签scope 作用域添加后样式仅作用于当前组件编译后会给 DOM 添加唯一属性区分避免全局样式污染企业开发强制推荐全局样式写法① 新建无 scope 的 style 标签共存② 使用:deep()深度选择器穿透修改子组件内部样式CSS 预处理器支持 scss/less可定义变量目前更推荐原生 CSS 变量无需额外编译工具。CSS 原生变量定义:root全局变量、父元素定义局部变量子元素可继承使用使用语法var(变量名, 默认值)变量不存在时自动使用兜底值适配多主题、统一配色场景。五CSS 系统完整知识梳理CSS 基础构成选择器 样式规则属性 属性值选择器负责匹配 DOM 元素属性负责修改元素外观。常用选择器基础标签选择器、ID 选择器#、类选择器.属性选择器匹配标签指定属性 / 属性值如 input [typetext]后代 / 父子选择器空格匹配所有后代仅匹配直接子元素伪类选择器:hover鼠标悬浮、a 链接专用伪类link/visited/hover/active控制链接颜色、下划线。样式覆盖规则后写样式覆盖同名前置样式多选择器用逗号分隔批量统一样式可合并 HTML、body 等公共标签样式精简代码。字体适配多系统默认字体不一致font-family 写字体列表向下兼容自定义字体文件体积大项目无特殊需求不引入。列表、表格基础样式清除 ul 默认圆点、合并表格边框等业务高频操作。六Flex 弹性布局页面布局核心重点布局发展早期 float 浮动布局兼容性差现代项目统一使用 Flex适配卡片、页面分栏、居中布局。核心概念容器开启display: flex分为主轴、交叉轴所有布局对齐规则围绕两轴控制。容器六大属性flex-direction主轴方向row 横向默认、column 纵向、reverse 反向flex-wrap是否自动换行卡片列表必备justify-content主轴对齐左 / 右 / 居中、两端留白开发最常用align-items交叉轴对齐上下居中、拉伸、基线对齐文字flex-flow合并 directionwrap 简写可读性差不推荐align-content多行元素整体交叉轴排布。子项属性order自定义子元素展示顺序flex-grow空间富余时等分宽度flex-shrink空间不足时等比缩小flex-basis预分配固定尺寸align-self单独修改单个子元素对齐方式。多层嵌套布局实战后台管理系统经典布局Header 顶部栏 侧边 Aside 中间 Main 内容区 Footer 底部外层纵向 Flex中间内容横向 Flex通过多层嵌套实现复杂页面排版。七企业项目技术栈硬性规范Vue 版本新项目统一 Vue3配套组件库 Element Plus遗留老项目为 Vue2Element UI禁止私自更换技术组件技术选型约束新增第三方组件、工具必须提前和技术负责人沟通禁止私自引入非规定技术开发工具红线能源行业涉密项目禁止使用 GitHub CopilotOpenAI 工具谨慎使用优先选用国内 AI 编程工具防止业务代码、内部方案泄露泄露需承担相关责任。八AI 工具高效使用技巧方案、编码辅助写方案思路辅助让 AI 检索同类产品、制定评分标准迭代优化方案剔除低收益方案提示词约束技巧给 AI 明确限制条件减少代码乱改、逻辑漏洞关键避坑AI 会缓存历史无效内容迭代完成后需指令清理历史垃圾避免过时逻辑混入最终文档 / 代码论文、原创文档使用额外约束 AI 降低重复度保证原创性。三、实操案例收获以后台管理 Layout 布局页面实操拆解顶层容器display: flex; flex-direction: column实现上下分栏Header 主体 Footer中间主体容器横向 Flex左右侧边栏固定宽度中间 Main 自动占满剩余空间全局统一使用 CSS 变量管理主题色所有页面直接复用方便后期统一换肤区分布局类样式flex、宽高、排布和美化类样式颜色、圆角、字体分层开发逻辑更清晰。四、行业发展感悟浏览器兼容早期 IE 系列兼容性问题消耗大量开发时间现代浏览器统一 Webkit 内核无需再处理老旧兼容问题前端开发效率大幅提升构建工具迭代旧项目使用 WebpackVue 官方全新工具 Vite8 采用 Rust 重构打包、启动速度更快企业现有项目多停留在 Vite5/6版本迭代落地周期较长前后端分工后端核心工作是编写接口前端承担页面模块、交互、布局大量落地工作需要大量实操积累经验踩坑越多成长越快。五、工作安排与后续计划今日课程收尾明日无集中授课安排拉取项目代码上手实操疑问沟通近期讲师项目任务繁重后续问题需提前预约沟通日常开发问题优先咨询带教同事长期学习前端知识点零散Flex 布局、Vue 过渡、scope 样式为高频核心课后自行复盘练习安全红线牢记所有代码、内部方案禁止使用境外 AI 工具严守行业数据保密要求。六、今日总结反思优点本次培训理论结合真实业务页面案例相比纯理论讲解更容易理解最后 AI 工具、行业实战经验部分实用性最高待巩固内容Flex 多属性组合使用、深度穿透样式:deep()、Vue 过渡动画自定义写法课后需要写 demo 练习注意事项企业开发有严格技术规范不能凭个人习惯随意引入组件、修改基础架构所有改动同步负责人代码安全第一严格遵守工具使用规定。