2019年的Vue发展：你需要了解的内容

Posted 2021-04-16 21CTO

如果你是Vue开发的新手，您可能听说过许多术语，比如单页面应用程序、异步组件、服务器端呈现等等。您可能还听说过与Vue一起经常提到的工具和库，如Vuex、Webpack、Vue CLI和Nuxt。

也许您会发现这无数的术语和工具是一种挫折。你并不孤单;所有经验级别的开发人员都感受到了来自他们不知道的东西的持续压力，并且觉得他们应该知道。

尝试一次学习所有内容将是压倒性的，而且没有效果，所以我在这里展示一个高层次的“知识地图”，它捕捉了专业Vue开发的关键领域。你可以用这张地图在2019年为你自己的学习设定目标。

0. javascript和基本的web开发

如果我让你学习一本用中文写的书里的所有内容，你首先要学会读中文，对吧?

类似地，Vue是一个用于构建web用户界面的JavaScript框架。在使用Vue之前，您必须了解JavaScript和web开发的基础知识。

1. Essentials Vue概念

如果您是一个新的Vue开发人员，您应该关注Vue.js生态系统的核心，包括Vue核心库、Vue路由器和Vuex。

这些工具将在大多数Vue应用程序中提供功能，并提供此地图的其他大部分领域所构建的框架。

Vue核心功能

最基本的是，Vue用JavaScript同步web页面。实现这一点的关键特性是反应性数据，以及指令和插值之类的模板特性。这些都是第一天要学习的东西。

要构建您的第一个Vue应用程序，您还需要知道如何在web页面中安装Vue，并了解Vue实例的生命周期。

组件

Vue组件是可重用的，独立的UI元素。您需要了解如何声明组件，以及如何通过道具和事件在它们之间进行通信。

学习如何使用组件进行组合也很重要，因为这是使用Vue构建健壮的、可伸缩的应用程序的基础。

单页面应用程序

单页面应用程序(SPA)架构允许单个web页面像传统的多页面网站一样工作，而无需在每次用户导航时重新加载和重建页面。

一旦您将“页面”创建为Vue组件，就可以使用Vue Router将每个页面映射到一个唯一的路径，Vue Router是一个用于构建由Vue团队维护的SPA的工具。

状态管理

随着应用程序变得越来越大，SPA的许多页面上都有许多组件，管理全局状态变得很棘手，组件也变得充斥着道具和事件监听器。

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

2.真实世界的Vue

从第1部分中获得的所有知识都可以用于构建高性能和高效的Vue应用程序，尽管是在本地服务器上。不过，它们将如何在生产中站稳脚跟呢?

如果您想将基于Vue.js的产品发送给真实用户，您需要了解更多信息！

项目脚手架

一旦你频繁地构建Vue应用程序，你会发现几乎每个项目中都有配置、设置和开发工具。

Vue团队维护一个名为Vue CLI的工具，该工具允许您在几分钟内启动一个健壮的Vue开发环境。

全栈/经过身份验证的应用程序

真正的Vue应用程序通常是数据驱动的用户界面。这些数据通常来自由Node、Laravel、Rails、Django或其他服务器框架构成的安全API。

可能数据将由传统的REST API或GraphQL提供，也可能是通过web套接字提供的实时数据。

您还应该熟悉通常用于将Vue集成到全堆栈配置中的设计模式，以及保持Vue应用程序中的用户数据安全的各种考虑因素。

测试

如果您想要在生产中生成既可维护又稳定的Vue应用程序，那么您确实需要提供测试。

在Vue应用程序中，单元测试确保组件总是为给定的输入(即道具或用户输入)提供相同的输出(即重新编码的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配置。

TypeScript

TypeScript是JavaScript语言的超集，包括类型(字符串、布尔值、数字等)。这样做的目的是帮助您编写健壮的代码并尽早捕获bug。

Vue.js 3将于2019年发布，将完全用TypeScript编写。这并不意味着您必须在您的Vue项目中使用它，但这确实意味着如果您想对Vue做出贡献并理解其内部工作原理，那么您需要理解TypeScript。

4. Vue框架

框架已经构建在Vue之上，使您不必从头实现服务器端呈现、创建自己的组件库和许多其他常见任务。

有许多优秀的Vue框架，但是这里我们将提到三个应用最广泛且最重要的框架。

Nuxt.js

如果您想要构建高性能的Vue应用程序，当然，您需要基于组件的路由、服务器端呈现、代码分割和其他前沿特性。您还需要方便的生产特性，比如SEO标签。

该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上的本机用户界面组件构建应用程序的系统，而NativeScript-Vue是一个基于NativeScript的框架，提供Vue语法和组件的使用。

5. 杂项

在最后一节中，我们将讨论一些重要的主题，但是它们不是必需的，或者不属于上面的类别。

插件开发

如果您想在您的项目中重用Vue功能，或者为Vue生态系统做出贡献，您可以将一个特性作为Vue插件安装。

插件是Vue核心的一个特性，但也有各种工具和样板可以帮助您创建可移植的Vue代码。

动画

如果您喜欢动画，请查看Vue的转换系统，它也是Vue核心的一部分。转换允许您在向DOM添加或删除元素时应用动画。

要进行转换，您需要创建CSS类来定义所需的动画效果，无论是淡入、更改颜色还是您喜欢的任何内容。Vue将检测元素何时添加或从DOM中删除，并在转换期间添加或删除适当的类。

渐进式Web应用程序

渐进式Web应用程序(PWAs)与普通的Web应用程序类似，但已经通过改进用户体验的现代功能得到了增强。例如，PWA可能包括离线缓存、服务器呈现、推送通知等。

大多数PWA功能可以通过Vue CLI 3插件或使用Nuxt.js等框架轻松添加到Vue应用程序中，但您仍应了解关键技术，包括Web应用程序清单和服务工作者。

以上就是2019年的Vue发展：您需要了解的内容的详细内容，更多请关注html中文网其它相关文章！