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

目录

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 常用命令示例

# 创建 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 常用命令

# 查看版本
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 推荐提交规范

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 前端部署常用配置示例

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 辅助前端开发常用提示词

请帮我把这个 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 零基础到入门

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

22.2 入门到能做项目

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

22.3 项目到高级

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

23. 项目实战方向推荐

23.1 Vue3 企业级后台管理系统

推荐技术栈：

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

必须实现：

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

23.2 React 企业级后台管理系统

推荐技术栈：

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

必须实现：

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

23.3 个人技术博客

推荐技术栈：

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

必须实现：

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

23.4 数据可视化大屏

推荐技术栈：

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 跑分，然后逐项优化。
  • 学面试：把项目中的技术点整理成自己的面试话术。

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

# 前端 # 前端框架 # javascript # css # html
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

收银系统源码开源哪家好深度解析_OctShop

avatar AtomGit开源社区
cover

【Python × 深度学习 × Agent 系列·第六篇·收官】性能与部署：cProfile 性能分析、推理优化、并发模型服务，让 Agent 又快又稳

avatar AtomGit开源社区
cover

DeepSeek 大模型落地应用与场景实战指南

avatar AtomGit开源社区