前端项目面试分析

项目一：快决策（通用业务组件库）

• 技术栈： Vue 2/3, Webpack, Element UI
• 项目是干嘛的： 这是一个给内部运营和产品同学用的数据库可视化操作平台。他们不懂SQL，就用这个平台通过点击和拖拽来建表、改字段、查数据，像用Excel一样管理数据库。
• 我做的核心工作/难点：
  1. 从0到1理解业务： 最开始我也不懂数据库那些范式和关系，花了挺多时间和技术同学沟通，才把业务逻辑摸透，这样才能把数据库的概念转化成前端组件。
  2. 动态表格与JSON Schema： 最难的是表格的列是不固定的，用户随时能增删改。我们用JSON Schema来动态描述表格结构，再基于这个Schema去渲染整个表单和表格，这比写死要灵活太多。
  3. 实现Excel式的交互：
     • 拖拽排序： 用了SortableJS让用户能直接拖拽字段来调整顺序，还能锁定、隐藏某些字段，非常直观。
     • 撤销/重做 (Redo/Undo)： 模仿Excel，我们做了一个历史记录功能。每次用户对筛选条件进行操作，我们都会记录一个“快照”，这样就可以随意撤销和重做了。这里的关键是设计好操作指令的数据结构。
  4. Excel导入导出： 和后台同学配合，做了文件解析。用户上传一个Excel，我们能自动识别表头，匹配中英文，把数据灌进去，省去了手动创建的麻烦。
• 落地效果： 这个工具上线后，基本取代了之前靠提工单让工程师手动改库的操作，运营自己就能完成80%的日常数据配置工作，效率提升非常明显。我们也把它沉淀成了一个内部的组件库，很多类似的后台项目都能直接复用这些组件。

项目二：Vfu运动品牌（PC端内部平台）

• 技术栈： Vue, Element UI, ECharts, Webpack
• 项目是干嘛的： 这是公司的一个核心数据决策平台，用来生成各种销售报表、数据看板，非常复杂，累计有500多个页面。
• 我做的核心工作/难点：
  1. 大数据量性能优化（虚拟表格）： 最开始用Element的Table组件，数据一多（比如上万条）浏览器就直接卡死了。我研究后引入了虚拟滚动的方案，只渲染可视区域内的表格行，完美解决了卡顿问题，现在渲染几万条数据都很流畅。
  2. 权限系统： 设计了前端的RBAC权限模型，不同角色的人进来看到的数据和能操作的按钮都不一样，做到了页面和按钮级别的精细控制。
  3. 数据处理与可视化： 用ECharts做了很多复杂的图表，比如地图、日历图等。还用XLSX库深度处理Excel，实现了复杂格式的导入导出。
  4. 体验优化：
     • 图片优化： 全面推广WebP格式，图片体积比PNG小了差不多一半，为公司省了不少带宽成本。
     • 快捷键与截图粘贴： 做了一个好玩的功能，用户微信截图后（Ctrl+V）可以直接粘贴到系统里自动上传，这个体验非常好，同事们都很喜欢。
• 落地效果： 这个平台成了公司最核心的数据入口，老板和各级管理人员每天都会看。性能优化后体验丝滑，再也没人抱怨卡了。权限系统也保障了数据安全。

项目三：Mis上新系统（H5移动端）

• 技术栈： Vue, uniapp, 自研组件
• 项目是干嘛的： 这是面向消费者的移动端商城，是在APP里通过WebView打开的H5页面，要求体验接近原生APP。
• 我做的核心工作/难点：
  1. 移动端适配： 用了Viewport + Rem布局，特别处理了iPhone刘海屏和底部安全区的问题，保证了各种手机上显示都没问题。
  2. 极致体验优化：
     • 流畅的页面切换： 用Vue Router的过渡动画和Keep-Alive缓存页面，实现了类似原生APP那种左右滑动的跳转效果，没有一点白屏等待感。
     • 酷炫动画： 在一些重点页面（如活动页），用了GSAP这个动画库做了非常复杂的序列动画，吸引用户眼球。
  3. 长列表与瀑布流： 商品列表页用了瀑布流布局，结合我自己写的帧加载指令（用IntersectionObserver实现的）和骨架屏，边滑边加载，体验非常顺滑。
  4. 功能开发：
     • 验证码： 接了滑块验证码，防止机器刷单。
     • 模糊搜索： 用Fuse.js实现了拼音搜索、错别字纠错等功能，让用户搜东西更方便。
• 落地效果： 这个H5项目用户体验得到了业务方和用户的一致好评，特别是跳转动画和加载性能，几乎感觉不出是H5页面。里面很多技术方案（如长列表、验证码）也被其他项目组复用了。

项目四：通用业务组件库

• 技术栈： Vue 3, Vite, Tailwind CSS
• 项目是干嘛的： 因为做了那么多项目，发现很多组件重复造轮子，我就牵头为我们团队做了一个私有的组件库，发布到公司的NPM上。
• 我做的核心工作/难点：
  1. 现代化技术选型： 直接用最新的Vite + Vue3开发，打包速度飞快。用Tailwind CSS来写样式，效率很高。
  2. 开发核心组件： 我独立开发了大概10个通用组件，比如：
     • 动态表单组件： 通过配置JSON就能生成一个完整的表单。
     • 消息提示（Message）和确认框（Confirm）： 用Vue的render函数动态挂载到DOM上， anywhere, anytime 都能调用。
     • 帧加载指令和长列表组件： 把项目中验证好的方案抽象成通用组件。
  3. 文档建设： 用VitePress搭建了详细的文档站，每个组件都有示例代码和API说明，方便团队其他成员使用。
• 落地效果： 组件库大大提高了我们团队的开发效率，新项目开始直接引入，基础组件不用再写了。也保证了我们多个项目UI和交互的统一性。

---