入门标准入门标准很简单，就一个：达到可以参与实际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/JavaScriptHTML、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基础教程和本教程的表单部分tutorialHTML5:ThetutorialExplainedthenewfeaturesofHTML5CSS:本教程不包含CSS3的新特性，所以需要学习以下CSS3教程CSS3:本教程内容比较少，只包含CSS3的新特性CSS3JavaScript：本教程只是讲解了非常基础的语法。但是，我推荐菜鸟教程。虽然内容也是来自w3school，但有些内容比w3school更详细。以下是教程地址：HTML:www.runoob.com/html/html-t...CSS:www.runoob.com/css/css-tut...JavaScript:www.runoob.com/js/js-tutor...HTML和CSS按照上面的教程就够了，但是JavaScript不够，上面的教程缺少ES6和以后版本的内容，后面会推荐其他的学习资源补充。书籍方面，对于HTML和CSS的基础知识，最推荐的是《Head First HTML与CSS》。布局设计通俗易懂，即使是零基础的非IT人员也适合学习。但是，《深入浅出》一书并未涵盖对HTML5和CSS3的更新。然而，HeadFirst有另一本书解释HTML5，叫做《Head First HTML5 Programming》。不过，要熟悉HTML5的使用，还是需要掌握一点JavaScript基础知识。HeadFirst没有对应的CSS3书籍，推荐另一本书《CSS3实用指南》。JavaScript方面，我先推荐《JavaScript高级程序设计》这本书。书中内容通俗易懂，通俗易懂，适合初学者。另外，有人会推荐《JavaScript权威指南》，不过这本书主要是字典书，有点晦涩难懂，不适合初学者。然而，《JavaScript高级程序设计》仍然是基于ES5的。为了补充ES6的内容，推荐阮一峰的《ES6标准入门》。目前是第三版，内容已经涵盖了ES2017最新版本。另外，因为这是一本开源教材，你也可以直接到阮一峰官网免费阅读。以下是链接地址：ECMAScript6入门：es6.ruanyifeng.com/另外还有一个名为《You Don't Know JS》的系列书籍也推荐给大家，也是一本开源教材。这套书会让你知道JavaScript是什么以及为什么，它还包括ES6的内容。不过这套书是给初学者看的，只适合进阶使用。我还出版了一本中文译本，叫做《你不知道的JavaScript》。目前只有两卷，第一卷和第二卷。根据评价，第一卷的翻译还不错，第二卷的翻译马马虎虎。不知道第二卷什么时候出。.以下是系列丛书的github地址：YouDon'tKnowJS:github.com/getify/You-...那么，学习资源那么多，我们应该如何学习才能高效呢？其实我们主要是想了解各种核心概念，我们不可能在短时间内熟悉所有的知识点。因此，和上一篇一样，我也会罗列一些核心知识点。HTML基础：基于w3school或菜鸟HTML教程，熟悉各种常用标签的使用，尤其是标题、段落、链接、图片、表格、列表、表单、块、布局、CSS、脚本等CSS基础：同上基于w3school或菜鸟CSS教程，熟悉选择器、样式、盒模型、定位等CSS语法和模块内容JavaScript基础：首先，作为一门编程语言，必须熟悉语言本身的基础知识，包括数据类型、变量、运算符、控制流、函数、对象等；此外，你还必须熟悉DOM；简单了解BOM即可，使用场景不多。HTML5：你必须了解HTML5的新特性。canvas、svg、支持多媒体、web存储、应用缓存、WebSocket等CSS3：CSS3也需要熟悉那些新特性，其核心是ElasticBoxES6：ES6自然也要熟悉，学习阮一峰的《ECMAScript 6 入门》教程Vue系统就够了在开始正式学习Vue之前，我们先来了解几个概念，这样可以更好的理解Vue的一些设计理念。第一个概念是“单页应用”，也就是只有一个网页的应用。它是一个仅加载单个HTML页面并在用户与应用程序交互时动态更新页面的Web应用程序。第二个概念是“VirtualDOM”，即虚拟DOM。简单的说，它是一个模拟DOM树的JavaScript对象，以避免在真实的DOM上进行大规模操作而导致的性能问题。第三个概念是“反应系统”。通过数据模型和视图之间的数据绑定，系统可以自动响应数据模型对视图的修改。第四个概念是“组件化”。Vue和React都通过组合各种组件来形成应用程序。只有理解了这些概念，才能更好的理解Vue/React这几个前端框架体系。另外，在开发工具方面，我推荐VisualStudioCode，这是一款免费开源的轻量级代码编辑器，支持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一样使用VirtualDOM，也提供响应式和组件化的视图组件。但是，与React不同，Vue更喜欢使用基于HTML的模板，这也是它比React等其他框架更容易上手的原因。vue-router：因为现在大部分的web应用都是单页面应用，所以需要路由来实现单页面不同view的跳转。vue-router库用于实现单页应用的路由功能。vuex：vuex是一个类Flux的状态管理库，它使用集中存储来管理应用程序所有组件的状态。关于什么是Flux，可以参考阮一峰的一篇文章《Flux 架构入门教程》。vue-cli：vue-cli是官方提供的命令行工具，可以用来快速创建vue项目。Axios：Axios是Vue官方推荐的第三方HTTP库。它基于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模仿饿了么的一个完整项目，重点推荐另外，一个github也附上总结了众多vue开源项目的地址：github.com/opendigg/aw...。对于开源实战项目的运营，我还是建议先给应用换个皮肤，然后自己尝试做一个类似的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应用。
