技能介绍

要解决什么问题

画中后台原型最贵的不是布局，而是「不像真的」。手写 HTML 很容易偏离 Element UI 官方文档：自己拼 class 名、el-dialog 弹不出来、el-form 校验不生效、el-table 的 :data 塞了对象。演示时自己都清楚哪一步是假的。这个技能把交付物收敛成一条标准：双击就能看的单个 HTML 文件，组件标签与官方 2.11 文档一致，页面结构贴近真实后台。

它如何工作

CDN 与单文件 通过国内镜像引入 vue@2.6.14 与 element-ui@2.11.0，主源 staticfile 失败自动切 bootcdn / baomitu，全不可达时在页面上给明确提示而不是白屏。骨架用 el-container + 深色侧栏 + 面包屑 + 白色卡片，references/template.html 已含紧凑表格、金额千分位、el-tag 状态、确认弹窗、可编辑表带出单位、必填拦截发布等通用模式。
组件靠复制，不靠手写 references/components-cheatsheet.md 按基础、表单、数据、通知、导航五类组织 53 组可直接复制的片段。Message / MessageBox / Notification 是命令式组件，必须在 Vue 实例方法里调用，不能当标签用。
状态必须显式声明 所有 dialogVisible、form、tableData 都要在 new Vue({...}).data 里定义，否则 :visible.sync 和 v-model 都会静默失效。
复杂需求走 spec JSON 有 PRD 且是多页面系统时，先产出页面结构规格 JSON 并标明每页 covers 的需求编号，之后任何修改先改 JSON 再改 HTML。页面形态可选多文件、单文件或 location.hash 路由，开工前需逐条确认页面形态、覆盖范围、视觉密度、mock 数据来源。
交付前静态校验 references/validate-prototype.py 检查依赖引用是否合规、脚本顺序、状态声明、过滤器定义与质量红线，并支持金额加总验算。

适用边界与注意点

只面向 Element UI 2.x + Vue 2，不涉及 Vue 3 / Element Plus，也不做设计稿还原。
目标是「还原外观 + 可交互」的交互壳，不写真实业务逻辑；内网离线双击需自行把 theme-chalk/ 整棵树下载到本地 assets/，只放一个 index.css 会导致图标变方框。
用 PRD 验收样例数值属于严谨场景，可直接交付；用示意数据则不具备验收效力。
不叠加标注层时不需要读 collaboration-annotation.md；el-image / el-avatar / el-carousel 仍需要真实图片 URL。