我整理最有效、最全的Vue 2.0 学习路线，各个阶段适用

拼搏现实的明天。 2022-05-19 02:39 104阅读 0赞

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1][]

### 「 Vue很难学吗 」 ###

对于我这种从0.x版本就开始体验 vuejs 的人来说，当然不算难，那时候没各种脚手架和复杂搭配，仅仅是一个mvvm的解决方案库而已，解决了jq带来的繁琐操作dom痛点，所以就一直用了。

我最早用的是AngularJs，那时候15年也是刚传到国内，踩了很多坑这方面的坑，各种文档、API 和解决方案都不完善，所以知道从新学一个新的概念框架的难处和雷点，最近Vue发展的很好，也是华人所写，所以普及度很高，文档好，语法简介收获了一大批忠实深度用户，我之前**web入坑**系列文章也分析过很多特性。

总有人群里或者后台问我 Vue2.0到底如何学（转行和新手居多），看官网还是一脸懵逼，因为2.0变的很重了，不单单是是一个库了，而是一个解决方案框架的方向发展，结合nodejs、webpack自动化es6新语法等，这些都是新手很难理解的知识点，所以今天再发个干货，希望帮助到有心的读者和粉丝，也算好事一件。

下面建议学习顺序，从 新手起步，到实战开发，到进阶核心都有介绍，结合了自己查的资料和经验和vue作者尤大的一些建议汇总而成，觉得好请转发、收藏。

### 「 Vue 起步 」起步阶段 ###

1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件，这个不多做介绍，这个都不会的，建议回路一步步重造，参考我第一篇入坑系列，如何学前端。

2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 <script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。

3. 照着官网上的示例，自己想一些类似的例子，模仿着实现来练手，加深理解，一定要跟着手动敲，比如写一个编辑器什么的啦。

4. 阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数（Render Function)』如果理解吃力可以先跳过。

5. 阅读教程里关于路由和状态管理的章节，然后根据需要学习 vue-router 和 vuex。同样的，先不要管构建工具，以跟着文档里的例子理解用法为主。

6. 走完基础文档后，如果你对于基于 Node 的前端工程化不熟悉，就需要补课了。下面这些严格来说并不是 Vue 本身的内容，也不涵盖所有的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具备的知识。

## ##

### 「 前端生态工程化 」 ###

1. 了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules，适当关注还未成为标准的提案，ES6以后是各个框架的标配，必须要学，后面北妈也会放出ES6轻松学系列。

2. 学习命令行的使用。建议用 Mac，win 也无妨，这个不重要。

3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本，并且将 npm 的 registry 注册表配置为淘宝的镜像源。

至少要了解 npm 的常用命令，npm scripts 如何使用，语义化版本号规则，CommonJS 模块规范（了解它和 ES2015 Modules 的异同），Node 包的解析规则，以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意 Node (6+) 版本开始已经支持绝大部分 ES2015 的特性，可以借此巩固 ES2015。

4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。这个简单，看着Babel官网文档即可轻松配置，希望大家动手起来。

5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。

学习 Webpack 的一个挑战在于其本身文档的混乱，建议多搜索搜索，应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但需要注意和 1.0 的不兼容之处。

之前也写过webpack、gulp的基础介绍，可以翻我博客。

### 「 Vue 进阶阶段 」 ###

1. 有了 Node 和 Webpack 的基础，可以通过 vue-cli 来搭建基于 Webpack ，并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始，并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档，了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。

2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex

3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节（可选择性使用 JSX)，理解模板和渲染函数之间的对应关系，了解其使用方法和适用场景。

4. （可选）根据需求，了解服务端渲染的使用（需要配合 Node 服务器开发的知识）。介绍一下服务端渲染的概念。

nuxt集合了 vue-router 和 vuex、webpack的搭建套餐，有SEO需要的可以着重了解下， 并不是必须要学，这只是一种场景方案，懵不？

# 服务端渲染SSR 完全指南 #

在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读

## Nuxt.js ##

从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

5. 阅读开源的 Vue 应用、组件、插件源码，自己尝试编写开源的 Vue 组件、插件。

6. vue各种属性和概念如何结合react 组件混合用，也有必要了解一下，它们有些方案是可以通用的，比如jsx语法、vue用redux等。

**觉得好，欢迎转发！小北最帅**

**![70][]**

--------------------

**热门阅读：**

1.[各个阶级的前端 必须掌握的基本技能汇总][Link 1]  
2. [找工作如何避免培训机构骗局][Link 2]  
3. [我为何一直强调外包公司别去][Link 3]

**web入坑系列回顾**

第一篇： [web 前端入坑第一篇：web前端到底是什么？有前途吗][web _web]  
第二篇： [web前端入坑第二篇：web前端到底怎么学？干货资料！][web_web]  
第三篇： [web前端入坑第三篇 | 一条“不归路” - 学习路线！][web_ _ _ -]  
第四篇： [web前端入坑第四篇 | web前端 | 你还在用jQuery？][web_ _ web_ _ _jQuery]

第五篇： [秒懂Vuejs、Angular、React原理和前端发展历史][Vuejs_Angular_React]

第六篇： [Vue、React、Angular之三国杀，web前端入坑第六篇(上)][Vue_React_Angular_web]

[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220519/b332c6f45efe470fa090319eb9552aec.png
[70]: /images/20220519/3333ea4412834ee8bd86291bee887d80.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484661&idx=1&sn=3a959acee6b8062503aa1c3692b87769&chksm=eca79ff1dbd016e7afa67de5d94f08b96aa476722005b8928881389a71c5977cf813fca120b9&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484632&idx=1&sn=54b09accba6aed5c572b171140ed02d9&chksm=eca79fdcdbd016cacbe68809790b9189dd7b2aadbbd174f42983b7d4075e2765cf74074e9060&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484619&idx=1&sn=2ba508d950592f1104dfd4b98351e7ee&chksm=eca79fcfdbd016d98df6bdd34a32853a388fef843fe6193a5fa399f31fc8213510bab1842552&scene=21#wechat_redirect
[web _web]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247483703&idx=1&sn=173038906c6c86346fc14670af7cfb27&scene=21#wechat_redirect
[web_web]: https://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247483840&idx=2&sn=0ff8bb94c24f0fd4bb9a044a9ff9251d&scene=21#wechat_redirect
[web_ _ _ -]: https://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247483750&idx=1&sn=5dbb5b0e57ca0a1625a2e62b6f4eaf32&scene=21#wechat_redirect
[web_ _ web_ _ _jQuery]: https://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247483927&idx=1&sn=87ecf4324f4e387cc28899badd23bd88&chksm=eca79913dbd010052855f4649d14dbc7c545eea574db53f8808b23f89d97c0d704f325013a1e&scene=21#wechat_redirect
[Vuejs_Angular_React]: https://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247483943&idx=1&sn=d2b019ae41d8bd63d42f5abd0df64173&chksm=eca79923dbd01035b4038e8c513075ed5dcf201659cfca291125f45b4491fa96cf8b6f023a50&scene=21#wechat_redirect
[Vue_React_Angular_web]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484527&idx=1&sn=6775cf2467734b5d59d00097e2cdb35e&chksm=eca79f6bdbd0167d32793a5cb373ebce15b53e9b74ed7886bd4252c7e2e5f3bb577697e94ac4&scene=21#wechat_redirect