快速入门Web前端开发
快速入门Web前端开发
入门标准
入门标准很简单，就一条： 达到能参与 Web 前端实际项目的开发水平 。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。
几年前， 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 则是个大而全的框架，显得太重，学习成本自然最高。至于 jQuery + Bootstrap 这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。
因此，我们要入门 Web 前端开发的话，除了要学习 HTML/CSS/JavaScript 三大基础技术栈，还要了解 Vue 体系。而 Vue 体系，除了 Vue 框架本身，还包括其他技术栈，这个后面再说。
HTML/CSS/JavaScript
HTML、CSS、JavaScript 是前端的核心基础，所以必须要掌握。HTML 主要就是 HTML5 ，相比之前的版本，新增了很多新特性。CSS 则主要是 CSS3 了，相比以前的版本，主要就是作了模块化的拆分。JavaScript 其实分为三部分： ECMAScript 、 DOM 和 BOM 。ECMAScript 简称 ES ，是 JavaScript 的核心，目前最新版本已经是 ES2017 ，是 ES6 的第三个小版本。DOM 是文档对象模型，其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型，用于访问和操作浏览器的一些特性。
HTML/CSS/JavaScript 的学习资源比较多，我推荐几个。首先是 w3school 的系列教程：
- HTML：该教程也包括了 HTML5 新增的内容，但讲得没下面专门讲解 HTML5 的细，所以该教程我建议只看 HTML 基础教程和表单部分即可
- HTML5：该教程讲解了 HTML5 的新特性
- CSS：该教程并不包括 CSS3 新增的特性，所以还需要学习下面的 CSS3 的教程
- CSS3：该教程内容比较少，只包含 CSS3 新增的特性
- JavaScript：该教程只是讲解了非常基础的语法
不过，我更推荐菜鸟的教程，内容虽然也是来自 w3school，但部分内容比 w3school 的更详细，以下是教程地址：
- HTML ：http://www.runoob.com/html/html-tutorial.html
- CSS ：http://www.runoob.com/css/css-tutorial.html
- JavaScript ：http://www.runoob.com/js/js-tutorial.html
HTML 和 CSS 只要根据以上教程学习就足够了，但 JavaScript 则是不够的，以上教程缺少了 ES6 及更高版本的内容，后面我再推荐其他学习资源进行补充。
视频教程方面，慕课网、极客学院等都有基础课程，但都是收费的，而且价格不菲，性价比实在太低。比如慕课网的 《前端小白入门》+《前端进阶：响应式开发与前端框架》 两套课程的组合套餐就要 988 元了，而内容还没有上面免费教程的齐全。如果真要看视频，那我会推荐网易云课堂的一些免费课程:
- 从零玩转HTML5前端+跨平台开发
- H5/web前端开发｜HTML5+CSS3
- 李炎恢JavaScript教程 第一季
书籍方面，HTML 和 CSS 基础方面的，首推 《Head First HTML与CSS》 ，编排设计通俗易懂，就连完全零基础的非 IT 人员都适合学习。不过，Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过，Head First 有另一本书讲解了 HTML5，叫 《Head First HTML5 Programming》 ，不过，要熟悉 HTML5 的用法，还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍，因此，我推荐另一本 《CSS3实用指南》 。
JavaScript 方面，我首推 《JavaScript高级程序设计》 这本书，书中内容由浅入深，也是写得通俗易懂，适合入门。另外，有些人会推荐 《JavaScript权威指南》 ，但这本书主要还是一本字典书，略显晦涩，其实不适合入门。不过 《JavaScript高级程序设计》 还是基于 ES5 的，为了补充 ES6 的内容，推荐阮一峰的 《ES6标准入门》 ，目前是第3版，内容已经覆盖了最新版本的 ES2017 。另外，因为这是一本开源教材，所以也可以直接去阮一峰的官网免费阅读，以下是链接地址：
- ECMAScript 6 入门 ：http://es6.ruanyifeng.com/
另外，有一套系列书叫 《You Don’t Know JS》 也要推荐给大家，也是开源教材，这套书会让你对 JavaScript 知其然也知其所以然，也包含了 ES6 的内容，不过这套书面向初学者的，只适合用来进阶。也出版了中文翻译的书籍，叫 《你不知道的JavaScript》 ，目前只有上卷和中卷两本，据评价，上卷的翻译还不错，但中卷的翻译则一般般，下卷不知道什么时候才出版。以下是系列书的github地址：
- You Don’t Know JS ：https://github.com/getify/You-Dont-Know-JS
那么，这么多学习资源，我们应该如何学习才高效呢？其实，和前面学习 Android 和 iOS 时一样，我们主要还是为了了解各种核心概念，我们不可能在短期内熟悉所有知识点，因此，我还是和前面的文章一样，也罗列出一些核心的知识点吧。
- HTML基础 ：以 w3school 或菜鸟的 HTML 教程为主，熟悉各种常用标签的用法，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
- CSS基础 ：同样以 w3school 或菜鸟的 CSS 教程为主，熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
- JavaScript基础 ：首先作为一门编程语言，语言本身的基础肯定要熟悉，包括数据类型、变量、运算符、控制流、函数、对象等；另外，也要熟悉 DOM；BOM 简单了解下就可以了，使用场景不多
- HTML5 ：HTML5 的新特性肯定要了解，内容其实也不是很多，核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
- CSS3 ：CSS3 也是要熟悉那些新特性，最核心的就是弹性盒子
- ES6 ：ES6 自然也是要熟悉的，学好阮一峰的《ECMAScript 6 入门》教程就足够了
Vue 体系
在开始正式学习 Vue 之前，我们先来了解几个概念，这样才能更好理解 Vue 的一些设计理念。第一个概念是「 单页应用程序 」，就是只有一个 Web 页面的应用，是只加载单个 HTML 页面并在用户与应用程序交互式动态更新该页面的 Web 应用程序。第二个概念是「 Virtual DOM 」，即虚拟 DOM，简单说就是一个模拟 DOM 树的 JavaScript 对象，是为了避免大面积操作真实 DOM 而导致的性能问题。第三个概念是「 响应式系统 」，通过数据模型和 View 的数据绑定，系统可以对数据模型的修改自动响应到视图上。第四个概念则是「 组件化 」，Vue 和 React 都是通过组合各种组件组成应用程序的。理解了这些概念，你才能更好的理解 Vue/React 这些前端框架体系。
还有，开发工具方面，我推荐 Visual Studio Code，一款免费开源的轻量级代码编辑器，macOS、Windows、Linux 都支持，有人评价说 比sublime开源，比atom更快，比webstorm更轻 ，所以说，你值得拥有。
Vue 体系包含了很多技术栈，一套完整的 Vue 项目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack ，其中， vue + vue-router + vuex 又称为 Vue 全家桶 ，因为这三套技术栈都是 Vue 官方推出的，其他框架和工具则是第三方的。那么，就让我们来一个个了解这些技术栈吧。
- vue ：vue 即是 Vue.js 框架本身，是一套采用了 MVVM 模式的 JavaScript 框架，它和 React 一样使用了 Virtual DOM，也提供了响应式和组件化的视图组件。不过与 React 不同的是，Vue 更推荐使用基于 HTML 的模板，这也是它相比 React 等其他框架更容易入门的原因。
- vue-router ：因为现在大多数 Web 应用都是单页应用，那要实现单个页面里的不同视图的跳转，就要用到路由，vue-router 库就是用来实现单页应用的路由功能。
- vuex ：vuex 是一个类 Flux 的状态管理库，它采用集中式存储管理应用的所有组件的状态。关于什么是 Flux，可以参考阮一峰写的一篇文章《Flux 架构入门教程》。
- vue-cli ：vue-cli 是官方提供的命令行工具，用它可以快速创建 vue 项目。
- axios ：axios 是 vue 官方推荐的一个第三方 HTTP 库，它是基于 promise 的，promise 是 ES6 的新增特性。
- sass ：CSS 的一款预处理器，简单入门可以看看阮一峰的一篇文章《SASS用法指南》。预处理器另外还有 less 和 stylus，不过不少大牛最推荐的还是 sass。
- webpack ：webpack 是打包构建工具，可以类比为 Java 的 Gradle。不过 webpack 是基于 node.js 的，所以要用熟 webpack，还要学点 node.js 的基础知识，至少要懂得配置 node.js 的运行环境以及了解 node.js 的包管理工具 npm 的常用命令。
对于刚接触当代前端的人员来说，存在太多陌生的概念需要了解，一时可能难以消化，Vue 的作者尤雨溪写过一篇《新手向：Vue 2.0 的建议学习顺序》，可以按照他的建议去学习。
学习资源方面，最好的应该就是官方文档了。另外， 《Vue.js实战》 这本书有尤雨溪作推荐序，也可以买来看看，可以作为官网的补充资源。对于一些概念如果还不是很理解，也可以暂时先放一放，后面在做项目开发的过程中可能你就会理解了。
实战入门
最关键的还是要通过项目实战才能真正入门，这也是我一贯推崇的。也是和 Android、iOS 实战一样的建议，如果条件允许，你可以向上司申请参与自己公司的前端项目开发，然后开始去熟悉代码和实现一些简单的工作任务，建议先从完成一些简单的UI界面开始。同样，开源项目自然也是少不了，Vue 这块的开源项目我推荐两个：
- vue2-happyfri：很简单的一个小项目，很适合入门练习
- vue2-elm：用 vue 模仿饿了么的一个完整项目，重点推荐
另外，也附上一个汇总了众多 vue 开源项目的 github 地址：https://github.com/opendigg/awesome-github-vue。
对于开源实战项目的操作上，我依然还是建议先给应用改皮肤开始，之后尝试着自己做出一个类似的App。以上面的 vue 版饿了么项目为例，你先给它所有页面先换个皮肤，包括背景、按钮、文字等等，通通换掉一遍，然后尝试自己做一个百度外卖或美团外卖，当你做完，应付一般的 vue 项目开发就应该没有问题了。之后也根据需要可以再去学下 React 体系，这时候学起来绝对不会吃力。
总结
前端开发入门，要学的技术栈真的很多，除了最基础的 HTML/CSS/JavaScript，还包括 HTML5、CSS3、ES6，还要学习目前流行的 JavaScript 框架，我的建议是从 Vue 开始，容易入门，要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解点基础。最后，实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。
思考和实践
前端开发的编程思想和移动开发有什么不同？如何将前端的架构思想应用到移动开发上？最后，还是要独立完成一款 Web 应用。