谷歌seo是否支撑vue_干货来了Vue 进修路线图收好

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

浸没在术语和工具的浩瀚海洋中难免会令人感到沮丧，但实在并不是只有你一个人有这种感想熏染，所有履历水平的开拓职员都会持续觉得到这种莫名的压力。

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

0. JavaScript 和基本的 Web 开拓

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

同样，Vue 是一个用于构建 Web 用户界面的 JavaScript 框架。
在开始利用 Vue 之前，你必须理解 JavaScript 和 Web 开拓的根本知识。

如果你是 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。

以上的知识可用于构建高性能的 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 页面并传给用户。

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

到目前为止，我们所看到的统统都来自 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。

构建在 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 的语法和组件的利用办法。

在末了一部分，我们将先容其他一些内容。

插件开拓

如果要在项目中重用 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/