最有效、最全的Vue 2.0 学习路线,各个阶段适用

「 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) 的基础篇。不要用任何构建工具,就只用最简单的 ,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 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等。

这里推荐一下我的前端学习交流群:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习知识。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏idealclover的填坑日常

话说输入法——各输入法简要测评

输入法,一个说小不小,说大也不大的东西。往小了说,这不是一个很大的市场,愿意折腾输入法的人也只是千里挑一;然而往大了说,这又是一个与我们的电脑与手机朝夕相伴的不...

4693
来自专栏HTML5学堂

网站开发流程、第一个HTML文件与基本的HTML标签

上周我们讲解了HTML与CSS的学习方法,并且概览了一下HTML与CSS,今天我们就开始进入“课程内容”的第一课。 讲法声明 - 很重要,请先查看 关于HTM...

4775
来自专栏用户3254834的专栏

干货丨自适应网站和响应式网站有哪些差异

随着大屏智能手机以及ipad等通讯设备的广泛应用,网站样式风格也与时俱进,在满足PC端计算机的浏览时,移动端同样适合访客浏览,作为一些企业公司和个人,他们在网络...

1782
来自专栏知晓程序

微软也做小程序了!图片一键生成 PPT

1533
来自专栏知晓程序

帮你快速抢红包,微信聊天记录竟有这些隐藏操作? | 晓技巧

1293
来自专栏无原型不设计

你应该知道的网页设计中的规则和禁忌

网页设计是一个棘手的话题。当你创建网站时你需要考虑很多事情。为了简化这个任务,我这里准备了一个列表,每个网页设计师在设计网页时都应该考虑这些注意事项。好消息...

2554
来自专栏极客慕白的成长之路

2018 前端趋势:更一致,更简单

1382
来自专栏即时通讯技术

重磅发布:《阿里巴巴Android开发手册(规约)》

阿里巴巴于近日为广大程序员再送上重磅开春好礼:《阿里巴巴Android开发手册(规约)》。该开发规范在阿里内部经过了长期的修缮,现已总结成册,向所有移动开发者、...

1724
来自专栏河湾欢儿的专栏

APP概括

移动端:运行在移动设备上的产品 移动设备:手机 平板 我们做的页面只适用于安卓系统和ios系统,诺基亚是Windows Phone系统不用管

1402
来自专栏DeveWork

前端页面中 iOS 版微信长按识别二维码的bug 与解决方案

iOS 版微信(目前为6.2.2版本)内置浏览器中长按识别二维码有一个bug 会导致无法识别,安卓下就可以。本文将为你重现这个bug 并给出实际中的解决方案。 ...

3838

扫码关注云+社区