如果你是Vue开发的新手，你或许已经听说过很多专业术语，诸如单页面应用，异步组件，服务端渲染等等。

您可能还听说过很多与Vue一起经常被提到的工具和库，比如Vuex, webpack, Vue Cli和Nuxt。

也许你会觉得这无数的术语和工具令人沮丧。你不是一个人这样;各个层次的开发人员都会感受到来自他们所不知道的技术的持久压力，感觉他们应该知道(这些技术)。

试图一次学会所有东西是毫无效果的，因此我在这里将展示一个高阶"知识图谱"，它选取了专业Vue开发的关键部分。你可以使用这张图谱为你2019年的学习确定目标。

0.JavaScript和基本的web开发

如果我让你在一本用英语写的书中学习所有这些，你首先必须先学习阅读英语，对吧？(注：原文是阅读汉语，此处根据作者意图改为阅读英语)

类似的，Vue是一个用于构建web用户界面的JavaScript框架。在你使用Vue之前，你必须了解JavaScript和web开发基础。

1.必要的Vue概念

如果你是个Vue开发的菜鸟，你应该首先关注Vue.js的核心生态圈，包括 Vue核心库， Vue Router和Vuex.

这些工具将在大多数Vue应用程序中发挥作用，并提供此地图的其他大多数部分所依赖的框架。

Vue核心特性

在最基本的情况下，Vue将web页面与JavaScript保持同步。实现这一点的关键特性是响应式数据和诸如指令和插值这样的模板特性。这些都是第一天要学习的东西。

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

组件

Vue组件是可复用的、独立的UI元素。你需要知道如何生命组件，以及如何使用属性和事件实现组件间交互。

以及学习如何组合组件也很重要，这是使用Vue构建稳定的、可扩展的应用的基础。

单页面应用

单页面应用(SPA)结构允许一个单独的web页面表现的传统多页面网站一样，而无需用户每次导航时都重载和重构页面。

一旦你将你的"页面"创建为Vue 组件，你可以将每一个组件使用Vue Router, 一个由Vue团队维护的用于构建单页面应用的工具，映射到一个独一无二的路径(path)上。

状态管理

随着应用程序规模的扩大，SPA的许多页面上都有着大量组件，管理全局状态变得很棘手。组件因使用大量属性和事件监听器而变得臃肿。

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

实际项目中的Vue

你在Part1中获得的所有知识可以被用来构建高性能高效率的Vue应用，虽然是运行在你的本地服务上。然而，如何确保应用在生产环境中稳定运行呢？

如果你想将基于Vue构建的产品交付给真实用户，你还需要知道更多！

项目脚手架

如果你频繁构建Vue应用，你会发现，几乎每个项目中都会用到一些配置、设置和开发工具。

Vue团队维护一个名为Vue CLI的工具，它帮助你在几分钟内构建一个稳定可靠的Vue开发环境。

全栈/已验证app(Full-stack/authenticated apps)

真实的Vue应用通常是数据驱动型用户界面，这些数据通常来自由Node、Laravel、Rails、Django或其他服务器框架编写的安全的API。

或许这些数据由传统的REST API或者GraphQL提供，也或许它们是通过websocket传过来的实时数据。

另外你还应该熟悉通常用于将Vue集成到全堆栈配置中的设计模式，以及在Vue应用程序中保护用户数据安全的各种考虑。

如果正试着决定什么后端最适合你的下一个Vue应用程序，请查看本文。

测试

如果你想要在生产环境中构建可维护的可靠的Vue应用，你确实需要提供测试。

在Vue应用中，单元测试确保你的组件总是为给定的输入（也就是属性或用户的输入）提供相同的输出（也就是渲染好的HTML或者事件）。

Vue团队维护一个名为 Vue Test Utils的工具，它允许你在独立的组件中创建和运行测试。

虽然E2E测试与Vue不是特别相关，但它也可以使你的项目更加稳定。Cypress是一个很好的E2E工具，可以通过Vue CLI 3将其添加到项目中。

优化

当你将你的应用部署到远程服务器，用户通过缓慢的链接访问时，它不会有你在开发环境中测试时所体验到的速度和效率。

为了优化Vue app,你可以会使用包括服务端渲染在内的各种技术。在服务端渲染中，Vue程序在服务器端被运行，运行结果被合成到HTML中呈现给用户。

其他优化技术包括异步组件和渲染功能。

3.主要工具

目前为止我们看到的每一项技术都来自Vue.js核心库，或者来自Vue生态系统的工具。 但是Vue不是独立存在的，它只是前端技术栈中的一部分。
高级开发者不应该仅仅熟悉Vue， 还要熟悉一些关键工具，他们将成为Vue项目的一部分。

现代JavaScript和Babel

使用ES5可以有效构建Vue应用，这是被当前几乎每一个浏览器所支持的JavaScript标准。

为了提高Vue开发体验，使用最新的浏览器功能，你可以使用最新的JavaScrip标准ES2015(也就是ES6)中的特性和ES2016及更高版本中的提议特性来构建你的Vue应用。

然而，如果你选择使用现代JavaScript，你将需要一种方式来支持旧的浏览器，否则你的产品将无法为大部分用户服务。

Babel就是为实现这一个工能而生的工具。它的工作就是在你的应用被交付之前将现代特性"转 译"（转化和编译）为标准特性。

Webpack

Webpack是一个模块打包器，这个意思是，如果你的代码是写在不同的模块中（例如，不同的JavaScript文件），Webpack可以将他们构建进一个单一的可被浏览器识别的文件中。

Webpack还可以用作构建流水线，允许你在app打包.之前转换代码，例如，配置使用Babel、Sass或TypeScript，还可以使用一系列插件优化应用程序。

很多开发者发现webpack很难理解，更难配置。但是没有它，Vue的一些最好特性，比如单文件组件，将无法实现。

在最近发布的Vue CLI3中，提供了一种在Vue项目中抽象和自动配置Webpack的解决方案。
这是不是就意味着你不需要去学习它了？不！因为总会有一些必不可免的场景需要你去定制和调试Webpack配置。

TypeScript

TypeScript是JavaScript语言的超集，包含了类型（字符串，布尔，数值等等）。它的目的是帮助你书写稳定可靠的代码，在项目早期捕获bug。

即将在2019年推出的Vue.js3将全部使用TypeScript编写。这并不意味着你必须在你的Vue项目中使用它，但这意味着如果你想为Vue做出贡献，理解它的颞部工作原理，你需要理解TypeScript。

4. Vue框架

基于Vue创建的框架，使你不必从头实现服务端渲染、创建自己的组件库以及其他诸如此类相似的工作。

当前有很多优秀的Vue框架，但在这里我们将介绍其中被广泛使用的很重要的三个框架。

Nuxt.js

如果您想构建高性能的Vue应用程序，当然，您需要基于组件的路由、服务器端呈现、代码分离和其他前沿特性。您还需要一些方便的产品特性，比如SEO标记。

Nuxt.js框架通过其丰富的社区插件提供了所有这些开箱即用的特性，以及更多的特性(如PWA)选项。

如果你想看一个Nuxt.js网站的例子，那你正在做这件事情。

（注：本文摘自 https://vuejsdevelopers.com/网站，由Nuxt.js构建）

Vuetify

谷歌的Material Design标准是一个广泛使用的设计语言指导系统，用于构建美观的、合乎逻辑的用户界面。它被广泛使用在谷歌的产品中，比Andorid和web网站。

Vuetify使用一系列Vue组件实现了Material Design。它允许你使用Material Design的布局和样式，再加上诸如模态框/弹窗/导航条/分页器等的插件，快速构建Vue应用。

NativeScript-Vue

Vue.js是一个用于构建web用户界面的库，如果你想讲它用在原生移动界面，你可以使用NativeScript-Vue来实现。

NativeScript 是一个使用IOS和Android上的原生用户界面组件构建app的系统，而NativeScript-Vue是基于NativeScript的框架，提供了对Vue语法和组件的支持。

其他

在这最后一部分，我们将涉及一些重要但不必要，或者不适合上述分类的概念。

插件开发

如果你想在你的整个项目中复用Vue功能，或者想为Vue生态系统做出贡献，你可以让一个特性以Vue插件的形式安装。

插件是Vue核心库的一个特性，但也有丰富的工具和样板文件可以帮助你创建轻便的Vue代码。

动画

如果您喜欢动画，请查看Vue的过渡系统(transition system)，它也是Vue核心的一部分。过渡系统允许你在任何向DOM中添加或从DOM中删除元素时应用动画。

为了制作一个过渡效果，你需要些一些css类来定义想要的动画效果，无论它是淡入/淡出、改变颜色还是任何你喜欢的。Vue会在一个元素从DOM中添加或移除时检测，然后会在添加时添加或移除对应的css类。

渐进式web应用

渐进式Web应用(PWA)与普通的Web应用类似，但性能已经通过改进用户体验的现代功能得到了增强。例如，一个PWA或许包含了离线缓存、服务端渲染、消息推送等等功能。

大部分PWA功能可以通过Vue CLI3插件或诸如Nuxt.js之类的框架轻松添加到vue应用中，但你仍然应该理解其中的关键技术，包括web应用清单(manifest)和服务。

关于本文
作者：@Anthony Gore
原文：https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map