用 Vue 重写公司官网首页的折腾记

公司官网是五年前的产物：jQuery + 一堆插件，加上历届前端在里面缝缝补补，index.html 三千多行，改一个轮播图要在四个地方找到相关代码。上个月老板要加个"新闻动态"板块，我看完代码决定不忍了，跟主管申请了两周时间用 Vue 重写。这篇文章记录当时的选择和过程。

为什么敢直接重写

官网这种页面逻辑其实很简单：轮播、导航吸顶、表单提交、新闻列表。复杂的是散乱的 DOM 操作，不是业务本身。jQuery 的问题是"状态"分散在每个回调函数里，比如导航高亮状态既存在 class 里，又被 scroll 事件改，还有定时器在动它。Vue 的核心收益就是把状态收拢到 data 里，DOM 变成状态的映射。

选型上没犹豫太久：不需要 SSR（官网没啥动态内容，SEO 靠 meta 就够），直接 vue-cli 起的单页应用，配上 ElementUI 的轮播和表单组件，自己手写的部分反而很少。

重写过程中的取舍

• 设计稿不变，纯功能等价重写，不做"顺手优化"，不然永远上不了线
• 老站每个交互都过一遍录屏，重写后逐条对照验收，防止漏功能
• 图片和文字内容全部抽到 json 里，市场部以后想改文案不用再发版——这是这次重写额外的红利
• 路由懒加载一开始就做了，虽然官网就四个页面，但首屏体积差了 200 多 KB

印象最深的是导航吸顶 + 联动高亮这个老站里最恶心的 300 行 jQuery，用 Vue 写完只有 40 行：一个 scrollY 的 data，一个 computed 算出当前激活的锚点，模板里一个 class 绑定。不是 Vue 有什么魔法，而是数据驱动这个思路天然逼着你把状态想清楚。

遗留问题

也不是没有代价。老站的 SEO 排名靠前的几个页面，切到 SPA 后收录掉了一阵子，后来把新闻详情页改成预渲染（prerender-spa-plugin）才慢慢恢复。另外 IE 靠兼容文案硬扛（那年还有不少 360 兼容模式用户），出了几例样式崩坏，都是 polyfill 没配全的锅。

总结一句：重写不是目的，把状态和视图的关系理顺才是。如果只是想换个新框架而业务没变化，jQuery 其实也能跑——但当你发现改一个小功能要在四个文件里跳来跳去时，就是该考虑收拢状态了。