前端开发真实工作流程

一、拿到项目第一步：先搞清楚 5 件事（别直接拉代码）

在动手之前，先问清楚 / 看清楚，避免白忙活：

1. 项目仓库地址（Git 地址）
2. 主分支名称（通常是main/master）
3. 开发规范（分支规则、提交格式）
4. 运行文档（README）：node 版本、启动命令、环境配置
5. 接口环境（测试服地址、是否需要抓包、是否需要登录态）

二、环境准备

确保你本地有这些工具：

1. VS Code（编辑器）
2. Node.js（必须和项目要求版本一致，建议 16+/18+）
3. Git（代码拉取 / 提交）
4. Chrome 浏览器（调试）

三、正式流程：从 Git 拉取 → 项目跑起来 → 开始开发

第 1 步：克隆项目到本地

git clone 项目Git地址

第 2 步：Git身份配置

# 设置个人Git信息 git config --global user.name "你的姓名" git config --global user.email "你的邮箱@company.com" # 验证配置 git config --list

第 3 步：查看 / 切换到最新主分支

git checkout main git pull

第 4 步：安装项目依赖（最关键）

npm install # 或者 yarn install # 或者 pnpm install

⚠️注意：用项目里别人用的包管理器，别混用。

第 5 步：启动项目

npm run dev # 或者 npm run serve

启动成功后，终端会出现：Local: http://localhost:xxxx

浏览器打开这个地址，能看到页面 = 项目跑通了。

四、项目跑起来后：必须先熟悉结构

src/ ├── api/ # 接口请求（你会经常用） ├── assets/ # 图片、样式 ├── components/ # 公共组件 ├── router/ # 路由（页面路径配置） ├── store/ # Pinia/Vuex 状态管理 ├── utils/ # 工具函数 ├── views/ # 所有页面（你主要写这里） App.vue main.js

你只要记住：

• 页面在 views
• 接口在 api
• 路径在 router

五、开发前必须做：创建自己的开发分支

永远不要在 main 分支写代码！

步骤：

# 1. 回到主分支并拉最新 git checkout main git pull # 2. 创建你的功能分支 git checkout -b 你的功能名字

示例：

# 删除个人开发分支 git checkout -b hotfix-0115 # 推送到远程仓库 git push -u origin hotfix-0115 # 删除个人开发分支 git branch -d hotfix-0115 # 删除远程仓库 git push origin --delete hotfix-0115

六、正式开始开发

1. 先看路由，找到你要开发的页面

打开：

router/index.js

找到 URL 对应的.vue文件。

2. 去 views 里找到页面，开始写

Vue 页面三部分：

<template> 页面结构 </template> <script> JS 逻辑、接口、数据 </script> <style> 样式 </style>

3. 对接后端接口（照着项目已有格式抄）

1. 去api/文件夹新建接口文件
2. 复制项目统一封装的 axios
3. 写请求方法
4. 在页面中引入调用

例子（公司里都这样写）：

import request from '@/utils/request' // 获取用户列表 export function getUserList(data) { return request({ url: '/user/list', method: 'post', data }) }

4. 把数据渲染到页面

在script中调用接口 → 把数据给template渲染。

5. 写样式、做交互

• 按照设计稿还原
• 使用项目已有的 class
• 使用 UI 库（Element Plus）

6. 本地自测

• 页面显示正常？
• 接口能请求成功？
• 按钮、表单、跳转正常？
• 控制台无报错？

自测通过 = 开发完成。

七、开发完成：提交代码流程

# 1. 查看修改了什么 git status # 2. 添加所有修改 git add . # 3. 提交（格式固定） git commit -m "feat: 完成用户列表页面" # 4. 推送到远程 git push origin feature/你的分支名

然后去 Git 平台提交PR/MR，等同事审核通过后合并。

八、你每天开发的标准循环（记住这个就够）

1. 拉最新主分支代码
2. 合并到自己分支
3. 写业务
4. 自测
5. 提交推送

命令：

git checkout main git pull git checkout feature/xxx git merge main # 写代码... git add . git commit -m "feat: xxx" git push

九、极简总结（你直接背这个）

1. git clone 拉项目
2. npm install 装依赖
3. 配置 .env 环境文件
4. npm run dev 启动
5. 创建功能分支
6. 找到 views 页面
7. 写页面 + 调接口
8. 自测
9. git 提交推送