获课：weiranit.fun/13885/

获取ZY↑↑方打开链接↑↑

基础入门

• HTML5 技术：掌握标签语法、排版标签、语义化及 SEO，能用 HTML5 标签搭建页面结构。

• CSS3 网页布局：学习选择器、盒模型、浮动、定位、过渡、精灵图等，具备 PC 端网页制作和布局能力。

• 移动 Web 布局：掌握 Flex、REM、媒体查询、vw/vh、Bootstrap、Less 等技术，以及字体图标、平面转换、3D 转换、动画，实现移动端网页制作和布局。

• 阶段案例实战：完成学成在线（PC 端）、小兔鲜儿电商（PC 端 + 移动端）等项目。

技术进阶

• JavaScript 开发：学习 ES5 到 ES12 的相关知识，掌握 JavaScript 语言和基本编程思想。

• 网页交互：熟练掌握 DOM 操作、网页特效、事件等常用网页交互技术。

• 数据交互 & 异步编程：掌握 ajax、axios、Promise、async、Event loop，具备前后端交互能力。

• 阶段案例实战：完成小兔鲜商品详情、小米购物车等项目，进行 PC 端综合实战项目数据看板 + CMS 系统开发。

Vue 开发

• 框架前置课：学习 Node.js、模块化、npm、webpack，为学习框架做技术支撑。

• Vue2.x 核心技术：掌握指令系统、常用选项、组件化、组件通讯、插件等 Vue2.x 开发必备技能。

• 面经全端项目（Vue2.x 全家桶）：使用 vue cli、vue-router、vuex、Element、vant、axios 等开发 H5 端面经浏览 + PC 端内容管理系统。

• 黑马智数项目（微前端 + Vue2+Vue3）：涉及 Vue2.x 全家桶、vue-admin-template、RBAC、组件封装、国际化、性能分析、Vue3.x、Vite、3D 模型、qiankun 微前端等内容。

• Vue 原理：深入学习响应式数据、虚拟 DOM、Diff 算法、AST 语法树以及 Vue3 响应式系统。

• 阶段项目实战：完成极客园项目、人力资源项目等。

小程序 & 多端开发

• 原生微信小程序开发：通过享 + 生活原生小程序项目，掌握原生小程序、微信 API 详解、腾讯地理定位服务、VantUI 应用。

• 跨平台多端开发：利用 uni-app 开发优医问诊 APP，涉及 Vue3+Pinia、组件封装、微信支付 / 登录、即时通信、地图服务。

• 阶段项目实战：开发智慧商城小程序、小兔鲜儿电商小程序。

鸿蒙应用开发

• 鸿蒙应用开发核心技术：学习 ArkTS、ArkUl、基础组件及容器组件、自定义组件、组件化及组件状态、生命周期等鸿蒙开发必备技能。

• 鸿蒙原生应用开发：开发美蔑商城鸿蒙原生应用，掌握一次开发、多端部署、三层工程架构、设备断点适配、电商业务、Hybrid 混合开发、WLAN 和多媒体技术使用、华为应用生态使用。

React & 面试与就业

• React.js 核心技术：掌握 JSX、Hooks、组件通信、Redux、Redux-Toolkit，通过极客园自媒体项目（React+TS）进行实践，涉及 React、TypeScript、Vite、Zustand、ReactRouter、Quill。

• 职业发展课：学习职场通识、面试攻略、简历指导、模拟面试。

• 就业加强课：复习常见算法、浏览器原理、Vue 原理、React 原理等面试常见技术问题。

• 在学习前端的过程中，提升代码质量是一个渐进的过程，需要从多个方面入手，以下是一些具体的方法：

遵循规范和标准

• 使用统一的代码规范：遵循如 Airbnb JavaScript 风格指南、W3C 的 HTML 和 CSS 规范等业界广泛认可的规范。在团队开发中，还可以制定适合团队的规范，确保所有成员的代码风格一致，提高代码的可读性和可维护性。

• 遵循语义化原则：在 HTML 中，选择合适的标签来表达内容的含义，如使用<header>、<footer>、<nav>等标签来构建页面结构，使代码更易于理解，也有利于搜索引擎优化。在 CSS 和 JavaScript 中，为类名、变量名、函数名等选择有意义的名称，清晰地表达其用途和功能。

优化代码结构

• 模块化编程：将代码按照功能划分为不同的模块，每个模块负责一个特定的功能，如将页面的不同功能区域划分为不同的 JavaScript 模块，或者将不同类型的样式定义在不同的 CSS 模块中。这样可以提高代码的可维护性和可复用性。

• 分层架构：在开发复杂的前端应用时，采用分层架构，如将视图层、逻辑层、数据层分离。以 Vue 或 React 项目为例，将组件作为视图层，Vuex 或 Redux 管理状态作为数据层，业务逻辑处理放在中间层，使代码结构更加清晰，各层之间的职责明确。

注重代码复用

• 提取通用组件：在开发过程中，将经常使用的界面元素，如按钮、表单、弹窗等，提取为通用组件。以 React 为例，可以使用 React 组件库来创建可复用的组件，提高开发效率和代码质量。

• 利用 CSS 类和函数：在 CSS 中，定义通用的类来实现样式的复用，如定义.btn-primary、.btn-secondary等通用的按钮样式类。在 JavaScript 中，将常用的功能封装成函数，避免重复编写代码。

加强代码测试

• 编写单元测试：使用测试框架，如 Jest、Mocha 等，为 JavaScript 函数、组件等编写单元测试，确保每个功能模块的正确性。例如，对一个计算购物车总价的函数进行单元测试，验证不同输入情况下的输出是否正确。

• 进行浏览器兼容性测试：在不同的浏览器和设备上测试代码，确保页面在各种环境下都能正常显示和运行。可以使用浏览器开发者工具进行调试，解决兼容性问题。

持续学习和代码审查

• 学习优秀的代码库和框架：研究和学习如 Vue、React、Bootstrap 等优秀的前端代码库和框架的源代码，了解它们的设计思想、架构和编程技巧，从中汲取经验，提升自己的代码水平。

• 参与代码审查：在团队开发中，积极参与代码审查，审查他人的代码可以发现自己可能犯的错误，同时也能从他人的代码中学习到好的做法。接受他人的代码审查，认真对待反馈意见，不断改进自己的代码。