作为 vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步元件、服务器端呈现等，您可能还听过和 Vue 经常一起被提到的工具和库，如 Vuex、Webpack、Vue CLI 和 Nuxt。

面对这些海量、未知的专业术语和工具，您很可能会感到无助和绝望，没关系，这是所有新手在初次接触 Vue 时都会有的感受。

Vue 庞大的体系和生态，很可能会让您无所适从。为了便于您更清晰的理解 Vue 的体系架构，在这里我将为您展示 “2019年 Vue 开发者知识图谱”，它包含了所有 Vue 开发过程中的关键部分。

您可以参考这个图谱，为您在未来学习 Vue 的框架指引方向。

Vue 开发者2019知识图谱

0. JavaScript 和 Web 开发基础

同样，Vue 是一个用于构建 Web 使用者界面的 JavaScript 框架。

在开始使用 Vue 之前，您至少必须先掌握 JavaScript 和 Web 开发的基础知识。

1. Vue 的基本概念

Vue 核心功能 在一般情况下，Vue 将网页和 JavaScript 保持同步，实现这一目标的特性是响应式资料指令和插值等模板功能，这些都是第一天需要学习的内容。

在构建你的第一个 Vue 应用之前，你还必须要去了解如何在网页中安装/使用 Vue，以及了解 Vue 引用例项的生命周期。

元件Vue 的元件是可重复使用、且相互独立的 UI 元素。您首先需要学习，如何宣告元件，及如何通过属性和事件使元件间达成通讯。同时，学会组合元件也同样重要，这决定了你能否使用 Vue 构建出一个健壮、可扩充套件的 Web 应用程序。

单页面应用程序单页面应用程序（SPA）架构，决定了你建立的 Web 页面能够展示和多页面网站一样丰富的内容，且不会发生在使用者点选连结后重新载入整个页面这样低效的行为。

一旦您将您的“页面”建立成了一个 Vue 元件，您可以为每一个元件使用 Vue Router，将每个请求对映到一个唯一的访问路径上，Vue Router 是一个由 Vue 团队维护的用于构建单页面应用程序（SPA）的工具。

状态管理随着专案规模越来越庞大， SPA 的页面上将会有越来越多的元件，管理全域性状态也将变得愈发棘手，元件因为大量的属性和事件监听器而变得臃肿。

为应对上述情况，你的需要开始了解 Vue 的状态管理：一种被称为“Flux”的特殊模式，可将您的资料储存在稳定的中央储存中。Flux 可通过 Vuex 库来实现，该库由 Vue 团队维护。

2. 生产环境中的Vue

那么，如何确保他们能够在实际生产环境下执行呢？

如果您要把基于 Vue.js 的产品推向使用者，您还需要了解更多内容，以下将为您介绍。

专案脚手架如果您需要经常构建 Vue 应用程序，您会发现几乎每个专案都会提供配置、设定和开发人员工具。

Vue 团队维护了一个名为 Vue CLI 的工具，它可以让您在几分钟内构建一个强大的 Vue 开发环境。

全栈 / 认证应用程序Vue 应用是资料驱动型的使用者界面，资料通常由 Node、Laravel、Rails、Django

或其他服务器框架编写的安全 API 作为来源，大部分资料是由传统的 REST API 或 GraphQL 提供，再或者是 Web Socket 提供的实时资料。

您应该熟悉这些用于将 Vue 整合到全堆叠配置中的设计模式，以及在 Vue 应用程序中保护使用者资料安全的各种注意事项。

如果您正在评估什么后端产品是您开发 Vue 应用时的最好选择，那么这篇文章中应该有您的答案。(后续会翻译)

测试如果您想确保您的 Vue 应用程序在生产环境中表现的既可维护又稳定，您需要对您的应用提供完整的测试。

在 Vue 应用程序中，单元测试可确保您的元件始终为给定的输入（属性或使用者输入的内容）提供相同的输出（渲染好的 HTML 或事件）。

Vue 团队维护着一个名为 Vue Test Utils 的工具，它允许您对元件单独建立和执行测试过程。

优化手段当您将应用程序部署到远端服务器后，这个应用的访问速度和执行效率很可能不会像在开发阶段表现的那样迅速，很可能当用户访问时速度会变得很慢。

为了提升效率，我们需要优化 Vue 应用，优化过程可以采用多种技术，如服务端渲染。

在服务端渲染中，Vue 程式将在服务端执行，在使用者访问时，将渲染完成的 HTML 呈现给使用者，从而达到提升访问速度的目的。

当然，优化手段不局限于这一种，还包括：异步元件和渲染功能。

3. 关键工具

在高阶开发领域不应该仅仅熟悉 Vue，还要熟悉一些其他关键工具，因为它可能将成为未来 Vue 应用的重要组成部分。

现代 JavaScript 和 BabelES5 可以有效构建的 Vue 应用程序，也几乎是所有浏览器都支援的 JavaScript 标准。

为了增强 Vue 的开发体验，使用最新的浏览器功能，您可以借助最新的 JavaScript

标准（ES2015 的特性或 ES2016 及更高版本的全新功能）来构建您的 Vue 应用程序。

注意：如果您选择使用了最新的 JavaScript，那么旧版浏览器将会出现相容问题，这很可能会造成您的产品损失掉一部分使用者。

如何对旧浏览器做相容呢？

Babel 可以实现这个目的，它的职责就是在应用程序释出前将您应用程序中现代的特性“转换”（翻译和编译）为标准功能。

WebpackWebpack 是一个模组打包工具，意思是如果您的程式码是由跨不同模组编写的（例如，不同的 JavaScript 档案），Webpack 也可以将这些内容“打包”到同一浏览器可读的单个档案中。

Webpack 还可以构建流水线，它允许您在构建程式码前进行转换。例如，使用前面提到的 Babel、Sass 或 TypeScript，还可以使用一系列外挂来优化您的 Web 应用程序。

许多开发者认为 Webpack 很难理解，也很难配置，但如果没有它，Vue 的一些特性功能（如：单页面元件）将无法实现。我们有关于 WebPack 的系列教程，助您快速掌握 Webpack 的使用和配置。

TypeScriptTypeScript 是 JavaScript 语言的超集，它包含了（String、Boolean、Number 等）。有了这样的定义，能保证您在开发期间就能编写出健壮且稳定的程式码，并尽早发现错误。

即将于2019年推出的 Vue.js 3 将完全用 TypeScript 编写，这并不意味着您必须在 Vue 专案中使用它。但假如您需要通过阅读 Vue 的内部程式码并加入 Vue 的开源组织为其贡献力量，您至少也应提前了解 TypeScript。

4. Vue框架

目前有许多优秀的 Vue 框架，这里，我们只列出了应用在不同领域最为广泛的三个框架。

Nuxt.js如果你想要构建一个高效能的 Vue 应用程序，基于路由、服务端呈现、程式码分离和其他前沿特性，同时还需要一些更高阶的功能，例如：SEO 标记等。您可以使用 Nuxt.js 框架。

Nuxt.js 框架通过其丰富的社群外挂提供了所有这些开箱即用的特性，甚至更多，如 PWA等。

VuetifyGoogle 的 Material Design 标准是一个广泛使用的设计语言指南系统，它用于构建漂亮并合理的使用者界面，这些界面被广泛应用于 Google 的产品，如 Android 和 Web 系统。

Vuetify 框架在一系列 Vue 元件中实现了 Material Design。这允许您使用 Material Design布局和样式快速建立 Vue 应用程序，并在应用程序中实现模态框、提示框、导航栏、分页等页面小控制元件。

NativeScript-VueVue.js 是一个用于构建 Web 使用者界面的 UI 库。如果您想将他用于构建移动应用，可以使用 NativeScript-Vue 框架。

NativeScript 是一个使用 iOS 和 Android 原生使用者界面元件构建应用app的框架，而 NativeScript-Vues 是基于 NativeScript 且支援 Vue 语法和 Vue 元件使用的框架。

5. 支援Vue的控制元件/元件

纯前端表格控制元件SpreadJS

SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控制元件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，满足 .NET、Java、响应式 Web 应用及移动跨平台的表格资料处理和类 Excel 的表格应用开发，实现线上 Excel 体验。

SpreadJS 在资料展示、前端汇入汇出、图表面板、资料系结等场景无需大量程式码开发和测试，可极大节省企业研发成本并降低交付风险。

前端开发工具包 WijmoJS

WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控制元件组成，如表格控制元件 FlexGrid、图表控制元件 FlexChart、资料分析 OLAP 等，完美支援原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可用于企业快速构建桌面、移动 Web 应用程序。

WijmoJS 凭借其先进的体系架构、简单易学的使用文件、超过 500 种 Demo 演示、顶级的控制元件效能，以及轻松、易用的操作体验，可全面满足企业前端开发所需，是构建企业级 Web 应用程序最高效的纯前端开发工具包。

6. 其他专案

外挂开发如果您要在专案中重用 Vue 功能，或为 Vue 生态做出贡献，您可以把这部分功能打包成外挂并发布给其他使用者。

外挂功能是 Vue 的一个重要特性，有很多工具和模板都可以帮助您建立轻便高效的 Vue 程式码。

动画动画也是 Vue 核心功能的一部分，它允许您向 DOM 中新增或删除元素时应用动画。 为了启用一个动画，您可以建立 CSS 类来定义所需的动画效果，无论是淡入淡出、更改颜色还是任何其他效果。Vue 将在新增或删除元素时，同时新增或删除您设定相应的类。

渐进式Web应用程序（PWA）渐进式Web应用程序（PWA）与普通的 Web 应用程序类似，但使用者体验、效能已经得到了增强，同时还增加了部分现代功能，如，离线快取、服务端渲染、通知推送等。

大部分 PWA 功能可以通过 Vue CLI 3 外挂或注入 Nuxt.js 之类的框架新增到 Vue 应用中，但您仍需学习其中的关键技术，包括 Web 应用 json 清单（minifest）和服务等。

扩充套件控制元件在您的 Web 应用中，如有电子表格、报表、资料分析、金融图表、线上表格编辑等需求，可以使用上文提到的支援 Vue 框架的控制元件和元件包，除了无需考虑相容性问题外，这些控制元件可使您的 Web 应用为使用者带来更稳定、更高效的使用体验。

关于葡萄城

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智慧解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的资讯化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控制元件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和-机构广泛应用。