2026前端开发资源整理大全：从基础学习到工程化实战的完整导航

前端开发资源整理大全（收藏版）

[1. 前端学习总路线](#1. 前端学习总路线)
[2. HTML / CSS / JavaScript 基础资源](#2. HTML / CSS / JavaScript 基础资源)
[3. TypeScript 资源](#3. TypeScript 资源)
[4. 主流框架资源：Vue / React / Angular / Svelte](#4. 主流框架资源：Vue / React / Angular / Svelte)
[5. UI 组件库与设计系统](#5. UI 组件库与设计系统)
[6. CSS 工程化与样式方案](#6. CSS 工程化与样式方案)
[7. 构建工具与脚手架](#7. 构建工具与脚手架)
[8. Node.js、包管理器与运行环境](#8. Node.js、包管理器与运行环境)
[9. 路由、状态管理、请求与数据处理](#9. 路由、状态管理、请求与数据处理)
[10. 图表、可视化与大屏开发](#10. 图表、可视化与大屏开发)
[11. 动画、交互与特效](#11. 动画、交互与特效)
[12. 测试、代码质量与规范](#12. 测试、代码质量与规范)
[13. 调试、性能优化与兼容性](#13. 调试、性能优化与兼容性)
[14. 移动端、响应式与跨端开发](#14. 移动端、响应式与跨端开发)
[15. 部署、服务器、CI/CD 与 DevOps](#15. 部署、服务器、CI/CD 与 DevOps)
[16. 安全、可访问性与 SEO](#16. 安全、可访问性与 SEO)
[17. 图标、图片、字体、素材与设计工具](#17. 图标、图片、字体、素材与设计工具)
[18. API、Mock、接口调试与后端协作](#18. API、Mock、接口调试与后端协作)
[19. AI 编程与效率工具](#19. AI 编程与效率工具)
[20. 面试刷题、算法与项目作品](#20. 面试刷题、算法与项目作品)
[21. 前端资讯、社区与博客](#21. 前端资讯、社区与博客)
[22. 推荐学习顺序](#22. 推荐学习顺序)
[23. 项目实战方向推荐](#23. 项目实战方向推荐)
[24. 前端资源速查表](#24. 前端资源速查表)

1. 前端学习总路线

1.1 初级阶段：能写页面、能理解基础交互

学习模块	需要掌握	推荐资源
HTML	标签语义化、表单、SEO 基础、无障碍基础	MDN HTML
CSS	盒模型、选择器、布局、Flex、Grid、定位、动画	MDN CSS
JavaScript	变量、函数、数组对象、DOM、事件、异步、ES6+	MDN JavaScript
浏览器基础	DOM、BOM、事件循环、渲染流程、缓存	MDN Web API
Git	分支、提交、合并、回滚、远程仓库	Git 官方文档

1.2 中级阶段：能做项目、能封装组件、能处理工程问题

学习模块	需要掌握	推荐资源
框架	Vue / React 至少精通一个	Vue 官方文档、React 官方文档
TypeScript	类型声明、泛型、接口、类型收窄、工具类型	TypeScript 文档
工程化	Vite、Webpack、ESLint、Prettier、环境变量	Vite 文档、Webpack 文档
请求封装	Axios、Fetch、拦截器、错误处理、Token 刷新	Axios 文档、Fetch API
状态管理	Pinia、Redux Toolkit、Zustand	Pinia、Redux Toolkit、Zustand

1.3 高级阶段：能做架构、能优化性能、能带项目

学习模块	需要掌握	推荐资源
前端架构	模块化、组件设计、权限系统、微前端、Monorepo	Nx、Turborepo
性能优化	首屏优化、懒加载、缓存、代码分割、Core Web Vitals	web.dev Performance
自动化测试	单元测试、组件测试、E2E 测试	Vitest、Playwright
部署运维	Nginx、Docker、CI/CD、CDN、HTTPS	Nginx 文档、Docker 文档
安全	XSS、CSRF、CSP、依赖安全、接口鉴权	OWASP Web Security Testing Guide

2. HTML / CSS / JavaScript 基础资源

2.1 官方基础文档

资源	链接	用途
MDN Web Docs 中文	打开	前端最重要的基础文档，HTML、CSS、JS、Web API 都要查
MDN Learn Web Development	打开	系统学习 Web 开发
HTML 标准	打开	HTML 标准规范
CSS 规范入口	打开	CSS 标准与规范
JavaScript 规范 ECMA-262	打开	JS 语言标准
Can I use	打开	查询浏览器兼容性
web.dev	打开	Google Web 开发实践、性能、PWA、SEO

2.2 HTML 必学知识

知识点	学习重点	推荐链接
语义化标签	header、nav、main、section、article、aside、footer	MDN HTML 元素
表单	input、select、textarea、校验、可访问性	MDN Web Forms
图片与媒体	img、picture、video、audio、响应式图片	MDN Responsive images
SEO 基础	title、meta、结构化数据、语义化	Google SEO Starter Guide
可访问性	alt、label、aria、键盘导航	MDN Accessibility

2.3 CSS 必学知识

知识点	学习重点	推荐链接
盒模型	content、padding、border、margin、box-sizing	MDN Box model
Flex 布局	主轴、交叉轴、justify-content、align-items	MDN Flexbox
Grid 布局	grid-template、fr、gap、区域布局	MDN Grid
定位	static、relative、absolute、fixed、sticky	MDN position
动画	transition、animation、transform、keyframes	MDN CSS animations
响应式	media query、rem、vw、clamp、容器查询	MDN Media Queries
CSS 变量	--var、var()、主题切换	MDN CSS custom properties

2.4 JavaScript 必学知识

知识点	学习重点	推荐链接
ES6+	let/const、箭头函数、解构、模板字符串、模块化	MDN JavaScript Guide
原型与继承	prototype、原型链、class、extends	MDN Inheritance and prototype chain
异步编程	Promise、async/await、事件循环	MDN Promise
DOM 操作	querySelector、事件监听、节点操作	MDN DOM
Web API	Fetch、Storage、History、Worker、Canvas	MDN Web APIs
模块化	ES Modules、CommonJS、动态导入	MDN JavaScript modules
正则表达式	匹配、捕获、替换、校验	MDN Regular expressions

3. TypeScript 资源

3.1 官方与入门资源

资源	链接	用途
TypeScript 官方文档	打开	TS 权威文档
TypeScript Handbook	打开	系统学习类型系统
TypeScript Playground	打开	在线测试 TS 代码
TypeScript 中文网	打开	中文学习资料
Type Challenges	打开	TS 类型体操练习
tsconfig 参考	打开	tsconfig 配置速查

3.2 TS 项目中重点掌握

知识点	说明
基础类型	string、number、boolean、array、tuple、enum、unknown、never
interface 与 type	组件 props、接口返回值、对象结构建模
泛型	封装请求、表格组件、表单组件时非常常用
联合类型	状态值、接口枚举、组件变体
类型收窄	typeof、in、instanceof、自定义类型守卫
工具类型	Partial、Pick、Omit、Record、ReturnType、Parameters
声明文件	`.d.ts`、第三方库类型补充
Vue/React TS	defineProps、defineEmits、React.FC、事件类型、组件类型

4. 主流框架资源：Vue / React / Angular / Svelte

4.1 Vue 生态

资源	链接	用途
Vue 官方中文文档	打开	Vue 3 必看
Vue Router	打开	Vue 路由
Pinia	打开	Vue 状态管理
VueUse	打开	Vue 组合式工具函数库
Nuxt	打开	Vue 服务端渲染 / 全栈框架
Vue Devtools	打开	Vue 调试工具
Awesome Vue	打开	Vue 生态资源大全

4.2 React 生态

资源	链接	用途
React 官方文档	打开	React 新文档
React 中文文档	打开	React 中文学习
React Router	打开	React 路由
Redux Toolkit	打开	Redux 官方推荐写法
Zustand	打开	轻量状态管理
Next.js	打开	React SSR / SSG / 全栈框架
Remix	打开	React 全栈框架
TanStack Query	打开	服务端状态、请求缓存
Awesome React	打开	React 生态资源大全

4.3 Angular / Svelte / Solid

资源	链接	用途
Angular	打开	企业级前端框架
RxJS	打开	Angular 常用响应式编程库
Svelte	打开	编译型前端框架
SvelteKit	打开	Svelte 应用框架
SolidJS	打开	细粒度响应式框架
Qwik	打开	面向性能优化的框架

4.4 框架选择建议

场景	推荐
国内后台管理系统	Vue 3 + TypeScript + Vite + Element Plus / Ant Design Vue
国际化产品、复杂交互、生态广	React + TypeScript + Next.js
大型企业项目、规范强	Angular
内容站、官网、SEO	Next.js / Nuxt / Astro
高性能静态站	Astro / SvelteKit
快速中小项目	Vue 3 + Vite / React + Vite

5. UI 组件库与设计系统

5.1 Vue UI 组件库

资源	链接	特点
Element Plus	打开	Vue 3 常用后台管理系统组件库
Ant Design Vue	打开	Ant Design 风格 Vue 实现
Naive UI	打开	Vue 3 组件库，TS 支持好
Vant	打开	移动端 Vue 组件库
Arco Design Vue	打开	字节系设计风格
Varlet	打开	Material 风格移动端组件库
TDesign Vue Next	打开	腾讯设计体系

5.2 React UI 组件库

资源	链接	特点
Ant Design	打开	React 后台管理系统常用
Material UI	打开	Material Design 生态成熟
Chakra UI	打开	简洁、易定制
Mantine	打开	组件丰富，Hooks 实用
Arco Design React	打开	字节系设计
TDesign React	打开	腾讯设计体系
shadcn/ui	打开	Tailwind + Radix，适合现代 React 项目
Radix UI	打开	无样式可访问性组件基础库

5.3 跨框架 / CSS 类组件

资源	链接	特点
Tailwind UI	打开	Tailwind 官方高级组件模板
DaisyUI	打开	Tailwind CSS 组件类
Flowbite	打开	Tailwind 组件库
Bootstrap	打开	老牌 CSS 框架
Bulma	打开	轻量 CSS 框架
UnoCSS	打开	原子化 CSS 引擎

6. CSS 工程化与样式方案

资源	链接	用途
Sass	打开	CSS 预处理器
Less	打开	CSS 预处理器
PostCSS	打开	CSS 转换工具生态
Tailwind CSS	打开	原子化 CSS
UnoCSS	打开	即时原子化 CSS
CSS Modules	打开	局部作用域样式
Styled Components	打开	CSS-in-JS
Emotion	打开	CSS-in-JS
Stylelint	打开	CSS 代码规范检查
Autoprefixer	打开	自动补齐浏览器前缀

6.1 样式方案怎么选

项目类型	推荐方案
普通 Vue 后台	SCSS / Less + Element Plus
普通 React 后台	Less / CSS Modules + Ant Design
现代官网 / 营销页	Tailwind CSS
组件库开发	CSS Modules / SCSS / Vanilla Extract
大型主题系统	CSS Variables + Token 设计
高度自定义设计	Tailwind CSS + Headless UI / Radix UI

7. 构建工具与脚手架

资源	链接	用途
Vite	打开	现代前端构建工具，开发体验好
Webpack	打开	老牌打包工具，企业项目常见
Rollup	打开	库打包常用
esbuild	打开	极速 JS/TS 打包器
SWC	打开	Rust 写的编译工具
Babel	打开	JS 编译转换
Rspack	打开	Rust 写的 Webpack 兼容构建工具
Rsbuild	打开	基于 Rspack 的构建框架
Parcel	打开	零配置构建工具
Create Vite	打开	快速创建 Vite 项目
Create React App	打开	传统 React 脚手架，不建议新项目优先选择
Vue CLI	打开	Vue 2 / 老项目常见

7.1 常用命令示例

bash 复制代码

# 创建 Vite + Vue 项目
npm create vite@latest my-vue-app

# 创建 Vite + React 项目
npm create vite@latest my-react-app

# 安装依赖
npm install
pnpm install
yarn install

# 启动开发服务器
npm run dev

# 构建生产包
npm run build

# 本地预览构建产物
npm run preview

8. Node.js、包管理器与运行环境

资源	链接	用途
Node.js 官网	打开	Node 下载与文档
Node.js Learn	打开	Node 官方学习文档
npm	打开	npm 文档
pnpm	打开	高性能包管理器
Yarn	打开	包管理器
Corepack	打开	Node 内置包管理器代理
nvm	打开	macOS/Linux Node 版本管理
nvm-windows	打开	Windows Node 版本管理
Volta	打开	JS 工具链版本管理
Bun	打开	JS 运行时与工具链
Deno	打开	安全型 JS/TS 运行时

8.1 npm / pnpm 常用命令

bash 复制代码

# 查看版本
node -v
npm -v
pnpm -v

# 初始化项目
npm init -y

# 安装生产依赖
npm install axios
pnpm add axios

# 安装开发依赖
npm install eslint -D
pnpm add eslint -D

# 删除依赖
npm uninstall axios
pnpm remove axios

# 清理 npm 缓存
npm cache clean --force

# 查看全局包
npm list -g --depth=0

# 查看包版本
npm view vue version

8.2 常见包管理问题

问题	解决方向
依赖安装慢	使用国内镜像、pnpm、检查网络代理
node-sass 安装失败	优先替换为 sass，不再推荐 node-sass
npm 权限错误	避免 sudo，使用 nvm/Volta 管理 Node
lock 文件冲突	团队统一 npm/yarn/pnpm，不要混用
依赖版本不一致	锁定 Node 版本、使用 lockfile、CI 中固定安装命令

9. 路由、状态管理、请求与数据处理

9.1 路由

资源	链接	适用
Vue Router	打开	Vue
React Router	打开	React
TanStack Router	打开	React / TS 友好
Next.js Routing	打开	Next.js
Nuxt Routing	打开	Nuxt

9.2 状态管理

资源	链接	适用
Pinia	打开	Vue 推荐
Vuex	打开	Vue 老项目
Redux Toolkit	打开	React 大中型项目
Zustand	打开	React 轻量项目
Jotai	打开	React 原子状态
Recoil	打开	React 状态管理
MobX	打开	响应式状态管理
TanStack Query	打开	服务端状态管理
SWR	打开	React 数据请求缓存

9.3 请求与数据处理

资源	链接	用途
Axios	打开	HTTP 请求库
Fetch API	打开	浏览器原生请求
Ky	打开	轻量 Fetch 封装
qs	打开	查询字符串处理
Day.js	打开	日期处理
date-fns	打开	日期工具函数
Lodash	打开	常用工具函数
Zod	打开	TS 优先的数据校验
Yup	打开	表单数据校验
Ajv	打开	JSON Schema 校验

10. 图表、可视化与大屏开发

资源	链接	适用场景
Apache ECharts	打开	国内项目常用图表库
ECharts Handbook	打开	ECharts 学习手册
AntV G2	打开	统计图表
AntV G6	打开	图关系、流程图
AntV L7	打开	地理空间可视化
D3.js	打开	高自由度数据可视化
Chart.js	打开	轻量图表
Recharts	打开	React 图表
Highcharts	打开	商业图表库
Mapbox GL JS	打开	地图开发
Three.js	打开	3D 可视化
CesiumJS	打开	三维地图 / GIS

10.1 大屏开发常见技术点

模块	说明
自适应	rem、vw/vh、scale、容器适配
图表封装	图表组件化、resize、自定义 tooltip、主题切换
数据刷新	定时轮询、WebSocket、SSE
动效	数字滚动、图表入场动画、地图飞线
性能	避免频繁重绘、图表销毁、Canvas/WebGL
部署	Nginx 静态部署、接口代理、缓存控制

11. 动画、交互与特效

资源	链接	用途
CSS Animations	打开	CSS 动画基础
Web Animations API	打开	原生动画 API
GSAP	打开	专业级 Web 动画库
Framer Motion	打开	React 动画
Motion One	打开	轻量动画库
Anime.js	打开	JS 动画库
LottieFiles	打开	Lottie 动画素材
lottie-web	打开	Web 加载 AE 动画
Three.js	打开	3D 特效
Rive	打开	交互式动画设计与运行时

11.1 动画使用建议

场景	推荐方式
hover、按钮、菜单	CSS transition
loading、渐入渐出	CSS animation / Framer Motion
页面切换	View Transitions API / Framer Motion
复杂时间轴动画	GSAP
数据大屏特效	GSAP + ECharts + Canvas
3D 视觉	Three.js
设计师 AE 动画落地	Lottie

12. 测试、代码质量与规范

12.1 测试资源

资源	链接	用途
Vitest	打开	Vite 生态单元测试
Jest	打开	老牌 JS 测试框架
Testing Library	打开	组件测试
Playwright	打开	E2E 测试
Cypress	打开	E2E / 组件测试
MSW	打开	Mock Service Worker
Storybook	打开	组件开发、文档、测试

12.2 代码质量工具

资源	链接	用途
ESLint	打开	JS/TS 代码检查
Prettier	打开	代码格式化
Stylelint	打开	CSS/SCSS/Less 检查
Husky	打开	Git hooks
lint-staged	打开	只检查暂存文件
Commitlint	打开	Git 提交信息规范
Conventional Commits	打开	提交规范
Changesets	打开	Monorepo 版本发布
Knip	打开	检测未使用文件、依赖、导出

12.3 推荐提交规范

bash 复制代码

feat: 新功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整，不影响逻辑
refactor: 重构
perf: 性能优化
test: 测试相关
chore: 构建、工具、依赖相关

13. 调试、性能优化与兼容性

13.1 调试工具

资源	链接	用途
Chrome DevTools	打开	浏览器调试
Firefox DevTools	打开	Firefox 调试
Vue Devtools	打开	Vue 调试
React Developer Tools	打开	React 调试
Redux DevTools	打开	Redux 调试
Lighthouse	打开	性能、SEO、可访问性检测

13.2 性能优化资源

资源	链接	用途
web.dev Performance	打开	性能系统学习
Core Web Vitals	打开	核心性能指标
PageSpeed Insights	打开	在线性能检测
WebPageTest	打开	详细性能分析
Bundlephobia	打开	查询 npm 包体积
Source Map Explorer	打开	分析包体积
Rollup Plugin Visualizer	打开	Vite/Rollup 包分析

13.3 常见优化方向

方向	做法
首屏加载	路由懒加载、组件懒加载、CDN、压缩、缓存
包体积	按需引入、Tree Shaking、移除无用依赖、动态 import
图片	WebP/AVIF、懒加载、响应式图片、压缩
接口	合并请求、缓存、分页、骨架屏
渲染	虚拟列表、防抖节流、减少重排重绘
缓存	HTTP 缓存、Service Worker、localStorage/sessionStorage
构建	压缩、分包、预加载、预渲染
监控	错误监控、性能监控、埋点分析

14. 移动端、响应式与跨端开发

14.1 移动端基础资源

资源	链接	用途
Responsive Design	打开	响应式设计
Viewport meta	打开	移动端视口
Vant	打开	Vue 移动端组件
Taro	打开	多端小程序框架
uni-app	打开	跨端开发
React Native	打开	React 原生应用
Flutter	打开	跨平台应用框架
Ionic	打开	Hybrid App 开发

14.2 移动端适配重点

问题	处理方式
不同屏幕尺寸	rem、vw、flexible、media query
高清屏图片	2x/3x 图、srcset、WebP
点击延迟	使用现代浏览器默认策略，避免旧方案依赖
安全区域	env(safe-area-inset-bottom)
滚动穿透	body 锁定、弹窗容器处理
键盘遮挡	输入框聚焦滚动、布局自适应
1px 边框	transform scale、伪元素、逻辑像素方案
手势	touch 事件、Pointer Events

15. 部署、服务器、CI/CD 与 DevOps

15.1 静态站点部署

平台	链接	适合
Vercel	打开	Next.js、React、静态站
Netlify	打开	静态站、Jamstack
Cloudflare Pages	打开	静态部署、全球 CDN
GitHub Pages	打开	文档站、个人博客
阿里云 OSS	打开	国内静态资源托管
腾讯云 COS	打开	国内静态资源托管

15.2 服务器与反向代理

资源	链接	用途
Nginx	打开	静态资源、反向代理、负载均衡
Apache HTTP Server	打开	Web 服务器
PM2	打开	Node 进程管理
Docker	打开	容器化部署
Docker Compose	打开	多容器编排
宝塔面板	打开	服务器可视化管理
Certbot	打开	免费 HTTPS 证书

15.3 CI/CD

资源	链接	用途
GitHub Actions	打开	自动构建部署
GitLab CI/CD	打开	GitLab 自动化
Jenkins	打开	企业 CI/CD
Drone CI	打开	容器化 CI
Semantic Release	打开	自动版本发布

15.4 Nginx 前端部署常用配置示例

nginx 复制代码

server {
    listen 80;
    server_name example.com;

    root /www/wwwroot/my-vue-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
}

16. 安全、可访问性与 SEO

16.1 前端安全

资源	链接	用途
OWASP Top 10	打开	Web 安全风险
OWASP Cheat Sheet Series	打开	安全实践清单
MDN Web Security	打开	Web 安全基础
CSP	打开	内容安全策略
Snyk	打开	依赖安全扫描
npm audit	打开	npm 依赖漏洞扫描

16.2 常见安全问题

问题	防护
XSS	转义输出、CSP、禁止直接插入不可信 HTML
CSRF	SameSite Cookie、CSRF Token、校验来源
点击劫持	X-Frame-Options、CSP frame-ancestors
敏感信息泄露	不把密钥写入前端代码，不上传 .env
依赖漏洞	npm audit、pnpm audit、Snyk、定期升级
Token 安全	合理过期、刷新机制、避免长期暴露

16.3 可访问性与 SEO

资源	链接	用途
WCAG	打开	可访问性标准
MDN Accessibility	打开	可访问性学习
Google Search Central	打开	SEO 文档
Schema.org	打开	结构化数据
Lighthouse SEO	打开	SEO 检测

17. 图标、图片、字体、素材与设计工具

17.1 图标资源

资源	链接	用途
Iconfont	打开	阿里图标库
Font Awesome	打开	图标字体
Lucide Icons	打开	现代线性图标
Heroicons	打开	Tailwind 团队图标
Tabler Icons	打开	图标库
Remix Icon	打开	开源图标
Simple Icons	打开	品牌图标
Iconify	打开	多图标集合

17.2 图片与素材

资源	链接	用途
Unsplash	打开	免费高质量图片
Pexels	打开	免费图片视频
Pixabay	打开	免费素材
unDraw	打开	SVG 插画
Storyset	打开	插画素材
LottieFiles	打开	动画素材
SVG Repo	打开	SVG 图标
Squoosh	打开	图片压缩
TinyPNG	打开	PNG/JPG 压缩

17.3 字体与设计

资源	链接	用途
Google Fonts	打开	英文字体
思源黑体	打开	中文开源字体
阿里巴巴普惠体	打开	中文商用字体
Figma	打开	UI 设计协作
Canva	打开	快速设计
Pixso	打开	国产 UI 设计工具
MasterGo	打开	国产 UI 设计协作
Color Hunt	打开	配色参考
Coolors	打开	配色生成

18. API、Mock、接口调试与后端协作

资源	链接	用途
Postman	打开	API 调试
Apifox	打开	API 文档、Mock、测试
Swagger / OpenAPI	打开	API 文档标准
Mock.js	打开	前端 Mock 数据
MSW	打开	浏览器/Node Mock
JSONPlaceholder	打开	免费测试 API
ReqRes	打开	测试 API
Hoppscotch	打开	开源 API 调试
Insomnia	打开	API 客户端

18.1 前后端联调建议

阶段	建议
接口设计	先确认接口路径、方法、参数、返回结构、错误码
Mock 阶段	前端用 Mock 数据先开发页面
联调阶段	使用代理解决跨域，统一封装错误处理
测试阶段	覆盖空数据、错误码、权限不足、Token 过期
上线阶段	区分开发、测试、生产环境接口地址

19. AI 编程与效率工具

资源	链接	用途
ChatGPT	打开	编程问答、文档生成、代码解释
GitHub Copilot	打开	IDE 智能补全
Cursor	打开	AI 代码编辑器
Claude	打开	代码分析、长文档处理
v0	打开	UI 原型生成
StackBlitz	打开	在线前端开发
CodeSandbox	打开	在线项目演示
CodePen	打开	前端效果演示
Excalidraw	打开	架构图、流程图
Mermaid	打开	文本生成图表

19.1 AI 辅助前端开发常用提示词

text 复制代码

请帮我把这个 Vue3 组件改成 Composition API + TypeScript，并解释每一处修改原因。

请帮我封装一个 Axios 请求模块，要求支持 baseURL、请求拦截、响应拦截、Token 自动携带、错误统一提示。

请帮我分析这个页面首屏加载慢的原因，并给出具体优化方案。

请帮我根据这个接口返回结构，生成 TypeScript 类型声明和表格渲染代码。

请帮我把这个后台管理系统页面拆分成可复用组件，并给出目录结构。

20. 面试刷题、算法与项目作品

20.1 前端面试资源

资源	链接	用途
前端面试题宝典	打开	前端每日面试题
JavaScript Questions	打开	JS 面试题
Front-End Interview Handbook	打开	英文前端面试手册
30 Seconds of Code	打开	常用 JS 代码片段
大厂面试每日一题	打开	前端面试题
CSS Tricks	打开	CSS 技巧与文章
JavaScript.info	打开	JS 系统学习
ES6 入门教程	打开	ES6 中文学习

20.2 算法与刷题

资源	链接	用途
LeetCode 中文	打开	算法刷题
LeetCode 国际	打开	算法刷题
CodeTop	打开	高频面试题
Hello 算法	打开	图解算法
labuladong 算法笔记	打开	算法套路
VisuAlgo	打开	算法可视化
Big-O Cheat Sheet	打开	复杂度速查

20.3 前端项目作品建议

项目	技术点
后台管理系统	登录、权限、菜单、表格、表单、图表、导入导出
电商 H5	商品列表、购物车、订单、支付流程、移动端适配
个人博客	Markdown、SEO、评论、标签、搜索、部署
数据大屏	ECharts、地图、实时数据、适配、动画
低代码表单	拖拽、Schema、组件渲染、表单校验
在线编辑器	Monaco Editor、代码运行、文件树
图片/视频工具	Canvas、Web Worker、文件上传、压缩
组件库	Button、Form、Table、Modal、文档站、单元测试

21. 前端资讯、社区与博客

资源	链接	用途
掘金	打开	国内技术文章
SegmentFault	打开	技术问答与文章
思否	打开	中文开发社区
CSDN	打开	中文技术文章
博客园	打开	中文技术博客
DEV Community	打开	英文开发社区
Hashnode	打开	英文技术博客
Smashing Magazine	打开	前端设计与开发
CSS-Tricks	打开	CSS 与前端技巧
JavaScript Weekly	打开	JS 周刊
Frontend Focus	打开	前端周刊
Node Weekly	打开	Node 周刊
Hacker News	打开	技术资讯
GitHub Trending	打开	热门开源项目
Product Hunt	打开	新工具发现

22. 推荐学习顺序

22.1 零基础到入门

HTML 语义化、表单、图片、链接、SEO 基础
CSS 盒模型、Flex、Grid、响应式、动画
JavaScript 基础语法、DOM、事件、数组对象方法
Git 与 GitHub 基础
使用 Vite 创建第一个 Vue / React 项目
做一个个人主页或 Todo List 项目

22.2 入门到能做项目

学 Vue 3 或 React 其中一个
学 TypeScript 基础
学路由、状态管理、请求封装
学 UI 组件库，例如 Element Plus 或 Ant Design
做后台管理系统：登录、权限、表格、表单、图表
学部署：Nginx、服务器、域名、HTTPS

22.3 项目到高级

学性能优化：首屏、分包、缓存、图片、懒加载
学测试：Vitest、Testing Library、Playwright
学工程规范：ESLint、Prettier、Husky、Commitlint
学前端架构：Monorepo、组件库、微前端
学可视化：ECharts、D3、Three.js
学 CI/CD、Docker、自动部署
学安全、SEO、可访问性

23. 项目实战方向推荐

23.1 Vue3 企业级后台管理系统

推荐技术栈：

text 复制代码

Vue 3 + TypeScript + Vite + Vue Router + Pinia + Axios + Element Plus + ECharts + ESLint + Prettier

必须实现：

登录 / 退出
Token 持久化
路由权限
动态菜单
表格增删改查
表单校验
图片上传
Excel 导入导出
ECharts 数据图表
暗黑模式
多环境配置
Nginx 部署

23.2 React 企业级后台管理系统

推荐技术栈：

text 复制代码

React + TypeScript + Vite + React Router + Zustand / Redux Toolkit + Axios + Ant Design + ECharts / Recharts

必须实现：

登录认证
权限路由
Layout 布局
表格查询筛选
Modal 表单
请求封装
状态管理
图表大屏
单元测试
自动部署

23.3 个人技术博客

推荐技术栈：

text 复制代码

Next.js / Nuxt / Astro + Markdown/MDX + Tailwind CSS + Vercel / Cloudflare Pages

必须实现：

文章列表
文章详情
标签分类
搜索
代码高亮
SEO
RSS
评论系统
站点地图
自动部署

23.4 数据可视化大屏

推荐技术栈：

text 复制代码

Vue 3 / React + TypeScript + ECharts + Mapbox / L7 + GSAP + WebSocket

必须实现：

自适应布局
多图表组件
地图可视化
实时数据
数字滚动
图表主题
动效过渡
全屏展示

24. 前端资源速查表

分类	首选资源	备用资源
Web 基础	MDN	web.dev
HTML	MDN HTML	WHATWG HTML
CSS	MDN CSS	CSS-Tricks
JavaScript	MDN JS	JavaScript.info
TypeScript	TS Docs	Type Challenges
Vue	Vue Docs	VueUse
React	React Docs	React Router
构建工具	Vite	Webpack
包管理	pnpm	npm
UI 库	Element Plus	Ant Design
CSS 框架	Tailwind CSS	UnoCSS
图表	ECharts	D3
测试	Vitest	Playwright
代码规范	ESLint	Prettier
部署	Vercel	Nginx
性能	web.dev Performance	PageSpeed
安全	OWASP	MDN Security
面试	前端面试题宝典	Frontend Interview Handbook
算法	LeetCode	Hello 算法
素材	Iconfont	Unsplash

最后建议

前端资源很多，但不要只收藏不实践。建议你每学一类资源，都配一个小项目来练：

学 HTML/CSS：做个人主页、登录页、响应式官网。
学 JavaScript：做 Todo、轮播图、表单校验、拖拽上传。
学 Vue/React：做后台管理系统。
学 ECharts：做数据统计面板。
学部署：把项目发布到云服务器，并配置域名和 HTTPS。
学性能优化：用 Lighthouse 跑分，然后逐项优化。
学面试：把项目中的技术点整理成自己的面试话术。

真正能提升前端能力的方式是：文档 + 项目 + 总结 + 复盘 + 持续迭代。