【Vue3】day84-boss-three-screens

Day 84 · BOSS 战 — 三屏完整轮播与周收官：生态替换的全面验收本周收官战。屏 A/B 已迁移、屏 C 本周仍是占位（Week 13 主菜）——但这不妨碍今天做三屏完整轮播验收：占位屏也走真实的路由/缓存/守卫链路。今天的作业是"验收 + 收官"：跑 Day 69 联调清单的 Vue

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day83-screen-a-migration

Day 83 · 屏 A 迁移 — KPI 总览页：把"开场白"搬进 Vue 生态件就绪（Router/Pinia/KeepAlive/Teleport），今天迁最后一块主内容：屏 A（KPI 总览页）——大屏的"开场白"：四 KPI 翻牌矩阵 + 厂区俯视占位图 + 告警滚动条。它的迁移几乎全是装

作者：mario 发布时间：2026-09-03

分类：前端开发 , Vue3

标签： #前端开发

【Vue3】day82-keepalive-teleport

Day 82 · KeepAlive 与 Teleport — 缓存与传送：大屏交互的两件利器路由切换=卸载重建（Day 78 的痛）今天解决：KeepAlive 缓存屏幕组件实例，切走不销毁、切回零等待——它就是 Day 64"opacity 保实例"策略的官方实现，还附赠 onActivate

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day81-pinia-datalink

Day 81 · Pinia 进阶 — 数据源接入与 store 设计：ScreenStore 退役日昨天状态入了 store 但没有活水。今天把 WS 数据源接进 dashboard store——分层设计是今天的主题：实例（连接、定时器）住 store 外，数据与状态住 store 内，分频策

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day80-pinia-basic

Day 80 · Pinia 上手 — defineStore：全局状态的正规军替换周第二刀：Pinia 接管全局数据。今天先建 useDashboardStore——把 Day 65 ScreenStore 的"状态部分"（latest / alarms / tempWindows / conn

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day79-router-guards-carousel

Day 79 · 路由进阶 — 守卫、过渡与轮播联动：ScreenRouter 退役日昨天路由表跑通，但轮播还握在手写 ScreenRouter 手里。今天写一个纯决策的轮播调度器（composable）：它只回答"何时该切、切到哪"，切换动作统一走 router.push——职责分离后，守卫（b

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day78-vue-router-basic

Day 78 · Vue Router 基础 — 三屏路由化：URL 成为状态今天让 Day 64 手写的 ScreenRouter 开始退役：三屏切换交给 Vue Router，URL 成为屏幕状态的一部分——/a /b /c 分别对应三屏，刷新不丢、后退可用、可收藏分享。这是替换周的第一刀：只

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day77-boss-screen-b-vue

Day 77 · BOSS 战 — 屏 B Vue 版整屏迁移与"原生 vs Vue"对比报告本周收官。今天把 Day 74-76 的零件装配成完整的屏 B（实时监控页）Vue 版：五卡片布局 + 五图表模块 + 容错表现，与原生版行为逐项对齐。然后做本周最有价值的事：整理"原生 vs Vue 对

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day76-echarts-component

Day 76 · ECharts Vue 组件封装 — VChart：图表基座的三个老大难 ECharts 与 Vue 的结合是工业可视化的高频面试题，也是三个老大难的聚集地：0 尺寸容器 init 失败（Day 52 坑 1 的 Vue 版）、数据变化驱动更新（watch 的正确姿势）、dispo

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day75-composables

Day 75 · Composables 组合式函数 — 数据层的 Vue 化改造组合式函数不是"工具函数"，是有状态逻辑的复用单元。今天的核心工程：useScreenStore——把 Day 65 的手写 ScreenStore 桥接进响应式世界，并封装 useDataSource 让"订阅与退

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day74-props-emit-slot

Day 74 · props / emit / slot — 组件化第一课：装配三件套逻辑已就绪（Day 73），今天学把逻辑和结构装配成可复用组件的三个通道：props（父 → 子的数据）、emit（子 → 父的事件）、slot（父 → 子的内容分发）。实战两个组件：TechCard（Day 6

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day73-computed-watch

Day 73 · computed / watch / 生命周期 — 让状态自己流动起来昨天学会了"存状态"，今天学"状态之间的传导"：computed（派生状态）、watch（联动副作用）、生命周期钩子（成对清理纪律）。实战对象是 Day 67 的 KPI 数字翻牌器——它恰好是三者的完美交汇：

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day72-reactivity

Day 72 · 响应式核心 — ref / reactive / shallowRef 与模板语法响应式是 Vue 的心脏，也是"命令式 → 声明式"转型的地基。今天用三个实战组件吃透它：标题栏状态灯（连接状态的响应式映射）、屏切换的 v-show（对照 Day 64 的 opacity 策略）

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day71-vite-setup

Day 71 · Vite 项目搭建与大屏骨架迁移 — Vue 版的第一块砖今天不碰任何图表和数据，只做一件事：把大屏的"壳"用 Vue3 重建——Vite 工程、SFC 单文件组件、三屏容器、scale 自适应壳。壳迁移完成的标准：浏览器打开后，三个屏幕容器按 Day 64 的布局正确摆放（内容

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发