从零开始，我带团队用 Vue.js 开发了一个真实的项目

引言：为什么选择 Vue.js？

去年，我们团队接到了一个新项目——为公司内部开发一套流程审批系统。起初，技术选型上我们有些犹豫：是继续使用熟悉的 jQuery+原生 JS？还是尝试一下主流的前端框架？最终，我们选择了 Vue.js。

做出这个决定并不是一时兴起。那会儿，React 的生态虽然更成熟，但学习曲线较陡；Angular 虽然强大，但显得有些“重”，不太适合我们这种中短期的小团队项目。而 Vue.js 折中得刚刚好：它足够轻量，又具备组件化、响应式这些现代开发的必要特性，文档友好，社区活跃，非常适合从零起步的技术团队。

这篇文章，我想结合这次真实项目的经历，聊聊作为一个“零基础”的前端开发者，或者刚接触 Vue.js 的同学，如何快速上手并完成一个实际项目的开发。

---

问题描述：从头开始的挑战

我们团队当时有四个人，前端只有两个人，都是后端转型过来的。没有人真正做过 Vue 项目，甚至对 MVVM 架构都只是“听说过”。

项目一开始我们就遇到了几个现实问题：

1. 知识储备不足：Vue 的生命周期、组件通信、数据绑定机制等核心概念都不清楚，直接照搬 HTML + JS 的写法肯定不行。
2. 项目结构混乱：没有明确的目录规划，代码写到哪算哪，维护成本高。
3. 协作效率低：多人开发时容易出现文件冲突、功能重复。
4. 浏览器兼容性考虑不周：IE 支持成了后期调试的大麻烦。

---

解决方案：从模仿到创新

第一步：搭建学习路线图（第一周）

我们先做了一件看似简单但非常关键的事——列出一个学习路线图：

• Vue 基础语法：模板语法、指令、计算属性、侦听器
• 组件化开发：组件定义、props、事件传递、slot 插槽
• Vue Router 和 Vuex：路由配置、状态管理
• 生态工具链：Vue CLI、ESLint、Prettier、Axios 等插件使用

每天下班前我们安排一小时“技术分享+代码 review”，轮流讲解今天学到的内容，并结合第二天要实现的功能进行示例演练。

这个环节后来成为我们团队的一个固定制度，大大提升了新人的成长速度。

---

第二步：建立统一的开发规范

为了避免后续代码风格混乱，我们做了几件事：

1. 项目初始化使用 Vue CLI

   vue create approval-system
   

   选择 Babel、Vue Router、Vuex、Linter/Formatter（ESLint with Prettier）。

2. 统一 IDE 设置 所有人使用 VS Code，并安装 Volar 插件（替代原来的 Vetur），确保 TypeScript 支持和代码提示一致。

3. Git 分支策略 使用 Git Flow：

   • main：生产环境分支
   • develop：开发主分支
   • 功能分支：feature/xxx

4. 代码风格统一 ESLint 配置如下（简化版）：

   module.exports = {
     root: true,
     env: {
       browser: true,
       es2021: true,
     },
     extends: [
       'eslint:recommended',
       'plugin:vue/vue3-recommended',
       'plugin:@typescript-eslint/recommended',
       'prettier',
     ],
     parserOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
     },
     rules: {
       // 自定义规则略
     },
   }
   

---

第三步：模块化拆分与组件设计

我们在设计页面结构时，一开始就注意组件划分：

以“请假申请”为例：

/src
├── components
│   ├── ApprovalForm.vue      // 审批表单组件
│   ├── ApprovalCard.vue      // 审批卡片列表项
│   └── StatusFilter.vue      // 状态筛选组件
├── views
│   ├── LeaveApply.vue        // 请假申请页
│   └── ApproveList.vue       // 审批列表页
└── store
    └── modules
        └── approval.js       // Vuex 模块

通过这种方式，每个页面只负责业务逻辑的组装，而具体 UI 功能由组件来承担，极大提高了复用率。

实际案例：表单项联动控制显示隐藏

在表单中，“是否需要加班补贴”勾选后才会显示对应的输入框，这类场景我们用了 computed + watch 来实现：

<template>
  <div>
    <label><input type="checkbox" v-model="needOvertime"> 是否需要加班补贴</label>
    <input v-if="showOvertimeInput" v-model="overtimeHours">
  </div>
</template>

<script>
export default {
  data() {
    return {
      needOvertime: false,
      overtimeHours: ''
    };
  },
  computed: {
    showOvertimeInput() {
      return this.needOvertime;
    }
  }
};
</script>

这样既简洁又能清晰表达逻辑关系。

---

第四步：状态管理和 API 调用优化

我们并没有一开始就引入 Vuex，而是等到多个组件需要共享数据的时候才引入。这避免了“为了用 Vuex 而用”的问题。

比如审批状态要在多个页面显示，这时候我们才将审批数据抽离成 Vuex 模块：

// store/modules/approval.js
const state = () => ({
  statusMap: {
    0: '待处理',
    1: '已通过',
    2: '已拒绝'
  }
});

const getters = {
  getStatusText(state) {
    return (code) => state.statusMap[code];
  }
};

export default {
  namespaced: true,
  state,
  getters
};

同时我们封装了 Axios 请求：

// utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 5000
});

service.interceptors.request.use(config => {
  // 添加 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, error => Promise.reject(error));

export default service;

之后所有的 API 接口都统一调用这个封装好的 request 函数。

---

第五步：性能优化 & 浏览器兼容性处理

随着功能越来越多，我们开始注意到一些性能问题，尤其是 IE11 上的表现。

性能优化方面：

1. 懒加载路由

   对非首页内容采用懒加载：

   const router = new VueRouter({
     routes: [
       { path: '/apply', name: 'Apply', component: () => import('../views/Apply.vue') }
     ]
   });
   

2. 代码分割打包

   在 vue.config.js 中配置 webpack 分包：

   module.exports = {
     configureWebpack: {
       optimization: {
         splitChunks: {
           chunks: 'all'
         }
       }
     }
   }
   

3. 减少不必要的 watch 和 computed

   后期我们发现某些组件因为频繁使用 watch 导致渲染卡顿，所以改用 computed 或者手动节流控制。

兼容性处理：

针对 IE11，我们做了两件事：

1. 添加 polyfill：

   安装依赖：

   npm install core-js regenerator-runtime --save
   

   main.js 中添加：

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   

2. 使用 Babel 将 ES6+ 降级为 ES5：

   修改 babel.config.js：

   module.exports = {
     presets: [
       ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]
     ]
   };
   

---

效果总结：项目上线后的收益与成长

项目总共开发了三个月，最后顺利上线，得到了用户的认可。几个显著的变化是：

• 开发效率提升：组件化后，新需求只需要组合已有组件即可快速实现
• 代码质量提高：通过严格的 linting 和 commit 规范，代码可读性大幅提升
• 团队协同顺畅：统一规范+良好的沟通机制让多人协作变得高效
• 用户体验良好：界面交互响应迅速，加载速度快，尤其懒加载带来了明显体验提升

更重要的是，两个“转行”的前端小伙伴也成长为可以独立负责模块开发的工程师了。

---

经验分享：给初学者的几点建议

如果你是一个 Vue.js 新手，或者是刚转前端的同学，以下几点可能是你避坑的关键：

1. 不要急于求成，打好基础

很多人一上来就学 Vuex、Vue Router，其实不如先把组件基础打好。理解 props、event、slots、computed、watch 是什么、什么时候该用哪个，比你会几个高级技巧更有用。

2. 学会看文档，而不是抄代码

Vue 的官方文档写得很棒，而且有很多例子。别光靠复制别人的代码片段解决问题。试着去理解背后的设计思想。

3. 写代码要有“目的性”，不是堆功能

有时候你会发现某个组件越来越复杂，可能就是没把功能抽象到位。学会拆解问题、合理划分组件边界是关键。

4. 多看别人写的代码（开源项目、团队协作）

GitHub 上有不少优秀的 Vue 项目源码，比如 Element Plus、VitePress、Vue Router 官方示例等。多阅读、多思考，比自己闷头写更能进步。

5. 工具也要重视：Chrome DevTools + Vue Devtools

这两个工具配合起来，能帮你快速定位响应式数据、组件树结构、API 调用耗时等问题。特别是 Vue Devtools，能看到组件间 props、events、state 的变化，极其方便。

---

结语：技术成长，从来都不是一个人的战斗

回顾整个项目过程，最让我感动的不是项目上线那一刻，而是我们几个原本不懂 Vue 的人，一点一点摸索，一起查资料、开调试、熬夜修复 bug，最终做出一个像样的产品。

我相信，只要你愿意动手，不怕踩坑，就能跨过“零基础”的门槛。Vue 只是一个开始，但一旦迈出了第一步，后面的路自然越走越宽。

希望这篇文章对你有所帮助，也欢迎留言交流你的学习经验或项目心得！

---

如果你也正在学习 Vue，不妨试试从一个小项目开始，哪怕是一个 todo list，也比空看文档更有收获。坚持下来，你一定会看到自己的成长。