2019 Vue开发指南：你都须要学点啥？

若是您是Vue开发的新手，您可能已经听过不少关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等。

另外您可能还常常听到和Vue一块儿提到的工具和库，如Vuex、Webpack、Vue CLI和Nuxt。

也许您在面对这些未知的术语和工具时会感到无助和绝望，不要紧，您并不孤单，由于这是全部新手在初次接触Vue时都会有的感觉。

但若是您试图要一次掌握全部这些内容，那么这些庞大的体系极可能会压垮你。为此，我在这里将为你们展现一个“知识图表”，它包含了全部在专业Vue开发过程当中的关键部分。您能够参考这个图为您在2019学习Vue的过程当中指引方向。

0. JavaScript和Web开发基础

　　若是我让你用英文去阅读纯英文书籍，那么你应该先要学习英文，对吗？

一样，Vue是一个用于构建Web用户界面的JavaScript框架。在开始使用Vue以前，您至少必须先要掌握JavaScript和Web开发的基础知识。

 

1. Vue的基础概念

　　若是您是一个Vue的萌新开发，您应该专一于Vue.js 生态系统的核心，其中包括Vue核心库，Vue Router和Vuex。由于这些工具将会在绝大部分的Vue应用程序中应用。好的，那咱们开始介绍关于Vue的一些基础概念。

Vue核心功能

　　在基础状况下，Vue将网页和JavaScript保持同步，实现这一目标的特性是响应式数据及指令和插值等模板功能，这些都是第一天要学习的内容。

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

组件

　　Vue的组件是可重复使用，并相互独立的UI元素。您须要了解，如何声明组件，以及如何经过属性和事件使组件间通讯。

而且学会组合组件也一样重要，由于这关乎着你是否可以使用Vue构建出一个健壮、可扩展应用程序。

单页面应用程序

　　单页面应用程序（SPA）架构决定了您建立的Web页面同样可以展现和多页面网站同样丰富的内容，且不会当用户在点击连接后从新加载整个页面等这样低效的行为。

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

状态管理

　　随着项目规模愈来愈庞大， SPA的许多页面上将会有愈来愈多的组件，管理全局状态也将变得愈加棘手，组件由于大量的属性和事件监听器而变得臃肿。

一种称为“Flux”的特殊模式可将您的数据保存在稳定的中央存储中。Vuex库也由Vue团队维护，可祝您在Vue.js 应用程序中实现Flux。

 

2. 生产环境中的Vue

　　您从第一部分得到的全部知识均可用于构建高性能和高效的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.js核心，或来自生态系统中的工具。但Vue不是孤立存在的，它只是前端技术栈中其中的一块。

高级开发中不该该仅仅熟悉Vue，还要熟悉一些其余关键工具，由于它可能将成为将来Vue应用其中的一部分。

现代JavaScript和Babel

　　ES5能够有效构建Vue应用程序，ES5几乎是全部浏览器都支持的JavaScript标准。

为了加强Vue的开发体验，并使用最新的浏览器功能，您可使用最新的JavaScript

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

若是选择使用了最新的JavaScript特性，那么其中旧版浏览器将会出现兼容问题，这会形成您的产品将会损失掉一部分用户。

而如何对旧浏览器作兼容呢？ Babel 能够实现这个目的，它的职责就是在应用程序发布前将您应用程序中现代特性“转换”（翻译和编译）为标准功能。

Webpack

　　Webpack是一个模块打包工具，意思是若是您的代码跨不一样模块编写的（例如，不一样的JavaScript文件），Webpack也能够所有将这些内容“构建”到一个浏览器可读的单个文件中。

Webpack 还能够构建流水线，它容许您在构建代码前进行转换。例如，使用前面铁道的Babel，Sass或TypeScript，还可使用一系列插件来优化您的应用程序。

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

TypeScript

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

即将于2019年推出的Vue.js 3将彻底用TypeScript开发，这并不意味着您必须在Vue项目中使用它。但假如您须要经过阅读Vue的内部代码并加入Vue的开源组织为其贡献力量，您至少也是应该要了解TypeScript这个语言的。

 

4. Vue框架

　　基于Vue建立的框架，使您无需从头开始实现服务端渲染，建立本身的组件库以及其余相似的工做。

目前有许多优秀的Vue框架，但在这，咱们只列出了应用在不一样领域最为普遍的三个框架。

Nuxt.js

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

Nuxt.js框架经过其丰富的社区插件提供了全部这些开箱即用的特性，以及更多的特性，如PWA等。

Vuetify

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

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

NativeScript-Vue

　　Vue.js 是一个用于构建Web用户界面的库。若是您想将他用于构建移动应用，您可使用NativeScript-Vue框架。

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

 

5. 其余

　　在最后一部分中，咱们将介绍一些重要但不包含在上述分类中的内容。

插件开发

　　若是您要在项目中重用Vue功能，或为Vue生态作出贡献，您能够把这部分功能打包成插件并发布给其余用户。

插件功能是Vue的一个重要特性，有不少工具和模板能够帮助您建立轻便高效的Vue代码。

动画

　　动画也是 Vue核心功能的一部分，它容许您在向DOM中添加或删除元素时应用动画。 为了启用一个动画，您能够建立CSS类来定义所需的动画效果，不管是淡入淡出、更改颜色仍是任何其余效果。Vue将检测当添加元素和删除元素时，添加或删除您设置相应的类。

渐进式Web应用程序

　　渐进式Web应用程序（PWA）与普通的Web应用程序相似，但用户体验、性能已经获得了加强，同时还增长了现代功能，例如，PWA包括离线缓存、服务端渲染、通知推送等。

大部分PWA功能能够经过Vue CLI 3插件或主入Nuxt.js之类的框架轻松添加到Vue应用中，但您最好仍然须要去学习其中的关键技术，包括Web应用json清单（minifest）和服务等技术。

扩展控件

您的应用中如包含有电子表格、报表、数据分析、金融图表、在线表格编辑器等需求。能够尝试使用葡萄城的SpreadJS纯前端表格控件、WijmoJS纯前端开发工具包，这两款控件工具都完美兼容Vue，可以使您的应用为用户带来更稳定、更高效的使用体验。

 

 

转自：葡萄城官网