王尘宇

若是你是 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。

英文原文：

https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/