Web前端开发技术的核心思想

入门标准

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。

在这里我还是要推荐下我自己建的web前端开发学习群：731669587，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。

几年前， 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 则是浏览器对象模型，用于访问和操作浏览器的一些特性。

视频教程方面，慕课网、极客学院等都有基础课程，但都是收费的，而且价格不菲，性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶：响应式开发与前端框架》两套课程的组合套餐就要 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。

对于刚接触当代前端的人员来说，存在太多陌生的概念需要了解，一时可能难以消化，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 应用。