从传统行业转行后，我靠 Vue.js 拿到了第一份前端 Offer

大家好，我是阿哲，30岁，去年刚从制造业供应链管理转行做前端开发。坐标深圳，现在在一家做 SaaS 的小厂打工，办公室楼下就是腾讯滨海大厦——每天看着鹅厂的班车路过，心里默默羡慕，但转头又得改产品经理凌晨三点发来的“再加个动画效果”需求。

其实半年前，我对“Vue 是什么”都一脸懵。简历上还写着“精通 Excel 宏和 SAP MM 模块”，结果面试官问：“你用过 React 吗？”我只能尴尬地笑笑：“React……是那个 Facebook 的框架吗？我只在知乎上看过。”那场面，至今想起来脚趾抠地。

但没办法，想留在深圳，就得卷。尤其是最近 AI 这么火，连我们公司老板都在晨会上说：“我们要搞 AI+低代码平台！”于是，我被安排去学 Vue.js，配合后端同事用 Spring Boot 搭个管理后台。说是“配合”，其实就是我一个人从前端干到部署（运维大哥说他忙，让我先自己弄）。

今天这篇文章，就记录下我这个“老转新”程序员零基础学 Vue 的血泪史。不为别的，就希望像我一样的兄弟姐妹少走点弯路——毕竟，谁也不想在 deadline 前夜对着浏览器 console 里一堆红色报错怀疑人生。

---

为什么选 Vue 而不是 React？

说实话，一开始我也犹豫过。毕竟大厂都在用 React，简历上写“React 项目经验”看起来更香。但现实很骨感：我白天上班，晚上还要带娃，能挤出来的时间有限。而 Vue 的学习曲线，真的比 React 友好多了。

• 模板语法直观：{{ message }} 直接插值，不像 JSX 那样要写一堆括号和 return。
• 官方文档超友好：中文文档写得跟教科书一样，连我这种非科班都能看懂。
• 工具链开箱即用：vue create 一键生成项目，不用像 React 那样手动配 webpack、babel。

更重要的是，我们公司后端是 Java 技术栈，Spring Boot + MyBatis 是标配。他们对前端没太多要求，只要能跑起来、别崩就行。Vue 的单文件组件（.vue）结构清晰，HTML、CSS、JS 写在一起，后端同事偶尔帮忙改个页面也能快速上手——这在跨部门协作时简直是救命稻草。

---

第一个 Vue 项目：从 “Hello World” 到崩溃

我照着官网教程，三分钟就跑起了 Hello Vue!。正得意呢，产品经理来了：“能不能加个表格，支持分页、搜索、导出 Excel？”

我：？？？

于是，我开始折腾 Element Plus（一个基于 Vue 3 的 UI 组件库）。装依赖、引入组件、写数据绑定……一切看似顺利，直到我点击“导出”按钮，浏览器直接卡死。

报错信息：

RangeError: Maximum call stack size exceeded

当时真的想砸电脑。后来才发现，我在导出逻辑里不小心把整个响应式对象传给了 Excel 插件，导致无限递归。最后用 JSON.parse(JSON.stringify(data)) 深拷贝一下才解决——虽然这方法不优雅，但 deadline 面前，能跑就行。

这段经历让我明白：Vue 的响应式系统虽好，但别乱传对象，尤其给第三方库的时候。

---

和 Spring Boot 联调：跨域问题差点让我放弃

后端同事用 Spring Boot 写了个 API，返回用户列表。我本地启动 Vue 项目（localhost:5173），调用他的接口（localhost:8080/api/users），结果浏览器直接拦截：

Access to fetch at 'http://localhost:8080/api/users' from origin 'http://localhost:5173' has been blocked by CORS policy.

跨域！我立刻想起以前面试被问过这个问题，但真遇到还是懵。查了一堆资料，最后在 vite.config.js 里加了个代理配置：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

这样，前端请求 /api/users，Vite 开发服务器会自动转发到 Spring Boot 的 8080 端口，完美绕过跨域。上线时，Nginx 再配个反向代理就行。

小贴士：别指望后端同事主动加 CORS 头，他们总说“你前端自己处理”。但其实，开发阶段用代理是最省事的。

---

Vue 3 + Composition API：真香，但别被 setup() 吓到

刚开始我用的是 Vue 2 的 Options API，data、methods、computed 分开写。但新项目要求用 Vue 3，于是我硬着头皮学 setup()。

一开始觉得反人类：变量要 ref 或 reactive 包一层，函数要 return 出来才能在模板用。但用熟了发现，逻辑复用太方便了！

比如，我写了个 useTable 的组合函数，封装分页、搜索、加载状态：

// composables/useTable.js
import { ref, reactive } from 'vue'

export function useTable(fetchFn) {
  const loading = ref(false)
  const tableData = ref([])
  const pagination = reactive({
    page: 1,
    size: 10,
    total: 0
  })

  const fetchData = async () => {
    loading.value = true
    try {
      const res = await fetchFn(pagination)
      tableData.value = res.data
      pagination.total = res.total
    } finally {
      loading.value = false
    }
  }

  return {
    loading,
    tableData,
    pagination,
    fetchData
  }
}

然后在组件里直接用：

<script setup>
import { onMounted } from 'vue'
import { useTable } from '@/composables/useTable'
import { getUserList } from '@/api/user'

const { loading, tableData, pagination, fetchData } = useTable(getUserList)

onMounted(() => {
  fetchData()
})
</script>

代码清爽多了，而且以后其他表格页面直接复用，不用复制粘贴。这玩意儿，比 React 的 Hook 还直观（别打我，React 粉）。

---

性能优化：别让首页加载 10 秒

项目上线前，测试同学吐槽：“你们这页面打开要 10 秒，用户早跑了！” 我一看，打包后的 vendor.js 居然 3MB！

赶紧用 Vite 的 rollupOptions 做代码分割，再配合路由懒加载：

// router/index.js
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue') // 懒加载
  }
]

同时，把 Element Plus 按需引入，而不是全量导入：

// main.js
import { ElTable, ElPagination, ElButton } from 'element-plus'
app.use(ElTable)
app.use(ElPagination)
app.use(ElButton)

最后，用 vite-plugin-compression 开启 Gzip 压缩。上线后，首屏加载时间从 10 秒降到 2 秒，老板终于露出了满意的笑容。

---

给转行朋友的建议：Vue 是你的跳板

回头看，Vue 对我这样的转行者太友好了。它没有 React 那么多概念（Fiber、Reconciliation、Context 优化），也不像 Angular 那样重型。学完基础，配合一个 UI 库，就能做出像样的项目，往简历上一放，面试机会立马多了。

我现在简历上写着：“基于 Vue 3 + Spring Boot 开发企业级管理后台，支持动态表单、数据可视化、权限控制”。虽然技术栈不算顶尖，但至少证明我能干活。

如果你也和我一样，30 岁左右，想从传统行业突围，别怕。Vue 就是那根救命稻草。先做出一个能跑的项目，再慢慢深入原理。等你熟悉了组件化、响应式、状态管理，再去看 React，会发现很多思想是相通的——到时候，你就有底气在简历上写“熟悉主流前端框架”了。

---

最后：别信“AI 会取代程序员”

上周五晚上，我又在加班改 bug。Claude 帮我 debug 了一个响应式丢失的问题，ChatGPT 给我生成了导出 Excel 的代码。但最终，是我在理解业务逻辑、判断用户体验、和后端沟通接口细节。

AI 是工具，不是替代品。尤其是在深圳这种地方，能解决问题的人，永远有饭吃。

所以，别焦虑。打开终端，敲下 npm create vue@latest，你的第一行 Vue 代码，可能就是改变人生的开始。

共勉。