前端路线

语义化标签
Flex/Grid布局
CSS变量
盒模型（标准 vs IE）
选择器优先级计算
居中方案：水平/垂直居中（含不定宽高场景）
伪类（:hover）
伪元素（::before）
响应式设计
无障碍访问（ARIA）
实现响应式电商首页（PC/移动端适配）
模块化（ES Module）
闭包
原型链
函数式编程
事件原理（冒泡、捕获、委托）
调用栈
内存管理
异步编程：Promise、async/await
事件循环（Event Loop）与宏任务/微任务。
数据类型
作用域（var/let/const）
类型转换
高阶函数
let/const
箭头函数
解构赋值
模板字符串
展开运算符
可选链（?.）
空值合并（??）
新数据结构：Set、Map、Symbol、WeakMap/WeakSet
React：
- Hooks体系（useState/useEffect）
- 状态管理（Redux Toolkit/Zustand）
- 服务端渲染（Next.js）及AI集成（如Vercel AI SDK）
- 核心语法：Hooks（useState、useEffect）、Redux Toolkit 状态管理、函数式编程。
- 实战场景：B站评论、美团外卖等业务功能开发，结合 TypeScript 实现类型约束。
Vue：
- Composition API、Pinia状态管理
- Nuxt.js服务端渲染
- 核心语法：响应式原理、组件化开发、生命周期、Vue Router 路由管理、Vuex/Pinia 状态管理。
原生小程序开发：微信登录/支付、地理位置服务、云函数集成。
跨端框架：Uni-App 多端开发、Taro、React Native。
鸿蒙开发：ArkTS 语法、ArkUI 组件、端云一体化、分布式应用。
实战能力：表单校验、文件上传、富文本编辑器、ECharts 数据可视化、Vant/ElementUI 组件库。
高级应用：微前端（qiankun）、3D 可视化（three.js）、移动端适配（postcss-px-to-viewport）。
构建工具：Vite（ESM+Rollup）快速冷启动
工具链：Webpack/Vite 配置优化、Babel 转译、代码分割、CDN 加速。
工程规范：ESLint + Prettier + Husky 代码规范、Git 分支管理与协作。
部署与监控：CI/CD（GitHub Actions）、Lighthouse 性能分析、Sentry 错误监控。
组件开发：Storybook文档驱动开发
后台管理系统（RBAC权限设计）
实时应用（WebSocket消息通知）
测试：单元测试（Jest）、E2E测试（Cypress AI插件）
性能优化：Lighthouse CI审计、代码分割、图片懒加载
关键指标：首屏加载优化（CRP 优化）、内存泄漏排查、长任务拆分。
安全防护：XSS/CSRF 防御、CSP 策略、输入转义。
CI/CD：GitHub Actions自动化部署
错误追踪：Sentry实时监控
代码风格：ESLint + Prettier
提交规范：Conventional Commits
Node.js基础
Express/Koa框架
RESTful API设计
MongoDB（NoSQL）
Supabase（PostgreSQL）
Serverless：AWS Lambda/Vercel云函数
GraphQL：Apollo Client数据管理
边缘计算：Vercel边缘网络部署
TypeScript：类型系统与框架集成
可视化：Three.js 3D渲染、D3.js数据图表
开源贡献（文档翻译/修复Issue）
技术博客输出（搭建Vitepress静态站点）
OpenAI API实现智能聊天机器人
TensorFlow.js浏览器端机器学习
跨端开发：React Native/鸿蒙ArkUI（一次开发多端部署）
阶段目标：博客（SSG）→ 后台系统 → 实时协作应用
作品集：Github仓库+Vercel在线预览
开发：VS Code + AI插件（Codeium）
协作：Figma AI生成UI设计稿
技术演讲（本地Meetup）、代码审查实践
典型场景实现
- 电商系统：商品列表、订单管理、权限控制（Vue + ElementUI）。
- 数据可视化：ECharts 图表（折线图、地图）、Three.js 3D 大屏。
- 即时通讯：WebSocket/Socket.IO、JWT 鉴权、消息实时推送。
全栈能力
- 后端协作：RESTful API 设计（Express + MongoDB）、Axios 封装与拦截器。
- 全栈项目：博客系统（前端 + Node.js 后端）、低代码平台搭建。
框架原理
- 深入 React/Vue 源码：虚拟 DOM、Diff 算法、Fiber 架构、依赖收集。
- 手写核心库：Promise、状态管理工具、简易 Virtual DOM。
架构设计
- 技术选型：CSR/SSR/SSG、微前端（模块联邦）、状态管理方案对比。
- 系统设计：领域驱动设计（DDD）、设计模式（观察者、策略模式）。
算法与基础: LeetCode 常见题型（数组、字符串、链表），掌握基础算法思想。
职业素养:技术分享与开源贡献、团队协作与 Code Review、产品思维与需求分析。

能力掌握

[ ] 能够使用 axios 实现 Ajax 操作，为后续项目课做好技术铺垫
[x] 能够运用 Git 管理前端项目，并且使用 Git 分支进行多人协同开发
[ ] 能够使用 Promise 与 async/await 高效的实现异步操作
[ ] 掌握Echarts 各类型数据可视化图表的应用
[ ] 能够根据需要求创建折线图、K线图、地图等图表
[ ] 掌握前后端分离技术的实现方式并了解其意义
[ ] 掌握使用token进行访问鉴权功能实现
[ ] 通过 Vue2 和 Vue3 的核心知识学习，掌握企业开发中常见业务功能实现
[ ] 通过深入 Vue 技术栈学习 vue-router vuex vant element-ui 等主流技术，掌握企业级项目开发方式，如移动端H5项目与PC端管理项目
[ ] 掌握 qiankun 微前端技术，具备重构巨石应用的能力，实现技术栈无关开发方式
[ ] 掌握 three.js web 3D技术，具备大屏3D可视化开发能力
[ ] 掌握 element-ui 组件库的运用
[ ] 掌握 axios 以及拦截器的应用
[ ] 掌握 Vuex 管理全局状态的技术解决方案
[ ] 熟练使用 vue-router 管理组件的切换展示
[ ] 掌握 element-ui 中如何自定义表单的校验规则
[ ] 掌握文件上传和富文本编辑器在 Vue 项目中的应用
[ ] 掌握 Vant 组件库的运用
[ ] 掌握使用 postcss-px-to-viewport 实现移动端适配
[ ] 能够独立运用 vue2 + vant 搭建H5应用能力，能够实现文章列表、频道管理、评论与回复、用户权限控制等特色业务。
[ ] 掌握原生小程序开发，能够独立完成原生小程序项目开发
[ ] 掌握 uni-app 多端框架，能够独立开发小程序和其他端的开发。
[ ] 使用vue-cli创建vue单页应用解决方案
[ ] 使用vue-router实现前端路由解决方案
[ ] 使用vue-vuex实现状态管理解决方案
[ ] 使用vant快速搭建移动界面解决方案
[ ] 使用json-bigint处理最大安全整数解决方案
[ ] 使用iconfont实现前端多色字体图标解决方案
[ ] 使用dayjs处理相对时间计算解决方案
[ ] 使用soket.io实现即时通讯解决方案使用postcss-px-to-viewport 实现移动端适配解决方案
[ ] 掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力
[ ] 具备角色、人员、权限类系统的设计整体设计及应用能力
[ ] 拥有Vue.js相关的技术要点及配套的插件，解决方案深度使用能力
[ ] 具备使用 qiankun 搭建微前端项目的能力
[ ] 具备使用 echarts、three.js 等图形工具，开发 2D、3D数据可视化平台能力
[ ] 掌握开发原生小程序项目能力
[ ] 掌握微信请求工具封装和使用
[ ] 掌握微信用户登录和登录状态检测解决方案
[ ] 掌握基于腾讯位置服务实现地理定位检索
[ ] 掌握基于微信二维码服务实现访客通行证
[ ] 能够开发跨平台的小程序
[ ] 能够独立开发小程序项目
[ ] 掌握微信登录的实现方式
[ ] 掌握微信支付的实现方式
[ ] 掌握鸿蒙ArkTS范式语⾔开发基础，使⽤ArkUI进⾏鸿蒙原⽣应⽤界⾯设计开发
[ ] 掌握鸿蒙ArkTS组件开发，组件封装，组件复⽤，组件传值，组件更新，State模型，事件处理，⽹络请求，原⽣能⼒应⽤能项⽬基础开发能⼒，掌握鸿蒙任务管理、线程管理、万能卡⽚、数据管理、分布式应⽤等，实现代码⼀次开发多端部署的能⼒
[ ] 能够掌握鸿蒙低代码开发，能够掌握云服务提供的独⽴⼊⼝、免安装等便捷服务
[ ] 掌握端云一体化工程概览、工程创建及配置、端云一体化组件集成、云函数开发及使用、云数据库开发和使用、一键式部署云工程的能力
[ ] 掌握 ArkTS 与 ArkUI 核心语法，搭建鸿蒙应用界面
[ ] 基于 http 模块封装 request 工具函数，实现网络管理
[ ] 基于 router 模块实现路由封装，实现访问权限控制
[ ] 掌握自定义组件封装，实现LoadingDialog、Skeleton、MiniCalendar等组件
[ ] 基于 ArkTS 接口查询设备，实现手机和平板适配
[ ] 通过 React + Hooks + Redux Toolkit 的学习，实现多种业务场景下的功能开发，如 B站评论、知乎频道管理、美团外卖、记账本等业务功能
[ ] 进军大厂必备，结合 TypeScript+Hooks 和函数式编程思想完成项目开发。
[ ] 高级前端工程师必备技能，真正实现一套代码多端运行，减少开发成本，提高开发效率。
[ ] 高级前端工程师必备技能，在项目开发中实现自动化、规范化、组件化、模块化。

问答题

理论

熟悉计算机组成原理，计算机网络以及操作系统的一系列知识。
熟悉常见的数据结构和算法，能够使用算法解决常见问题
熟悉 HTML，CSS，理解并掌握盒子模型，响应式布局，移动端兼容等问题
熟练使用JavaScript，理解原型，闭包，异步等概念
熟练使用 ES6+ 语法，熟悉常用设计模式
熟悉函数式编程，熟悉 TypeScript
熟练使用 vue 和 React 进行项目开发
了解 webpack 打包配置，减小打包后的体积，提高响应速度
熟悉 node.js + mongodb 搭建后台系统，能够高效和后端进行联调

实践

全栈网站: 基于 Next.js 平台开发的博客网站，实现了从前端到后端的全栈功能，通过使用 github API 实现了完整的功能。
自动化部署: 利用 Vercel 平台的自动化部署功能，确保代码的持续交付和网站的实时更新，提升用户体验和开发效率。
通用请求封装: 使用 Axios 对请求进行通用封装，统一管理数据获取，提高代码复用性，同时遵循最佳实践，确保数据请求的可维护性和稳定性。
遵循规范的代码规范和配置: 保证项目代码风格一致，易于维护。利用 GitHub Actions 实现文章的自动更新，将自动化集成到开发流程中，提升团队协作效率。
SEO 优化和服务端渲染: 利用 Next.js 的服务端渲染能力，提升网站的性能和搜索引擎优化。通过服务端渲染，网站能够更快地加载和展示内容，提升用户体验，同时有利于搜索引擎索引。

项目介绍

介绍	项目1	项目2	项目3
工作经历	杭州鱼互联网有限公司 2023-02 ~ 2023-04 移动端开发	2023-07 ~ 2023-07 前端开发
项目名称	小程序+网页+后台管理系统	中后台管理系统	导购店长小程序
项目描述		一个为零售行业提供技术支持的平台，本项目两套代码，Vue2框架和重构后的React框架的	为了提高导购和店长的工作效率，搭建一套工作流程小程序
个人职责	1.小程序功能优化，历史 bug 修复，封装公共业务组件，提高代码可维护性，使用图片压缩，对静态资源进行体积优化，提高响应速度 2.H5 网页开发，使用rem 兼容不同机型，使用 window API 修复 IOS 滑动问题，独立负责需求评审，开发联调，测试和发布上线 3.toB 中后台系统开发，熟练使用第三方库快速交付需求，封装公共逻辑和交互，使用注释和复杂逻辑解构提高代码的可维护性，独立负责多个复杂需求上线，并维护在线文档	1.参与了老项目功能的维护和扩展，使用了vue.directive来提取通用逻辑到自定义指令，熟悉了完整的开发流程规范 2.参与新项目的开发，在开发周期短的情况下，对老项目进行重构，独立负责了多个模块上线，跨团队沟通，协作；，熟练使用组件和框架的能力快速开发，封装通用业务组件，重构后的代码行数相比较旧项目减少了40%，提高了用户体验	1.优化历史功能，修改页面交互体验，修改历史数据显示异常现象，提高使用体验 2.新增自动化任务体系功能，使用状态管理库实现一套数据驱动多个层级组件视图更新 3.使用多种第三方库实现功能 - lodash.js（数据处理），qrcode.js （二维码生成），html2canvas（截图）等等

模板

前端路线 ​

能力掌握 ​

问答题 ​

理论 ​

实践 ​

项目介绍 ​

模板 ​

相关资料 ​

前端路线

能力掌握

问答题

理论

实践

项目介绍

模板

相关资料