作为 vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和 Vue 经常一起被提到的工具和库，如 Vuex、Webpack、Vue CLI 和 Nuxt。
面对这些海量、未知的专业术语和工具，您很可能会感到无助和绝望，没关系，这是所有新手在初次接触 Vue 时都会有的感受。
Vue 庞大的体系和生态，很可能会让您无所适从。为了便于您更清晰的理解 Vue 的体系架构，在这里我将为您展示 “2019年 Vue 开发者知识图谱”，它包含了所有 Vue 开发过程中的关键部分。
您可以参考这个图谱，为您在未来学习 Vue 的框架指引方向。
Vue 开发者2019知识图谱
如果我让你去阅读纯英文书籍，那么你应该先学习英文，对吗？
同样，Vue 是一个用于构建 Web 用户界面的 JavaScript 框架。
在开始使用 Vue 之前，您至少必须先掌握 JavaScript 和 Web 开发的基础知识。
如果您是一名 Vue 的萌新开发者，您应该更专注于 Vue.js 生态系统的核心，它包括 Vue 核心库、Vue Router 和 Vuex。因为这些工具将会在绝大部分的 Vue 应用程序中出现。
在一般情况下，Vue 将网页和 JavaScript 保持同步，实现这一目标的特性是响应式数据指令和插值等模板功能，这些都是第一天需要学习的内容。
在构建你的第一个 Vue 应用之前，你还必须要去了解如何在网页中安装/使用 Vue，以及了解 Vue 引用实例的生命周期。
Vue 的组件是可重复使用、且相互独立的 UI 元素。您首先需要学习，如何声明组件，及如何通过属性和事件使组件间达成通信。同时，学会组合组件也同样重要，这决定了你能否使用 Vue 构建出一个健壮、可扩展的 Web 应用程序。
单页面应用程序（SPA）架构，决定了你创建的 Web 页面能够展示和多页面网站一样丰富的内容，且不会发生在用户点击链接后重新加载整个页面这样低效的行为。
一旦您将您的“页面”创建成了一个 Vue 组件，您可以为每一个组件使用 Vue Router，将每个请求映射到一个唯一的访问路径上，Vue Router 是一个由 Vue 团队维护的用于构建单页面应用程序（SPA）的工具。
随着项目规模越来越庞大， SPA 的页面上将会有越来越多的组件，管理全局状态也将变得愈发棘手，组件因为大量的属性和事件监听器而变得臃肿。
为应对上述情况，你的需要开始了解 Vue 的状态管理：一种被称为“Flux”的特殊模式，可将您的数据保存在稳定的中央存储中。Flux 可通过 Vuex 库来实现，该库由 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 呈现给用户，从而达到提升访问速度的目的。
当然，优化手段不局限于这一种，还包括：异步组件和渲染功能。
到目前为止，我们所掌握的知识皆来自于 Vue.js 核心和生态系统中的工具。但 Vue 并不是孤立存在的，它只是前端技术栈的一部分。
在高级开发领域不应该仅仅熟悉 Vue，还要熟悉一些其他关键工具，因为它可能将成为未来 Vue 应用的重要组成部分。
ES5 可以有效构建的 Vue 应用程序，也几乎是所有浏览器都支持的 JavaScript 标准。
为了增强 Vue 的开发体验，使用最新的浏览器功能，您可以借助最新的 JavaScript
标准（ES2015 的特性或 ES2016 及更高版本的全新功能）来构建您的 Vue 应用程序。
注意：如果您选择使用了最新的 JavaScript，那么旧版浏览器将会出现兼容问题，这很可能会造成您的产品损失掉一部分用户。
如何对旧浏览器做兼容呢？
Babel 可以实现这个目的，它的职责就是在应用程序发布前将您应用程序中现代的特性“转换”（翻译和编译）为标准功能。
Webpack 是一个模块打包工具，意思是如果您的代码是由跨不同模块编写的（例如，不同的 JavaScript 文件），Webpack 也可以将这些内容“打包”到同一浏览器可读的单个文件中。
Webpack 还可以构建流水线，它允许您在构建代码前进行转换。例如，使用前面提到的 Babel、Sass 或 TypeScript，还可以使用一系列插件来优化您的 Web 应用程序。
许多开发者认为 Webpack 很难理解，也很难配置，但如果没有它，Vue 的一些特性功能（如：单页面组件）将无法实现。我们有关于 WebPack 的系列教程，助您快速掌握 Webpack 的使用和配置。
TypeScript 是 JavaScript 语言的超集，它包含了（String、Boolean、Number 等）。有了这样的定义，能保证您在开发期间就能编写出健壮且稳定的代码，并尽早发现错误。
即将于2019年推出的 Vue.js 3 将完全用 TypeScript 编写，这并不意味着您必须在 Vue 项目中使用它。但假如您需要通过阅读 Vue 的内部代码并加入 Vue 的开源组织为其贡献力量，您至少也应提前了解 TypeScript。
基于 Vue 创建的框架，使您无需从头开始实现服务端渲染，就可创建自己的组件库以及其他类似的工作。
目前有许多优秀的 Vue 框架，这里，我们只列出了应用在不同领域最为广泛的三个框架。
如果你想要构建一个高性能的 Vue 应用程序，基于路由、服务端呈现、代码分离和其他前沿特性，同时还需要一些更高级的功能，例如：SEO 标记等。您可以使用 Nuxt.js 框架。
Nuxt.js 框架通过其丰富的社区插件提供了所有这些开箱即用的特性，甚至更多，如 PWA等。
Google 的 Material Design 标准是一个广泛使用的设计语言指南系统，它用于构建漂亮并合理的用户界面，这些界面被广泛应用于 Google 的产品，如 Android 和 Web 系统。
Vuetify 框架在一系列 Vue 组件中实现了 Material Design。这允许您使用 Material Design布局和样式快速创建 Vue 应用程序，并在应用程序中实现模态框、提示框、导航栏、分页等页面小控件。
Vue.js 是一个用于构建 Web 用户界面的 UI 库。如果您想将他用于构建移动应用，可以使用 NativeScript-Vue 框架。
NativeScript 是一个使用 iOS 和 Android 原生用户界面组件构建应用app的框架，而 NativeScript-Vues 是基于 NativeScript 且支持 Vue 语法和 Vue 组件使用的框架。
如果您想在项目中快速构建基于 Vue 的功能模块，如类似 Excel 功能和布局的电子表格、前端导入导出 Excel、在 Web 应用程序中嵌入在线 Excel、数据分析 OLAP、金融图表等，您可以使用一些成熟的商业化开发工具，纯前端表格控件 SpreadJS 和前端开发工具包 WijmoJS。
SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，实现在线 Excel 体验。
SpreadJS 在数据展示、前端导入导出、图表面板、数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。
WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成，如表格控件 FlexGrid、图表控件 FlexChart、数据分析 OLAP 等，完美支持原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可用于企业快速构建桌面、移动 Web 应用程序。
WijmoJS 凭借其先进的体系架构、简单易学的使用文档、超过 500 种 Demo 演示、顶级的控件性能，以及轻松、易用的操作体验，可全面满足企业前端开发所需，是构建企业级 Web 应用程序最高效的纯前端开发工具包。
在最后一部分中，我们将介绍一些重要但不包含在上述分类中的内容。
如果您要在项目中重用 Vue 功能，或为 Vue 生态做出贡献，您可以把这部分功能打包成插件并发布给其他用户。
插件功能是 Vue 的一个重要特性，有很多工具和模板都可以帮助您创建轻便高效的 Vue 代码。
动画也是 Vue 核心功能的一部分，它允许您向 DOM 中添加或删除元素时应用动画。 为了启用一个动画，您可以创建 CSS 类来定义所需的动画效果，无论是淡入淡出、更改颜色还是任何其他效果。Vue 将在添加或删除元素时，同时添加或删除您设置相应的类。
渐进式Web应用程序（PWA）与普通的 Web 应用程序类似，但用户体验、性能已经得到了增强，同时还增加了部分现代功能，如，离线缓存、服务端渲染、通知推送等。
大部分 PWA 功能可以通过 Vue CLI 3 插件或注入 Nuxt.js 之类的框架添加到 Vue 应用中，但您仍需学习其中的关键技术，包括 Web 应用 json 清单（minifest）和服务等。
在您的 Web 应用中，如有电子表格、报表、数据分析、金融图表、在线表格编辑等需求，可以使用上文提到的支持 Vue 框架的控件和组件包，除了无需考虑兼容性问题外，这些控件可使您的 Web 应用为用户带来更稳定、更高效的使用体验。
关于葡萄城
赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。
| 留言与评论（共有 0 条评论） |
