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

最近前端比较流行的几类框架，包括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相比，只是同样的功能，换了一种语法而已。语法永远都是没有学习障碍的，记住：只要是语法的问题，都不是问题

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

学习前端要【发散式思维】
最开始我自学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都可以扔**

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

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

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

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

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

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

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

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

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

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

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

我是一个自学然后到小公司上班快半年的菜鸟前端，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 等等，这是目前我认识的前端，还有很多不知道等待探索的，我是个菜鸟，这些只是很主观的建议，说的不对的不好的请海涵。祝题主早日成为大神，带我飞。

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

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

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

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

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

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

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

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

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

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