一个只学过HTML，CSS，JS的前端初学者在学习Vue.js之前还需要学习哪些知识？

最近开始自学Vue.js2.0，无奈看到官方文档的进阶部分之后就看的很吃力了，文档中讲得很多术语和名词都无法理解。总觉得自己在学习过程中肯定缺少了前端技能树上的某些知识（知识链断裂）。

我发现在学习各种前端框架的时候都不可避免的接触到了ECMAScript2015，bable，webpack，我现在大致知道这些东西起什么作用，但是不知道除了学习这些以外还需要学习什么，或者明白什么概念？（比如说前端模块化这个概念是不是需要去学一学CommonJS或者sea.js这些东西？）

如果从STAR面试法则上来看的话，这些技术的场景，要解决的问题是什么，如何去解决的，解决完之后的结果（带来的好处）是什么？

另外我们平时在学校以及各种书籍上学的js是哪个版本的ECMAScript？我们该如何从这个版本的ECMAScript过渡到ECMAScript2015？

求各位前端大神回答一下上面的问题，并且给予我们这些新手一些学习路线，谢谢各位啦！

html css node.js javascript vue.js

阅读 25.1k

13 个回答

这波能反杀

看了大家的回答，感觉很多人都没说到点子上
大概大家对如何有效的掌握一门新的框架也是一头雾水吧
为了给题主解惑，以及各位如此耐心回答问题的朋友提供一个学习思路，所以我决定要抖点干货。
主题就是《如何快速掌握一种框架》，方法适用于目前所有的流行框架

最近前端比较流行的几类框架，包括Vue，weex，react, react native, 以及小程序
他们有一个共性，就是，组件化的思维非常非常非常重要

组件如何创建？
在组件中，数据如何传递？
组件与组件之间如何交互？
如何合理的划分与组合组件？
这些问题你搞明白了，你就会发现，其实掌握一个框架，还是没有想象中那么难的。

我并不愿意一上来就说别人基础不好，其实大多数所谓的基础不好，只不过是有的知识没记住嘛。
但是有一个基础，那一定是要牢牢的刻在脑子里的，那就是题主自己提到的模块化思维。

因为组件是基于模块化思维的。

而关于模块化，这几年就有好多个模块化的规范。
CMD，AMD，commonjs，以及最新的ES6的模块思维。
我们抛开他们的具体原理不谈，单从使用者的角度来说的话，其实道理都是一样的。
所以，只需要掌握其中一种，另外的，也只是语法表现不一样而已。
既然最新的是ES6，那么干脆就建议大家按照ES6的来吧，现在很多文档教程也是基于ES6来写的。
那么总要我们自己去搞明白import，export这些是来干嘛的对吧。
基础语法不多说，耐心花一个小时认真了解一下就基本OK了。

但是想要凭空了解模块化也是没那么容易的。因为模块化，恰恰是基于js的面向对象思维。
啊，这个时候，终于和基础知识扯上关系了。学习面向对象，推荐前面有同学提到的《JavaScript高级编程》

所以你至少需要了解常规的创建对象是怎么玩的，单例模式是怎么玩的，订阅-通知模式是怎么玩的。

订阅-通知模式涉及到数据的管理与组件的交互，因此异常重要，具体实现与重要性可参考redux。

所以我给题主的学习路线建议如下

1. 面向对象，设计模式中的单例模式与订阅-通知模式，这里建议通过ES5的语法进行学习
2. 搞明白为什么要模块化
3. 模块化，这里开始，可以结合ES6的语法来学习ES6的模块化思维，
   如果你没有ES6的开发环境，就建议通过require.js来学习模块化。     

4. 组件化

5. 以及需要支撑这条学习路径的所有基础知识。

尽管这里面涉及到的内容很多，但是当你真正完成此路径之后，你就已经掌握了ECMAScript在使用角度上的核心了。
你将不会畏惧去重新学习任何新的框架。

就比如大家都在说小程序入门简单，其实是建立在你的这整套思维都完善的情况下的，否则你仍然只能最多按照官方文档写写小例子，并没有什么卵用

至于解决了什么问题，这个等你把组件化搞清楚再来考虑吧，简单的篇幅还真讲不清楚。
这里你可以给自己留2个思考题，在模块化思维下，如何实现

1.在一个app中，设置切换皮肤，整个app的皮肤就自动切换了
2.点击了一个组件的按钮，另一个组件的颜色大小都发生指定的变化

另外为了减轻学习压力，我有几条额外的建议

做好脱离jquery的思想准备，也就是多数框架的组件化中，我们不再需要获取DOM元素
和数据处理有关的方法都要重点关注
暂时不要考虑动画与交互如何实现
不要被各种语法的变化吓到，比如ES6与ES5相比，只是同样的功能，换了一种语法而已。语法永远都是没有学习障碍的，记住：只要是语法的问题，都不是问题

最后分享一点小干货，多种方式实现拖拽
看懂了此例子将会对你学习进步的帮助非常大

已注销

3.6k83856

发布于
2016-12-30

学习前端要【发散式思维】
最开始我自学javascript也想知道哪些是基础，然后想一步一步循序渐进，后来发现所谓的基础很少，大部分知识点散而多。

举例来说，最开始写JS实例，可能是一个【下拉菜单】，然后发现【TAB选项卡】原理和下拉菜单原理很相近,然后又发现【slider轮播图】的原理和index控制的选项卡也原理相同，再又发现了【冒泡、事件委托】等等。。。

就是不断发散，让所有散乱的知识点之间产生联系，并不是必须要先学哪个，才能继续学另外的知识

针对楼主的问题：
1、ECMAScript是一个标准，就像CSS2.0/3.0一样，实际我们使用的JS不是ECMAScript的任何一个具体版本，而是它的实现，也就是说像CSS一样，只要浏览器厂商支持，你可以写2.0也可以写CSS3，混着写也行。

2、WEBPACK只是无数前端工具之一，只是现在比较火，搭配VUE用的人多，其他的还有GULP、GRUNT等等，它既不是一种编程语言，也不是什么高深的东西，网上有很多在线压缩JS/CSS，在线编译SASS/LESS，在线生成雪碧图一大堆工具，以前都是用那些，现在可以把诸如此类的功能都用WEBPACK实现，就这么回事，有兴趣可以学学，没兴趣不学就不是什么大不了的事，除非公司强制要用。

**3、babel，这个就更简单了，就是把ES6编译成ES5，它搭配webpack就是babel-loader，搭配gulp就是gulp-babel，像我以前不用gulp和webpack，可以直接在sublime Text3上装个就用。。就是个编译器。
顺带一提，IE8连ES5都不支持，所以如果你有要兼容IE8及以下的场合，ES6ES5Babel都可以扔**

最后还是那句话，学习前端是发散性思维，不要给自己一堆条条框框的计划，知识点之间没有绝对的前后基础关系，计划死了到头来也是一团乱麻，从实例着手，再发散到其他知识和实例

fish

4k74878

发布于
2016-12-30

之前对 ES6，Webpack，Vue 的接触几乎为 0，硬啃了两天文档看了几个别人的 demo 上手了，感觉 ES6 的话，稍微了解点 module 那块就好了，代码看多了也就慢慢习惯了，Webpack 还不了解，用了 vue-cli

觉得还是得实践，自己写代码，我写的三个入门级 demo 供你参考 https://github.com/hanzichi

王子林

343413

发布于
2017-01-14

既然你诚心诚意的问，我就大发慈悲的回答你。?

咱们一条一条的来看。

1.缺了哪些知识
我也猜不出你具体是什么水平。所以列出来的都是一些比较关键的问题。

原生js操作DOM、jQuery操作DOM
js事件
js对象
js原型
js面向对象编程
模块化
组件化

2.ECMAScript2015、bable、webpack
我想你现在只是知道这些东西，也能跟着网上的教程写点小玩意儿。但是，你不理解这些东西具体是什么，用来干嘛，怎么用。没关系，遇到这些新东西，就跟着官方文档一点点模仿就对了。模仿是学习新玩意儿最好的方式。

对于ES6（ECMAScript2015），如果你熟悉js的语法，你只需要去看看ES6的基本语法。首先let、const、箭头函数，变量结构赋值、模板字符串，这五项你得先明白，这会解决你70%的语法障碍。如果遇到其他的不明白的语法，则直接查相应的资料。阮一峰老师的《ECMAScript 6 入门》在网上开源，讲解的非常清晰，通俗易懂，地址在这里：ECMAScript 6 入门。其他的ES6相关内容，不建议你在深入ES5之前去深入，只要明白使用就好。其他的功夫，你可以花在ES5的深入学习上。
babel 是一个代码转换器。现市面上的5大主流浏览器对ES6的支持暂时不足，不能运行。所以，有个很聪明的外国人就做了一个转换器，让你写ES6语法的代码，它帮你转换成ES5的。ES6比ES5先进好用，所以用ES6会很爽。但是，这需要你对ES5比较熟悉。（几个小问题：js对象是地址引用的你明白吗？数组是地址引用的你知道吗？js原型链是什么?）。
webpack是一个前端工程化的完整解决方案。意思是说，它是一系列功能的集合体。要理解它，你首先要明白模块化。
我知道，模块化这个东西说起来简单，但是它是一个概念主要的名词。所以，新人学习这东西的时候确实有点麻求烦。不过，请相信我，它真的很简单。学习它建议你学习一下CMD，nodejs实现的CMD模块化规范。网上大部分的文章你看着肯定会懵逼。它们没有解释到精髓。我是在《深入浅出node.js》里面2.1.2小节--> "CommonJS的模块规范" 里面看到的解释最为精髓易懂。可以在网上找到相应的资料。

3.场景、解决的问题、如何解决、解决结果

场景：最开始vue.js这些MVVM框架是为了解决SPA单页应用的开发问题。现在也不局限在SPA了，而是用来解决复杂的、大型的web应用了。
解决的问题：前端开发三个痛点：
- 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
- 开发者在代码中大量调用相同的 DOM API, 处理繁琐，操作冗余，使得代码难以维护。
- 界面展示数据，用户操作产生事件，事件需要反馈，也代表着我们要处理用户的行为。当页面很复杂的时候，处理数据和界面相对应的变化，会很头疼。MVVM框架（此处为vue）帮我们做了一些事，让我们可以操作数据，界面相对应的就变化了。
- 拓展阅读：Vue.js 和 MVVM 的小细节
如何解决？
- 这个就不是几句话能说明白的。虽然不难，但是很啰嗦。
- 你知道的，前端很多东西就是很分散的。
解决结果
- 结果就是大家都很开心的用vue这些MVVM框架来开发了呀。
4.书上学的大部分是ES3和ES5。ES为主。FF、Chrome、Opera、Safari这些的新版本对ES5的支持已经很完善了。IE9部分支持，IE10支持比较完善。
如何过渡？用bable啊！ES6的语法来写代码，bable帮你转换成ES5的，完美！

5.建议
《JavaScript高级程序设计》是一本不错的进阶书籍。读一遍吧。读完这本书，才算是js入门了。

宫春成

5272719

发布于
2016-12-30

其实我学的也不是很好，但是我可以给你这方面一点建议

在学习vue之前呢，你要确保你的原生js没有问题（一些基础性的概念），如果你的原生js没有问题了，那这些框架对于你来说就不会有太大的问题（框架嘛，就是基于原生js基础上的一些封装，本来就方便与我们开发的），那些框架的概念会在你的事件中融会贯通，因为每个框架都有他个人的魅力

你要记住，千万不要纸上谈兵，即使不会写项目，也要看着官网的示例代码敲一敲，敲得多了犯的错多了，会解决错误了，这样你才可以很好的运用它。

还有，不要在开始学一些东西之前就有计划要做什么什么储备，因为这会拖垮你的精力，不要怕，直接去用它，出了问题去解决它，什么不会再去学它，就想你去看一本javascript高级程序设计，你从头开始一页一页的看，有多少次你都是又从头翻开，但是你要你每次都看一看目录呢，看看哪里不太熟练，又或者在遇到问题之后再去翻一翻，那会有不一样的效果，事半功倍。

总之就是这样，我就不啰里啰嗦了，加油~

StormerZ

2.3k24120183

发布于
2016-12-30

很佩服这样细心的人。不过我的学习方法完全不是这样的。有什么好担心的，一开始就大胆去尝试，先有感性的认识。需要你学习什么、注意细节的时候，你自然会去再仔细看和研究。

别让学过的知识成为学习新东西的羁绊。

undefind_5

1.5k1296133

发布于
2016-12-30

vue？没用过，因为公司没有用他。如一楼所说：你看vue文档看不懂，说到底还是js基础太浅薄了。用好各类框架，首先要学好原生js。感觉是句屁话，但是你得承认，这是事实，框架只是人家借助原生集成出来的辅助工具，但是任何一个框架都逃不了被取代或者优势弱化的趋势（曾经的jq就是的），然后你会发现你一离了框架，做什么都眼高手低。所以，先不急去看框架（如果公司没有让你用的话），先把原生js过一下级，进进阶。一味的追求框架，会导致自己舍本逐末的。就如知乎上有一篇：《2016学前端是一种什么样的体验》这篇文章一样，各种框架，你能学的过来？所以对于楼主这个问题，结合我现在的计划：首先，我目前不会去深入学任何一种框架，除非在工作中需要用到，部门老大让我学。其次，我仍然觉得自己的js还不过关，我给自己的心理预期是，能比较轻松造出一些实用的插件，能轻松看完jq底层代码，然后把js比较经典的几本书通读至少2遍...基本上达到这一点后我才会考虑去了解一些框架

我是一个自学然后到小公司上班快半年的菜鸟前端，html css 就不说了，就像背英语单词一样。至于js，JavaScript，暂时大多都是在写jq，原生js才是js的重点吧，所以我买了本JavaScript高级程序设计准备慢慢怼，这本书目录就很好的说明了JavaScript要学的知识点，我相信这些知识学好再看react vue node angular等等框架应该会轻松许多吧，其实，在这之前可以边打原生js基础边学一些jqUI、bootstrap 、ajax、json，H5C3比较火的点或者了解一些后端比如Java、php的基础知识，对接的时候会用到。还有就是设计，现在有些前端会包办设计网页，因为美工大多不了解代码，有时候设计的方案可能偏离了技术可行性，前端来设计的话就会好很多，当然这要根据兴趣而定。你在项目中多承担了一部分事务，可以多要一些工资啊。都说前端简单，上到后端下到设计都有涉及，本职工作事也多，切图，写动画，改兼容性，雪碧图，正则，CDN，不仅要完成还要高质量的代码，还有一些前端自动化的工具等等，比较流行的框架vue react angular 等等，这是目前我认识的前端，还有很多不知道等待探索的，我是个菜鸟，这些只是很主观的建议，说的不对的不好的请海涵。祝题主早日成为大神，带我飞。

linong

29.2k1163128

发布于
2016-12-30

谢邀。我来的比较晚，我简单说说我的看法吧。vue提供一套现成的东西，模板渲染，快捷的操作，快捷的写法。如果你js十分的高级，你可以自己写一套类似vue的东西。

我认为前端不同其它语言的是，他是有html+css+js组成。他所依赖的环境由用户决定。。所以最好是多接触基础，然后根据你喜欢的决定你最后的方向

html可以做什么？可以承载你的内容。

css可以做什么？让你的内容表现的更为直观，清晰。

js可以做什么？业务逻辑，复杂效果。

AfarWind

发布于
2016-12-30

新手上路，请多包涵

我来简单说说吧，从你的问题中，我感觉楼主你的基础底子还是有点薄弱的，你说的那些东西像bable，webpack，或者别的什么ng2,vue等等其实都是属于JS的工具或者框架或者库，如果你的JS基础或者功底足够，去了解这些东西你会发现你其实上手很快的，如果你JS功底不行，当然肯定也就不怎么看得懂，说到底还是因为功底问题。

建议你可以先看看HTML，CSS和JS方面一些基础的书籍，系统的了解学习下，思维上有了一个架构然后再去看别人的代码，流行的工具等等，弥补自己的不足。

同时往后的话建议也要看一些比如code complete，clean code这样的书增长自己的代码功底，也要了解一些编程思想，设计模式，算法等等，这些可以以后慢慢补充。

如果你系统学习过你就会知道ECMAScript是什么，一般js书籍开头在介绍JS的时候肯定会介绍js的历史，构成等等信息，进而在学习node.js的时候你就会知道node.JS是什么什么东西CommonJS是什么东西了。