前端八股文面经大全：中科星图前端日常实习（2026-04-29）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的"增删改查"岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

面经原文内容

📍面试公司：中科星图

🕐面试时间：2026年4月29日

💻面试岗位：前端日常实习

❓面试问题：

自我介绍
刚才你介绍就是在学校也学习了这个前端三件套，那你能介绍一下对于Vue3你的一个理解和学习的情况吗
那你了解这个ts和js它有什么不一样吗？你使用过ts吗，还是用js更多
vue3组件通信的主要形式（回答了父子props，Pinia，事件总线）
你的项目有对接实际接口吗，前后端联调一般是什么样的过程，会出现什么问题，出现问题怎么解决？（说了axios发起请求那一套）
RAG医疗系统项目的智能体UI交互机制具体怎么做的
你现在常用的编程工具主要有哪几种，介绍使用体验（trae,cursor,codex）
你了解AI工作流吗（回答了问题重写，子查询拆分，检索生成，MCP，skills那一套）

场景题（回答的不好）

我们现在这个视频面试的这个页面，如果你拿到这样的一个设计图，你要实现这个咱们目前视频这个会议上展示这种效果，你是一个什么样的一个实现思路？
那比如说我们具体要实现这个布局，你会采用哪种CSS写法来实现这个布局？
那比如说我们最底部相当于左边有一个视频，有一个这个说话的这个话筒，这个然后中间是一些功能，比如说共享参加会议，然后有最右边是一个离开会议，那我要实现这样一个布局，你用CSS 要怎么实现？
那比如说有这个需求，目前就是说给你了，就比如说让你做这个底部中间这个功能，让你实现这个页面，那你比如说你现在说可能有些CSS不是说太深入掌握的，那你怎么解决这种情况？（因为上面被拷打的有点晕，实在不知道这个应该怎么实现，然后我说的是问AI查资料）
那比如说你要拿到这个需求，你去问AI的话，你的提示词，你比如说现在你就需要你来问这个AI了，你的提示词是什么？
那比如说咱们底部这个，就这个需求你自己要问他的时候，你会怎么组织语言，把这个需求描述给他？

反问

面试评价：基础知识和AI掌握的还行，CSS欠缺一些

来源：牛客网 FreedomChaser

💡 木木有话说（刷前先看）

五一面经明显少了很多哈哈哈，大家都在过节。中科星图山东地区是子公司和研究院。待遇算不错的。收录一下吧

📝 中科星图前端日常实习·深度解析

🎯 面试整体画像

维度	特征
面试风格	基础考察型 + 场景实战型 + AI协作考察型
难度评级	⭐⭐⭐（三星，CSS场景题较细）
考察重心	Vue3基础、TS/JS差异、项目联调、AI工具使用、CSS布局实战
特殊之处	后场连续CSS场景题，并追问"如何向AI描述需求"

🔍 逐题深度解析

四、Vue3组件通信的主要形式

回答思路：用户回答"父子props、Pinia、事件总线"，基本正确，可补充更多。

方式	适用场景
`props` / `emit`	父子组件直接通信
`provide` / `inject`	跨多级组件（祖先→后代）
`Pinia` / `Vuex`	全局状态管理
`eventBus`（mitt）	任意组件通信（不推荐大型项目）
`ref` / `$parent`	父组件调用子组件方法
`slot`	父组件向子组件传递模板

五、前后端联调过程与问题解决

回答思路：用户回答"axios发起请求那一套"，可补充完整流程。

联调流程：

约定API文档（请求/响应格式、状态码）
前端Mock数据并行开发
后端部署测试环境，前端切换真实接口
调试：浏览器Network查看请求/响应，定位问题

常见问题与解决：

问题	排查方向
请求404	检查URL、代理配置
跨域CORS	后端配置`Access-Control-Allow-Origin`
参数格式错误	Content-Type、数据格式（JSON/form-data）
状态码401/403	token过期、权限不足
响应数据异常	后端接口逻辑错误

九~十四：视频会议页面CSS布局场景题

9. 拿到设计图的实现思路

分析布局：整体结构（上/中/下三栏？）、响应式断点
拆解组件：视频网格、底部工具栏、参与者列表
确定技术方案：Flex/Grid、CSS变量主题
编写代码：先整体结构，再细节样式
测试适配：不同分辨率、不同浏览器

10. 采用哪种CSS写法实现布局

整体用Flex 布局（flex-direction: column）
视频网格用Grid （grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))）
底部工具栏用Flex居中布局

11. 底部工具栏具体CSS实现

css 复制代码

/* 底部工具栏 - Flex三点式布局 */
.bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;  /* 左右两端对齐 */
  align-items: center;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.left-section {
  display: flex;
  gap: 16px;
} /* 左侧：视频、话筒 */

.center-section {
  display: flex;
  gap: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} /* 中间：共享、会议等，绝对定位居中 */

.right-section {
  display: flex;
  gap: 16px;
} /* 右侧：离开会议 */

/* 或者更简洁的方案：三个区块都用flex，中间用margin: auto */
.alternative-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.center-section {
  margin: 0 auto;  /* 中间区域自动居中 */
}

12. CSS不熟怎么办 + 13/14. 如何向AI描述需求

正确的AI提示词示例：

复制代码

我需要实现一个视频会议界面的底部工具栏，具体要求如下：

布局结构：
- 底部工具栏固定在整个页面底部
- 左侧有"视频"和"话筒"两个按钮
- 中间有"共享屏幕"和"参加会议"两个按钮，需要水平居中
- 右侧有"离开会议"按钮

样式要求：
- 背景半透明黑色，带毛玻璃效果
- 按钮之间间距16px
- 移动端适配：按钮大小48x48

请使用HTML + CSS + 必要的JS占位，给出完整代码。

关键技巧：

明确布局结构（左右中三区）
给出具体视觉要求（间距、大小）
说明居中方式
可附上手绘示意图

反问：面试评价

面试官评价：基础知识和AI掌握的还行，CSS欠缺一些。

用户反思："没怎么手敲过代码，全vibe coding了，代码手写能力巨差......"

核心问题 ：过度依赖AI生成CSS，没有真正理解Flex/Grid的底层原理 和常见的布局模式。面试官通过连续6道CSS场景题，就是看你能不能脱离AI手写布局。

📚 知识点速查表

知识点	核心要点
Vue3组件通信	props/emit、provide/inject、Pinia、事件总线、ref、slot
前后端联调	API约定、Mock、跨域CORS、401/403处理
CSS布局思路	分析结构→拆解组件→选Flex/Grid→响应式
底部工具栏	Flex三点式（space-between）或绝对定位居中
AI提示词	明确结构、样式、间距、居中方式、输出格式
面试反馈	基础OK，CSS手写弱 → 需加强实战

📌 最后一句：

中科星图这场面试，是一面"AI时代基础能力的镜子"。用户能用Cursor生成代码，也了解MCP/Skills这些AI工作流，但遇到CSS具体实现时却手足无措。这揭示了一个真相：AI可以帮你写代码，但不能替代你对布局原理、三栏模型、Flex对齐的理解 。面试官最后评价"CSS欠缺一些"，恰恰是对所有"vibe coding"依赖者的提醒------工具越强，基础越不能丢。AI是加速器，但驾驶技术的核心，永远在你手里。