如果你是Vue开发的新手，你可能听过很多关于它的流行语，比如：单页应用、异步组件、服务器端渲染等。你可能也经常听到提到工具和库与Vue一起使用，例如Vuex、Webpack、VueCLI和Nuxt。也许你面对这些不为人知的术语和工具感到无助和绝望，没关系，你并不孤单，因为这是所有新手在第一次接触Vue时都会有的感受。但是，如果你试图一次掌握它们，系统的庞大规模可能会让你不知所措。为此，我在这里向您展示一个“知识图谱”，其中包含专业Vue开发过程中的所有关键部分。2019年学习Vue的过程可以参考这张图指导。0.JavaScript和Web开发基础如果我让你看纯英文的英文书，那你应该先学英文吧？同样，Vue是一个用于构建Web用户界面的JavaScript框架。在开始使用Vue之前，您必须至少具备JavaScript和Web开发的基本知识。一、Vue的基本概念如果你是Vue的新开发者，你应该关注Vue.js生态系统的核心，包括Vue核心库、VueRouter和Vuex。因为在大多数Vue应用中都会用到这些工具。好了，下面开始介绍Vue的一些基本概念。Vue核心功能在基本情况下，Vue使网页和JavaScript保持同步。实现这一目标的功能是响应式数据和模板功能，例如指令和插值。这些就是第一天要学习的内容。在构建您的第一个Vue应用程序之前，您还必须了解如何在网页中安装/使用Vue，并了解Vue的引用实例的生命周期。组件Vue组件是可重用的、独立的UI元素。您需要了解如何声明组件以及如何通过属性和事件在它们之间进行通信。而学会组合组件同样重要，因为它关系到你能否使用Vue构建一个健壮且可扩展的应用程序。单页应用单页应用（SPA）架构决定了你创建的网页可以展示和多页网站一样丰富的内容，并且不会在用户点击链接时重新加载整个页面。这种低效的行为。一旦将“页面”创建为Vue组件，就可以为每个组件使用VueRouter将每个请求映射到唯一的访问路径。VueRouter是由Vue团队维护的用于构建单页应用程序（SPA）工具的工具。状态管理随着项目规模的增长，SPA将在许多页面上拥有越来越多的组件，管理全局状态将变得更加棘手，因为组件变得臃肿，包含大量属性和事件侦听器。一种称为“Flux”的特殊模式可将您的数据保存在稳定的中央存储中。Vuex库也由Vue团队维护，祝你在Vue.js应用程序中实现Flux好运。2.生产环境中的Vue你在***部分学到的所有知识都可以用来构建高性能和高效的Vue应用程序，虽然在你的本地服务器上是允许的，那么，如何保证它们可以在实际生产环境运行吗？如果您要将基于Vue.js的产品带给用户，您还需要了解更多信息，方法如下。项目脚手架如果您需要经常构建Vue应用程序，您会发现几乎每个项目都提供了配置、设置和开发人员工具。Vue团队维护着一个名为VueCLI的工具，可以让你在几分钟内构建一个健壮的Vue开发环境。全栈/经过身份验证的应用程序Vue应用程序通常是数据驱动的用户界面，数据通常来自用Node、Laravel、Rails、Django或其他服务器框架编写的安全API。也许数据是由传统的RESTAPI或GraphQL提供的，或者是WebSockets提供的实时数据。您还应该熟悉通常用于将Vue集成到全栈配置中的设计模式，以及在Vue应用程序中保护用户数据的各种注意事项。如果您正在评估哪种后端产品是您的Vue应用程序开发的最佳选择，这篇文章应该有您的答案。测试如果你想确保你的Vue应用程序在生产中执行可维护和稳定，你需要为你的应用程序提供完整的测试。在Vue应用程序中，单元测试可确保您的组件始终为给定输入（属性或用户输入的内容）提供相同的属性（呈现的HTML或事件）。Vue团队维护着一个名为VueTestUtils的工具，它允许您单独在组件上创建和执行测试。优化当您将应用程序部署到远程服务器时，应用程序的访问速度和执行效率可能不如开发阶段那么快，并且很可能用户访问时速度会很慢。为了提高效率，我们需要优化你的Vue应用。在优化过程中，我们可以使用各种技术，包括服务端渲染。在服务器端渲染中，Vue程序会在服务器端执行，当用户访问时，将渲染后的HTML呈现给用户，从而达到提高访问速度的目的。当然，还包括其他优化技术，例如：异步组件和渲染函数。3.关键工具到目前为止，我们所看到的一切要么来自Vue.js核心，要么来自生态系统中的工具。但是Vue并不是孤立存在的，它只是前端技术栈中的一份子。在高级开发中，你不仅要熟悉Vue，还要熟悉其他一些关键工具，因为它可能在未来成为Vue应用程序的一部分。Vue应用程序可以使用现代JavaScript和BabelES5高效构建，BabelES5是几乎所有浏览器都支持的JavaScript标准。为了增强Vue开发体验并使用最新的浏览器功能，您可以使用最新的JavaScript标准ES2015的功能或ES2016及更高版本的建议功能来构建您的Vue应用程序。如果你选择使用最新的JavaScript特性，那么就会出现与旧版浏览器的兼容性问题，这会导致你的产品失去一些用户。以及如何与旧浏览器兼容？Babel使这成为可能，它的工作是在应用程序发布之前将应用程序中的现代功能“转换”（翻译和编译）为标准功能。WebpackWebpack是一个模块捆绑工具，这意味着如果你的代码是跨不同模块编写的（例如，不同的JavaScript文件），Webpack也可以将这些全部“构建”到一个浏览器可读的文件中。Webpack还可以构建管道，允许您在构建代码之前转换代码。例如，使用前端导轨的Babel、Sass或TypeScript，还有一系列插件可用于优化您的应用程序。许多开发人员发现Webpack难以理解且难以配置，但如果没有它，Vue的一些最佳功能（例如单页组件）将无法实现。我们有一系列关于Webpack的教程，帮助您快速掌握Webpack的使用和配置。TypeScriptTypeScript是JavaScript语言的超集，它包括（String、Boolean、Number等）。有了这样的类型定义，可以确保您可以在开发过程中编写健壮和稳定的代码，并及早发现错误。2019年即将推出的Vue.js3将完全使用TypeScript开发，这并不意味着您必须在Vue项目中使用它。但如果你需要通过阅读Vue的内部代码并加入Vue的开源组织来为其做出贡献，你至少应该了解TypeScript这门语言。4、Vue框架基于Vue创建的框架，免去你从头开始实现服务端渲染、创建自己的组件库等类似工作。目前优秀的Vue框架有很多，这里我们只列出在不同领域使用最广泛的三个框架。Nuxt.js如果要构建一个高性能的Vue应用，还需要基于路由、服务端渲染、代码分离等前沿特性，还需要一些更高级的特性，比如：SEO标记等.你可以使用Nuxt.js框架。Nuxt.js框架通过其丰富的社区插件提供了所有这些开箱即用的功能以及PWA等更多功能。VuetifyGoogle的MaterialDesign标准是一种广泛使用的设计语言指南体系，用于构建美观合理的用户界面，广泛应用于Google的产品，如Android和Web系统。Vuetify框架在Vue组件集合中实现了MaterialDesign。这使您可以使用MaterialDesign布局和样式快速创建Vue应用程序，并在应用程序中实现模态框、提示框、导航栏和分页等页面小部件。NativeScript-VueVue.js是一个用于构建Web用户界面的库。如果你想用它来构建移动应用程序，你可以使用NativeScript-Vue框架。NativeScript是一个在iOS和Android上使用原生用户界面组件构建应用程序的框架，而NativeScript-Vues是一个基于NativeScript的框架，支持Vue语法和Vue组件。5.其他在最后一部分，我们将介绍一些重要但不包括在上述类别中的内容。插件开发如果你想在你的项目中复用Vue功能或者为Vue生态做出贡献，你可以将这些功能打包成插件发布给其他用户。插件功能是Vue的一个重要特性，有很多工具和模板可以帮助你创建轻量高效的Vue代码。动画动画也是Vue核心功能的一部分，允许您在向DOM添加或删除元素时应用动画。为了启用动画，您可以创建CSS类来定义所需的动画效果，无论是淡入淡出、改变颜色还是任何其他效果。Vue会检测何时添加元素以及何时删除元素，添加或删除你设置相应的类。ProgressiveWebAppsProgressiveWebApps(PWA)类似于普通的Web应用程序，但用户体验、性能得到了增强，同时添加了现代功能，例如，PWA包括离线缓存、服务器端渲染、通知推送等。大多数通过VueCLI3的插件或Nuxt.js等框架，可以很方便地将PWA功能添加到Vue应用中，但是仍然需要学习其中的关键技术，包括web应用json清单（minifest）和服务等技术。扩展控件您的应用程序包括电子表格、报告、数据分析、财务图表和在线表单编辑器等需求。可以尝试使用葡萄城的SpreadJS纯前端表单控件和WijmoJS纯前端开发工具包。这两个控件工具完全兼容Vue，可以让你的应用给用户带来更稳定、更高效的体验。
