Axis笔记

外观

3.1 组件替换

约 660 字

前端改版

本页对应「三、操作步骤」的 3.1，把一个旧组件替换为新组件并保持对外接口不变，先在单个页面验证，再逐步扩大引用范围。返回上级：前端交互改版。

前置条件

  • 已拉出改版分支，工作区干净，构建命令在本地可正常执行。
  • 已统计旧组件的引用位置，知道它被哪些页面使用、接受哪些参数。
  • 新组件的接口（props、事件、插槽）已确定，能与旧组件一一对应。

操作步骤

  1. 统计旧组件引用，确认替换范围与页面清单：
cd /srv/axis/src
grep -rn "OldCard" --include=*.vue --include=*.js . | tee /tmp/old-card-refs.txt
wc -l /tmp/old-card-refs.txt
  1. 新建组件目录与文件，保持 props 名称与旧组件一致，减少调用方改动：
mkdir -p /srv/axis/src/components/card
cat > /srv/axis/src/components/card/NoteCard.vue <<'EOF'
<template>
  <article class="note-card">
    <h3><a :href="link">{{ title }}</a></h3>
    <p v-if="summary">{{ summary }}</p>
  </article>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
  link: { type: String, required: true },
  summary: { type: String, default: "" }
})
</script>
EOF
  1. 先在一个页面替换并构建，确认产物中不再包含旧组件的样式片段：
grep -rln "OldCard" /srv/axis/src/pages | head -n 1
node build.js --out=/srv/axis/dist-preview
grep -c "old-card" /srv/axis/dist-preview/assets/*.css || true
  1. 批量替换其余引用，逐处确认参数传递完整，再统一构建：
grep -rl "OldCard" --include=*.vue /srv/axis/src | while read -r f; do
  sed -i 's/OldCard/NoteCard/g' "$f"
done
grep -rn "OldCard" /srv/axis/src | wc -l

结果确认

  • grep -rn "OldCard" 计数为 0，旧组件已无引用。
  • 新组件在每个页面的显示与旧版一致，标题、摘要与链接完整。
  • 构建成功，控制台没有组件未注册或属性缺失的警告。
  • 产物 CSS 中不再出现旧组件的类名，避免样式双份加载。

注意事项

  • 替换前先删旧组件的样式与注册，避免两套样式同时存在导致覆盖顺序不确定。
  • props 改名必须同步改调用方，遗漏会静默取到 undefined，页面表现为空白。
  • 保留一次小范围提交记录，批量替换出错时可只回退该提交。
  • 删除旧组件文件前先全文搜索一次，包含注释与动态引入的写法，grep 之外再确认构建产物没有报错。
  • 组件的可访问性属性要一并迁移，按钮的 aria 标签与键盘焦点顺序容易在替换中被丢掉。
  • 替换完成后用旧版截图逐一对照，像素级差异不要求一致，但信息层级与交互位置不能变。