前端开发学习路线

技术栈大致分以下:前端三剑客、vue3、微信小程序、react等
开发工具:Vscode、Cursor、WebStorm

基础阶段

进阶阶段

JS高级

• JS 的对象和面向对象编程，包括构造函数、原型链、继承等概念
• JS 的异步编程，如回调函数、Promise、async/await 等，了解如何处理异步操作和解决回调地狱问题。
•  DOM 操作，能够通过JS动态地创建、修改和删除 HTML 元素，以及操作元素的属性、样式和内容。

前端框架

• Vue：学习 Vue的基本概念，如组件化、数据绑定、指令、生命周期钩子等。掌握 Vue.js 的路由系统和状态管理，能够构建单页面应用。
• React：学习 React.js 的核心概念，如组件、JSX 语法、状态和属性、事件处理等。了解 React 的虚拟 DOM 和 Diff 算法，学习 React Router 进行路由管理，Redux 进行状态管理。

构建工具

vite

• 快速入门：利用浏览器原生 ESM 支持实现快速冷启动，在开发环境下无需打包即可快速提供模块热更新（HMR）等功能。学习 Vite 的基本安装和使用方法，能够创建一个基于 Vite 的项目，熟悉其项目结构和基本配置。
• 配置与插件：深入学习 Vite 的配置文件vite.config.js，掌握如何配置项目的基础路径、代理服务器、别名等。学习使用 Vite 的插件系统，例如使用@vitejs/plugin-vue或@vitejs/plugin-react等插件来支持不同的前端框架，了解如何自定义插件来满足项目的特殊需求。
• 生产环境构建：学习 Vite 在生产环境下的构建优化，如代码压缩、Tree Shaking、按需加载等功能。了解如何配置 Vite 以生成适合不同环境的构建产物，以及如何进行构建后的资源分析和性能优化。
•  

Webpack

• 学习 Webpack 的基本配置，如如何处理 JavaScript、CSS、图片等资源的打包，如何使用 Loader 和 Plugin 进行文件转换和优化。

高级阶段

• 性能优化
  • 学习前端性能优化的原则和方法，如减少 HTTP 请求、压缩文件、缓存策略、懒加载、防抖节流等。
  • 了解如何使用工具分析页面性能，如 Chrome 开发者工具中的 Performance 面板，以及如何根据分析结果进行针对性的优化。
• 响应式设计与移动开发
  • 深入学习响应式设计的原理和方法，使用媒体查询、弹性布局等技术，使网页能够在不同屏幕尺寸的设备上完美显示。
  • 学习移动开发的相关技术，如触摸事件处理、移动端适配、移动性能优化等
• 后端知识
  • 学习 Node.js，了解其基本概念和常用模块，如http、fs、path等。能够使用 Node.js 搭建简单的服务器，实现后端逻辑，如处理路由、读取文件、操作数据库等。
  • 学习数据库基础知识，如 MySQL等，了解如何进行数据的存储、查询、更新和删除操作。掌握数据库的设计原则和基本的 SQL 语句

部署方式

实践是检验真理的唯一标准

通过阅读技术博客、项目实践等方式，不断更新自己的知识体系。