前端入职新公司电脑配置

1.入职须知

1.打卡软件账户（叮叮，邮箱，企业，WeLink......）。

2.Git 仓库账号，配置 SSH 公钥，避免每次拉代码输密码，开通提代码权限。

3.需求缺陷管理：Jira / Tapd / 禅道 / 飞书项目：分配项目空间，可提需求、认领任务、提交bug、填写工时。

4.文档知识库：

语雀 / Confluence / 飞书文档：查看技术文档、接口文档、业务流程图、部署文档、开发规范

5.蓝湖 / Figma 设计稿查看权限

2. 搭建本地开发环境，跑通项目

1. 索要README、环境依赖文档、本地启动命令、接口地址、代理配置；
2. 安装统一版本 Node、pnpm/yarn、Git、VSCode 插件团队规范（ESLint、Prettier、Vetur/Volar、Stylelint）；
3. 拉取仓库，切换开发分支，解决依赖报错、sass、node-sass、端口占用、跨域代理问题，成功本地预览；
4. 熟悉打包命令：dev、build、build:test、lint 校验命令，理解打包产物。

3. 吃透代码规范与工程化约束

• ESLint + Prettier 强制规则、引号、分号、换行、组件命名；
• Git 提交规范：commit message 格式（feat/fix/docs/refactor）、分支命名规则（feature/xxx、hotfix/xxx）；
• 代码评审（MR/PR）流程：谁审核、提交流程、备注要求、自测要点；
• 目录命名、文件命名、CSS 命名规范（BEM/Scoped）、变量命名规则。

4. 整体架构 1 小时速读，画出脑图

1）技术栈先记死

Vue2 / Vue3 + VueRouter + Vuex/Pinia、Axios 请求封装、UI 组件库（Element Plus/Ant Design Vue/Vant）、构建工具（Vite/Webpack）、是否 TS、是否微前端 qiankun、是否 ECharts 可视化。

2）项目目录重点看

src ├── api 接口请求统一管理（重中之重） ├── components 公共组件、业务通用组件 ├── hooks/composables 封装逻辑（Vue3） ├── store 状态管理 ├── router 路由守卫、权限控制、动态路由 ├── utils 工具函数：防抖节流、日期格式化、金额处理、权限判断 ├── views 页面业务代码 ├── assets 静态资源 ├── directives 全局指令（权限v-permission等） └── layout 全局布局框架

3）底层通用能力快速过一遍

• 请求拦截器：统一加 token、错误统一弹窗、401 自动登出；
• 权限体系：按钮级权限、路由权限、角色控制；
• 全局混入 / 全局方法、全局弹窗、全局 Loading、异常捕获；
• 环境变量：开发 / 测试 / 生产三环境区分。

5.业务理解（前端最容易忽略的点）

1. 找产品 / 老同事要：业务流程图、原型图、数据库简单说明、字典项含义；
2. 梳理系统模块：菜单对应哪些页面，页面之间跳转逻辑，什么角色能看什么功能；
3. 重点记枚举字典、状态码、后端返回特殊规则（比如审核状态、单据类型），避免写死常量。

6.通读现有页面，模仿现有写法

1. 随便找 3 个成熟页面，逐行看：
   • 接口怎么调用、参数怎么传；
   • 表格搜索、分页、重置、导出通用封装；
   • 弹窗新增 / 编辑共用表单逻辑；
   • 表单校验规则统一写法；
2. 复刻一个简单页面：列表页 + 查询 + 分页，完全按照项目现有代码风格写一遍；
3. 弄懂公共组件怎么传参、插槽使用、二次封装 UI 库组件。

7. 主动承接低风险需求，快速走完整发布流程

优先认领这类任务，完整走一遍从开发到上线闭环：

• 简单字段新增、文案修改、按钮隐藏显示；
• 列表列调整、筛选条件增加、字典回显；
• 简单 ECharts 图表调整样式；
• Bug 修复（优先 UI 样式、兼容性小问题）

需求评审 → 本地开发 → 自测（浏览器兼容、边界值、异常接口）→ 提交代码 → MR 评审 → 测试环境部署 → 测试提 bug → 修复回归 → 生产发布 走完一轮，团队对你信任度直接拉满。

8.搞懂周边配套体系

1. 接口服务：Swagger/Postman、Mock 数据、联调规则、前后端约定字段；
2. 部署 & 运维：打包后 Nginx 部署路径、静态资源 CDN、环境变量配置；
3. 权限 & 登录：单点登录、token 存储位置、刷新 token 逻辑；
4. 微前端（如果有 qiankun）：主应用、子应用挂载、通信方式、路由隔离、样式隔离。

9.梳理项目技术债 & 优化点(等你过去试用期)

入职不要一上来大刀阔斧重构，可私下记录，合适时机温和提出：

• 重复逻辑未抽离 hooks / 工具类；
• 请求未做重复拦截、loading 重复控制；
• 大量硬编码常量未抽枚举；
• 打包体积过大、懒加载缺失；
• ESLint 规则松散，代码风格不统一。

10.团队协作工具熟练使用

• 项目管理：Jira/Tapd/ 飞书需求单，任务认领、工时填写、bug 提交规范；
• 沟通：前后端对接群，联调问题描述模板（接口地址、入参、返回、期望结果）；
• 文档：语雀 / Confluence 技术文档，补充自己学习笔记沉淀。

11.避坑提醒（新人高频踩坑）

1. 不要擅自修改公共组件、路由守卫、请求拦截底层代码；
2. 不要忽略 ESLint 校验就提交代码；
3. 不要硬编码接口地址、状态值，统一用枚举 / 常量文件；
4. 上线前一定要在测试环境完整回归一遍功能。

12.直接复制发给组长的一段话

组长您好，麻烦帮忙开通一下新人基础权限：

1. Git 仓库项目开发权限
2. Tapd/Jira 任务、Bug 提报权限
3. 语雀 / Confluence 文档查看权限
4. YApi/Swagger 接口平台账号
5. 测试环境 VPN 访问权限、测试环境前端发布权限
6. 蓝湖 / Figma 设计稿查看权限
7. 拉入项目相关所有沟通群，谢谢