前端开发学习方法和路线

二鱼座

前端开发越来越被人所熟知，衍生出来前端开发工程师入行门槛低，就业薪资高，人才缺口，越来收受到转行人员的欢迎。

那么怎么才能成为一名合格的前端工程师呢？如何才能避免走弯路呢？
如果没有计划，那就跟着咱们的步骤走吧，能让你少走好多弯路，省下很多时间。

首先，入门只需要达到一条：能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。

HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的。










具体要学哪些内容？

HTML基础：熟悉各种常用标签的用法，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
CSS基础：熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
JavaScript基础：首先作为一门编程语言，语言本身的基础肯定要熟悉，包括数据类型、变量、运算符、控制流、函数、对象等；另外，也要熟悉 DOM；
HTML5：HTML5 的新特性肯定要了解，内容其实也不是很多，核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
CSS3：CSS3 也是要熟悉那些新特性，最核心的就是弹性盒子

但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。


几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular、React、Vue 等框架的兴起，变成了百家争鸣的局面。

这几年，Web 前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的HTML/CSS/JavaScript，以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系，还有 CSS 预处理器 Sass/Less/Stylus，还有 TypeScript，还有 grunt/webpack/gulp 等各种打包构建工具，还有其他一大堆技术栈。

这么多技术栈，我们不可能全都掌握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些则熟悉 Vue，很少有人对三种框架生态体系都非常了解。

因此，我们入门也没必要每种框架都学习，只要挑选一种就够了。

而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。

而不管是 Angular、React 还是 Vuew，其背后的核心设计思想都是组件化的设计，因此只要掌握一种框架，我们也就能学习到前端技术的核心思想了。


那么，我们应该学哪种框架体系呢？


我的建议是从 Vue 开始，因为 Vue 的学习成本是最低的，入门简单，而且这两年 Vue 可以说是出现了爆发式的增长，已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法，而且文档还大多都是英文。Vue 因为是国人开发和维护的，自然对国内的开发者更友好。

Angular 则是个大而全的框架，显得太重，学习成本自然最高。

因此，我们要入门 Web 前端开发的话，除了要学习 HTML/CSS/JavaScript 三大基础技术栈，还要了解 Vue 体系。





开发工具方面，我推荐 Visual Studio Code，一款免费开源的轻量级代码编辑器，macOS、Windows、Linux 都支持，有人评价说比sublime开源，比atom更快，比webstorm更轻，所以说，你值得拥有。

前端开发入门，要学的技术栈真的还不少，如果没有引导和规划，学起来也很容易糊涂。

除了最基础的 HTML/CSS/JavaScript，还包括 HTML5、CSS3、ES6，还要学习目前流行的 JavaScript 框架，我的建议是从 Vue 开始，容易入门，要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解点基础。

最后，学习还要落到实战上，实战项目可以参考下图：