Vue学习路线图

Vue 概述

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

那么究竟什么是Vue，有什么做用？

Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不一样，Vue被设计为能够自底向上逐层应用。

相比Angular.js来讲，Vue的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue也彻底可以为复杂的单页应用提供驱动。

单独来讲，Vue.js是一个用于构建用户界面的前端库，自己就具备响应式编程和组件化的诸多优势。所谓响应式编程，便是一种面向数据流和变化传播的编程范式，能够在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值经过数据流进行传播。

响应式编程在前端开发中获得了大量的应用，在大多数前端MVX框架均可以看到它的影子。相比较于Angular.js和React.js而言，Vue.js并无引入太多的新概念，只是对已有的概念进行了精简。而且，Vue.js很好的借鉴了React.js的组件化思想，使应用开发起来更加容易，真正实现了模块化开发的目的。

相比于Angular.js和React.js而言，Vue.js一直以轻量级、易上手而被人称道。MVVM的开发模式也使前端从传统的DOM操做中释放出来，开发者不须要再把时间浪费在视图和数据的维护上，只须要关注data的变化便可。而且，Vue的渲染层基于轻量级的virtual-DOM实现，在大多数的场景下初始化速度和内存消耗都提升2-4倍。同时，愈来愈多的移动客户端也开始支持使用Vue.js来进行开发，能够坚信使用Vue.js打造三端一致的Native应用将变成可能。

做为一个新兴的前端框架，Vue.js大量借鉴和参考了Angular.js和React.js等优秀的前端框架。而在版本支持上，Vue.js抛弃了对IE8的支持，对移动端的支持也有必定的要求，也便是说使用Vue.js进行移动跨平台开发时须要Android 4.2+和iOS 7+支持。

若是读者所在的项目是一个先后端分离的项目，亦或者是一个创业项目，想使用Vue.js打造三端一致的Native体验，那么Vue.js将是一个不错的选择。

Vue 线路图

俗话说，一口气吃不成胖子。对于一个新手，又如何学习Vue呢？还须要如何进阶呢？又须要掌握哪些高级知识？为了解答这些疑问，下面看一张Vue的技能图。

JavaScript 与Web基础

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

而且还须要掌握一些 Vue.js 生态系统的核心知识，包括 Vue 核心库、Vue Router 和 Vuex。

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 应用程序，你会发现几乎每一个项目都须要提供配置、设置和开发者工具。

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开发相关的工具和脚手架，能够大大的提升开发效率。

JavaScript 和 Babel

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

不过，若是你选择使用现代 JavaScript，就须要提供一种支持旧版浏览器的方法，不然你的产品可能没法为大多数用户提供服务。

要实现这一目的，您可使用 Babel。它的做用是在应用程序发布以前将你的现代功能“转换”（翻译和编译）为标准语法，如将ES6翻译为浏览器可以识别的ES5。

WebPack

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

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

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

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

这是否意味着你不须要学习 Webpack 了？固然不是，由于你仍然不可避免地须要进行定制或调试 Webpack 配置。

TypeScript

TypeScript 是 JavaScript 语言的超集，本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。为咱们提供了类型（如String、Boolean、Number 等），这样咱们就能够编写健壮的代码，并尽早发现错误。

将于 2019 年推出的Vue.js 3版本 ，将彻底使用 TypeScript 编写。所以学习TypeScript显得颇有必要。

Vue 的框架

构建在 Vue 之上的框架可让你无需从头开始实现服务器端渲染，还能够建立本身的组件库以及定制不少其余常见的任务。

Nuxt.js

若是你想要构建一个高性能的 Vue 应用程序，就须要基于组件的路由、服务器端渲染、代码拆分和其余功能进行实习。

Nuxt.js 做为一个基于 Vue.js 的轻量级应用框架,可用来建立服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具备优雅的代码结构分层和热加载等特性。

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

Vuetify

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

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

Vuetify支持SSR(服务端渲染)，SPA(单页应用程序)，PWA(渐进式web应用程序)和标准HTML页面。

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。

若是你对PWA有兴趣，那么推荐您查看一些PWA的官网介绍。