W.T.的博客

Every day to be a little better

前端学习路线

发表于 更新于 分类于
本文字数： 2.1k 阅读时长 ≈ 2 分钟
基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野

1. 前端资源

前端资源汇总

2. 前端入门

前端基础三件套：HTML，CSS，JavaScript

2.1. 工具选择

2.1.1. 浏览器

2.1.2. 代码编辑器

2.1.3. 在线编译器

  • jsfiddle：界面包括了HTML编􏾸器、CSS编􏾸器、JavaScript 编􏾸器和输出界面，􏼌有不同的类库可供选择，可以在其中直接编辑并运行自己的前端代码

  • CodePen：它的特点在于界面所见即所得，在编编辑的过程中会不断刷新预􏻰览效果

  • RunJS：􏹾网站􏴷有实时预􏻰览、 高亮显􏼪􏺫示、代码格式化􏼷等功能，可以将制作好的作􏴲品分􏷲享给􏻳他人，也可以在网站中查􏺖看和学习其他􏻍内设计􏰌师的各种􏰕前端作品􏴲

2.1.4. 文档笔记

2.2. 三件套

2.2.1. HTML

描述：网页骨架

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/HTML

学习笔记：HTML学习笔记

视频：

2.2.2. CSS

描述：网页样式

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/CSS

学习笔记：CSS学习笔记

2.2.3. JS

描述：网页互动

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript

学习笔记：

移动端开发：

移动端开发

Bootstrap学习笔记

尚硅谷Bootstrap教程(bootstrap框架讲解)

视频：

3. 前端工程化

什么是前端工程化

https://www.zhihu.com/question/433854153/answer/1713597311

使用前端开发框架（Vue / React），并配合脚手架、组件库搭建完整的前端网站，将项目代码提交到代码仓库中，并发布上线

3.1. 研发流程

  1. 技术选型
  2. 初始化
  3. 开发
  4. 本地测试
  5. 代码提交
  6. 编译、打包、构建
  7. 部署
  8. 集成测试
  9. 发布上线
  10. 监控运维

3.2. Node.js

描述：一个开源与跨平台的 JavaScript 运行时环境

学习资源：

笔记来源：coderwhy - 深入Node.js技术栈

  1. 基础认知
  2. 模块化
  3. npm
  4. 实现脚手架工具
  5. Buffer
  6. 事件循环和异步IO
  7. Stream
  8. web服务器
  9. MySQL数据库
  10. 项目实战

3.3. Vue

笔记来源：coderwhy-vue3+ts

  1. 使用Vue3
  2. 模板语法
  3. webpack搭建Vue环境
  4. Vue-CLI脚手架
  5. Vite搭建Vue环境
  6. 组件化开发
  7. 过渡与动画实现
  8. Composition_API
  9. Vue源码学习
  10. VueRouter路由
  11. Vuex的状态管理
  12. 实现后台管理系统

3.4. 测试

mock.js

3.5. 代码质量

描述：依照规范写出的代码会更加合理

资源：Airbnb 代码规范 https://github.com/BingKui/javascript-zh

代码检查ESLint，提交规范Prettier，提交检查husky

类型校验TypeScript学习笔记

3.6. 构建工具

3.7. CI/CD

描述：通过在应用开发阶段引入自动化来频繁向客户交付应用

  • Jenkins

3.8. 部署

4. 前端生态

4.1. 小程序

4.2. 跨端开发框架

  • Flutter
  • uniapp

5. 实战项目

5.1. 大事件 - nodejs

前端网页

Api说明

后台基于nodejs开发

本文结束  感谢您的阅读
  • 本文作者： Wang Ting
  • 本文链接： /zh-CN/2021/10/24/前端学习路线/
  • 发布时间： 2021-10-24 19:53
  • 更新时间： 2023-04-15 21:35
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！