转载自:https://mp.weixin.qq.com/s/rb3uxK3YVXAWEeT5K7M8eg入门标准入门标准很简单，就一个:达到参与Web前台实际项目的开发水平。 请注意，这是一个实际项目，因此有必要了解当今实际项目开发中使用了哪些技术堆栈。 HTML/CSS/JavaScript这三个基础技术栈是必须掌握的，但如果要参与实际的项目开发，就必须掌握剩下的几个主流框架系统。 几年前，jQuery+Bootstrap可以说是前台领域的霸主。 近年来，随着Angular、React、Vue等框架的兴起，成了百家争鸣的局面。 近年来，Web前端技术发展很快，相应的，也出现了很多技术栈。除了最基础的HTML/CSS/JavaScript，以及这些JavaScript框架和它们各自的生态系统如Vue/React/Angular，还有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/JavaScriptHTML、CSS和JavaScript是前台的核心基础，一定要掌握。 HTML主要是HTML5，相比之前的版本增加了很多新特性。 CSS主要是CSS3。与之前的版本相比，主要是模块化。 JavaScript实际上分为三个部分:ECMAScript、DOM和BOM。 Eccript，缩写为ES，是JavaScript的核心。 DOM是一个文档对象模型，它实际上是一组用于访问和操作HTML所有元素的API。 BOM是浏览器对象模型，用于访问和操作浏览器的一些功能。 有很多HTML/CSS/JavaScript的学习资源。我推荐几个。 首先是w3school的一系列教程:HTML:这个教程也包括了HTML5新增的内容，但是没有下面这个详细。所以在本教程中，我建议你只看HTML5的基础教程和表单部分:本教程讲解HTML5 CSS的新特性:本教程不包括CSS3新增加的特性。所以我们还需要学习下面这个CSS3教程:这个教程内容比较少，只包含了CSS3新增加的特性JavaScript。本教程只讲解非常基础的语法书，HTML和CSS的基础方面，第一本是Head First HTML和CSS。版面设计简单易懂，即使是没有基础知识的非IT人员也适合学习。 但是《Head First》这本书并没有涉及HTML5和CSS3的升级。 不过Head First还有一本解释HTML5的书，叫Head First HTML5编程。但是，如果想熟悉HTML5的用法，首先要掌握一些JavaScript基础知识。 Head First里没有相应的关于CSS3的书，我再推荐一本关于CSS3的实用指南。 JavaScript方面，我先推广了《JavaScript高级编程》这本书，通俗易懂，适合入门。 另外，有人会推荐《JavaScript权威指南》，但这本书主要是字典书，有点晦涩，但不适合入门。 但是，JavaScript高级编程还是基于ES5的。为了补充ES6的内容，推荐阮一峰的ES6标准介绍。目前是第3版，内容已经涵盖了ES2017的最新版本。 另外，由于这是一本开源教材，你也可以直接去阮一峰官网免费阅读。 另外，还有一本叫《你不知道的JS》的系列书籍也要推荐给大家，也是开源教材。这套书会让你知道什么是JavaScript，为什么是JavaScript，里面也有ES6的内容。但是，这套为初学者编写的书只适合高级使用。 我还出了一本中文翻译书，叫《你不知道的JavaScript》。目前只有第一册和第二册。根据评价，第一卷的翻译还不错，第二卷的翻译一般。不知道第二卷什么时候出。 以下是系列丛书的github地址:你不知道js:get ify/You-don-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的几个设计理念。 第一个概念是“单页应用”，即只有一个网页的应用。它是一个Web应用程序，只加载一个HTML页面，并在客户端和应用程序之间交互地动态升级页面。 第二个概念是“虚拟DOM”，即虚拟DOM。简单来说就是模拟一棵DOM树的JavaScript对象，为了避免真实DOM大规模操作带来的性能问题。 第三个概念是“反应系统”。通过数据模型和视图之间的数据绑定，系统可以自动响应数据模型对视图的修改。 第四个概念是“组件化”。Vue和React都通过组合各种组件来形成应用程序。 了解了这些概念，就可以对前端框架系统Vue/React有更好的理解。 还有，在开发工具方面，我推荐Visual Studio Code，这是一个免费开源的轻量级代码编辑器，支持macOS、Windows和Linux。有人说它开源，比atom快，比webstorm轻，你值得拥有。 Vue系统包括很多技术栈，一套完整的Vue项目一般包括Vue+Vue-router+Vue-CLI+axios+sass+web pack，其中，Vue+Vue-router+vuex也被称为Vue的全家桶。由于这三套技术栈都是vue官方推出的，所以剩下的框架和工具都是第三方的。 然后，让我们逐一了解这些技术栈。 Vue:vue就是Vue.js框架本身，是一个采用MVVM模式的JavaScript框架。像React一样，它使用虚拟DOM，也提供响应性和组件化的视图组件。 然而，与React不同，Vue更喜欢使用基于HTML的模板，这也是它比React等其他框架更容易上手的原因。 Vue-router:由于现在大部分Web应用都是单页面应用，所以需要路由来实现单个页面中不同视图的跳转。vue-router库用于实现单页面应用的路由功能。 Vuex:vuex是一个类似Flux的状态管理库，它使用集中存储来管理应用程序所有组件的状态。 什么是通量？可以参考阮一峰写的一篇文章《Flux Architecture导论》。 Vue-CLI: Vue-CLI是一个官方命令行工具，可以用来快速创建Vue项目。 Axios:axios是vue官方推荐的第三方HTTP库。它基于承诺，这是ES6新增加的功能。 萨斯:CSS的预解算器。简单介绍可以看阮一峰的文章《Sass使用指南》 也有比较少的和触笔预解析器，但是sass是很多大牛最推荐的一个。 Web Pack: Web Pack是一个包构建工具，可以比作Java的Gradle。 但是webpack是基于node.js的，所以你要熟悉webpack，学习一些node.js的基础知识，至少要知道如何配置node.js的运行环境，了解Node.js的包管理工具npm的常用命令。 对于刚接触当代前台的人来说，有太多不熟悉的概念需要理解，可能一时难以消化。Vue的作者尤雨溪写过一本书《初学者:Vue 2.0的建议学习顺序》，可以根据他的建议来学习。 学习资源方面，最好的应该是官方文件。 另外《Vue.js实战》这本书是尤雨溪推荐的，也可以买着看，可以作为官网的补充资源。 对于少数概念，如果不太了解，可以先放一放，以后在项目开发的过程中可能会了解。 实战入门的关键是通过项目实战入门，这是我一直推崇的。 也是和安卓、iOS一样的建议。有条件的话可以向老板申请参与公司的前端项目开发，然后开始熟悉代码，实现几个简单的任务。建议从几个简单的UI界面开始。 同样，开源项目自然也是不可或缺的。我推荐两个vue中的开源项目:vue2-happyfri:非常简单的小项目，非常适合入门练习vue2-elm:用vue模仿饿了么的完整项目。另外附上一个总结了很多Vue开源项目的github地址:opendigg/awesome-github-vue。 对于开源实用项目的操作，我还是建议先把应用皮肤化，然后自己尝试做一个类似的app。 以上面的vue版本饿了么项目为例。你应该首先改变所有页面的皮肤，包括背景、按钮、文本等。，然后自己尝试做个百度外卖或者美团外卖。等你做完了，处理一般的vue项目开发应该没什么问题。 之后可以根据需要学习React系统。这个时候，学起来永远不会难。 总结一下前台开发的介绍，真的有很多技术栈要学。除了最基础的HTML/CSS/JavaScript，还包括HTML5、CSS3、ES6，还需要学习现在流行的JavaScript框架。我的建议是从Vue开始，比较容易上手。要掌握的技术堆栈包括Vue+Vue-router+Vuex+Vue-CLI+Axios+Sass+Web Pack。 最后，我给大家推荐了一个简单的小项目和一个完整的vue版的饿了么实战项目。 前台开发和移动开发的编程思路思考和实践有什么区别？如何将前台的架构思想应用到移动开发中？最后，一个Web应用要独立完成。