2019年Vue学习路线图

作者 Anthony Gore 译者无明

如果你是Vue开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染，等等。你可能还听说过与Vue有关的一些工具和库，比如Vuex、Webpack、Vue CLI和Nuxt。

浸没在术语和工具的浩瀚海洋中难免会令人感到沮丧，但其实并不是只有你一个人有这种感受，所有经验水平的开发人员都会持续感觉到这种莫名的压力。

一口气吃不成胖子，试图一下子学习所有东西可能是徒劳的，所以我将在这篇文章中展示一个高级“知识地图”，它包含了与Vue开发相关的关键领域，你可以使用这张地图作为2019年学习Vue的图鉴。

0．JavaScript和基本的Web开发

如果我要你学习中文书籍中所写的内容，你首先要学会中文，对吧？

同样，Vue是一个用于构建Web用户界面的JavaScript框架。在开始使用Vue之前，你必须了解JavaScript和Web开发的基础知识。

1．Vue基本概念

如果你是Vue开发新手，应该专注于Vue.js生态系统的核心，包括Vue核心库、Vue Router和Vuex。

这些工具将被用在大多数Vue应用程序中，并为本文中提到的其他领域提供了一个构建框架。

Vue核心功能

从根本上说，Vue用于同步网页和JavaScript。实现这一目标的关键特性是反应式（reactive）数据，以及指令和插值等模板功能。这些东西在一开始就要学习。

要构建你的第一个Vue应用程序，你还需要知道如何在网页中安装Vue，并了解Vue实例的生命周期。

组件

Vue组件是独立的可重用UI元素。你需要了解如何声明组件，以及如何通过prop和event在它们之间发生交互。

了解如何组合组件也很重要，因为这对使用Vue构建健壮、可伸缩的应用程序来说至关重要。

单页面应用程序

单页面应用程序（SPA）架构通过单个网页实现传统多页面网站一样的功能，而且不会在每次用户触发导航时重新加载和重建页面。

在将“页面”构建为Vue组件之后，就可以使用Vue Router将每个“页面”映射到一个唯一的路径，Vue Router是一个用于构建SPA的工具，由Vue团队维护。

状态管理

随着应用程序变得越来越大，SPA页面中会有很多组件，管理全局状态变得很困难，而且随着prop和event监听器的增加，组件变得越来越臃肿。

一种称为“Flux”的特殊模式可以将数据保存在可预测且稳定的中央存储中。由Vue团队维护的Vuex库可以帮助你在Vue.js应用程序中实现Flux。

2．现实世界中的Vue

以上的知识可用于构建高性能的Vue应用程序，但如何将它们部署到生产环境中？

如果你想将基于Vue.js的产品发送给真实用户，你还需要了解更多东西！

项目脚手架

如果你经常构建Vue应用程序，你会发现几乎每个项目都需要提供配置、设置和开发者工具。

Vue团队维护了一个叫作Vue CLI的工具，让你可以在几分钟内启动一个强大的Vue开发环境。

全栈或认证的应用程序

真实的Vue应用程序通常是由数据驱动的用户界面。数据通常来自使用Node、Laravel、Rails、Django或其他服务器框架开发的API。

这些数据可能是由传统的REST API或GraphQL提供的数据，也可能是通过Web套接字提供的实时数据。

你还需要了解将Vue集成到完整技术栈中常用设计模式，以及确保Vue应用程序用户数据的安全性。

测试

如果你想开发出可维护且稳定的Vue应用程序，需要对它们进行测试。

在Vue应用程序中，可以通过单元测试来确保你的组件能够为给定输入（即prop或用户输入）提供相同的输出（即重新渲染的HTML或发出的事件）。

Vue团队维护了一个叫作Vue Test Utils的工具，用于测试单独的Vue组件。

优化

当你将应用程序部署到远程服务器并且用户通过慢连接访问它时，它与你在开发环境中测试的速度和效率是不一样的。

为了优化Vue应用程序，我们可以采用各种技术，包括服务器端渲染，也就是在服务器端执行Vue应用程序，然后输出HTML页面并传给用户。

其他优化手段还包括使用异步组件和渲染函数。

3．关键的相关工具

到目前为止，我们所看到的一切都来自Vue.js核心，或来自生态系统中的工具。但Vue不是孤立存在的，它只是前端技术栈中的一层。

高级Vue开发人员不仅需要熟悉Vue，还需要熟悉每个Vue项目的关键工具。

现代JavaScript和Babel

Vue应用程序可以使用ES5开发，ES5是几乎所有浏览器都支持的JavaScript标准。

要获得增强的Vue开发体验，并利用新的浏览器功能，你可以使用最新的JavaScript标准ES2015和ES2016或更高版本提供的功能来构建Vue应用程序。

不过，如果你选择使用现代JavaScript，就需要提供一种支持旧版浏览器的方法，否则你的产品可能无法为大多数用户提供服务。

要实现这一目的，需要使用Babel。它的作用是在应用程序发布之前将你的现代功能“转换”（翻译和编译）为标准功能。

WebPack

Webpack是模块捆绑器，如果你的代码跨越了不同模块（例如不同的JavaScript文件），Webpack可以将这些零散的代码“构建”到浏览器可读的单个文件中。

Webpack还可以作为构建管道，你可以在构建代码之前对代码进行转换，例如使用Babel、Sass或TypeScript，还可以使用一系列插件来优化你的应用程序。

很多开发人员觉得Webpack难以掌握，配置起来也很麻烦，但如果没有它，将无法使用Vue的一些有用的功能（如单文件组件）。

最近发布的Vue CLI 3提供了一种用于在Vue项目中抽象和自动配置Webpack的解决方案。

这是否意味着你不需要学习Webpack了？当然不是，因为你仍然不可避免地需要进行定制或调试Webpack配置。

TypeScript

TypeScript是JavaScript语言的超集，为我们提供了类型（String、Boolean、Number等），这样我们就可以编写健壮的代码，并尽早发现错误。

Vue.js 3将于2019年推出，将完全使用TypeScript编写。但这并不意味着你一定要在你的Vue项目中使用它，但如果你想要为Vue贡献代码，或者想要理解它的内部工作原理，就需要了解TypeScript。

4．Vue的框架

构建在Vue之上的框架让你无需从头开始实现服务器端渲染，还可以创建自己的组件库以及完成很多其他常见任务。

有很多很好的Vue框架，在这里我们只列出使用最为广泛和最重要的三个框架。

Nuxt.js

如果你想要构建一个高性能的Vue应用程序，就需要基于组件的路由、服务器端渲染、代码拆分和其他尖端的功能。你还需要像SEO标签这样的功能。

Nuxt.js通过各种社区插件提供了这些开箱即用的功能，以及更多的功能选项，如PWA。

Vuetify

谷歌的Material Design是一个使用十分广泛的指南，用于构建漂亮的逻辑用户界面，并被用在谷歌的产品（如Android和Web）当中。

Vuetify在一系列Vue组件中实现了Material Design。因此，你可以使用Material Design布局和样式快速构建Vue应用程序，以及模态、警报、导航栏、分页等小部件。

NativeScript-Vue

Vue.js是一个用于构建Web用户界面的库。如果你想将它用于原生移动界面，可以使用NativeScript-Vue框架。

NativeScript是一个用于在iOS和Android上使用原生用户界面组件构建应用程序的系统，而NativeScript-Vue是一个基于NativeScript的框架，提供了Vue的语法和组件的使用方式。

5．杂项

在最后一部分，我们将介绍其他一些内容。

插件开发

如果要在项目中重用Vue功能或为Vue生态系统做贡献，可以将功能作为Vue插件来开发。

动画

如果你需要使用动画，请了解一下Vue的过渡系统，它也是Vue核心的一部分。你可以在向DOM添加元素或从DOM中删除元素时应用动画。

你需要创建CSS类来定义所需的动画效果，无论是淡入淡出、更改颜色还是你喜欢的其他方式。当向DOM中添加元素或从DOM中删除元素时，Vue会检测到这些变更，并在过渡期间添加或删除相应的CSS类。

渐进式Web应用程序

渐进式Web应用程序（PWA）就像普通的Web应用程序一样，只是加入了改进的用户体验。例如，PWA可能包括脱机缓存、服务器端渲染、推送通知等。

大多数PWA功能可以通过Vue CLI 3插件或使用Nuxt.js等框架添加到Vue应用程序中，但你仍然需要了解一些关键技术，包括Web App Manifest和ServiceWorker。