关于前端:Vue-开发你都需要学点啥

出处：葡萄城官网 https://www.cnblogs.com/powertoolsteam/p/11056531.html

前言

如果你是 Vue 开发的老手，您可能曾经听过很多对于它的专业术语了，例如：单页面应用程序、异步组件、服务器端出现等。

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

兴许您在面对这些未知的术语和工具时会感到无助和失望，没关系，您并不孤独，因为这是所有老手在首次接触 Vue 时都会有的感触。

但如果您试图要一次把握所有这些内容，那么这些宏大的体系很可能会压垮你。为此，我在这里将为大家展现一个“常识图表”，它蕴含了所有在业余 Vue 开发过程中的要害局部。您能够参考这个图为您在学习 Vue 的过程中指引方向。

Js 和 Web 根底

如果我让你用英文去浏览纯英文书籍，那么你应该先要学习英文，对吗？

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

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。

学习生产环境中的 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 利用其中的一部分。

古代 JavaScript 和 Babel

ES5 能够无效构建 Vue 应用程序，ES5 简直是所有浏览器都反对的 JavaScript 规范。

为了加强 Vue 的开发体验，并应用最新的浏览器性能，您能够应用最新的 JavaScript
规范 ES2015 的个性或 ES2016 及更高版本的倡议性能来构建您的 Vue 应用程序。

如果抉择应用了最新的 JavaScript 个性，那么其中旧版浏览器将会呈现兼容问题，这会造成您的产品将会损失掉一部分用户。

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

Webpack

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

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

许多开发者认为 Webpack 很难了解，也很难配置，但如果没有它，Vue 的一些最棒的性能（如：单页面组件）将无奈实现。咱们有对于 WebPack 的系列教程 https://www.cnblogs.com/power…，助您疾速把握 Webpack 的应用和配置。

TypeScript

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

行将于 2019 年推出的 Vue.js 3 将齐全用 TypeScript 开发，这并不意味着您必须在 Vue 我的项目中应用它。但如果您须要通过浏览 Vue 的外部代码并退出 Vue 的开源组织为其贡献力量，您至多也是应该要理解 TypeScript 这个语言的。

学习路线 Vue 框架

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

目前有许多优良的 Vue 框架，但在这，咱们只列出了利用在不同畛域最为宽泛的三个框架。

逆锋起笔 是一个专一于程序员圈子的技术平台，你能够播种 最新技术动静 、 最新内测资格 、BAT 等大厂大佬的教训、 增长本身 、 学习材料 、 职业路线 、 赚钱思维 ，微信搜寻 逆锋起笔 关注！

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 组件应用的框架。

其余学习

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

插件开发

如果您要在我的项目中重用 Vue 性能，或为 Vue 生态做出奉献，您能够把这部分性能打包成插件并公布给其余用户。

插件性能是 Vue 的一个重要个性，有很多工具和模板能够帮忙您创立轻便高效的 Vue 代码。

动画

动画也是 Vue 外围性能的一部分，它容许您在向 DOM 中增加或删除元素时利用动画。为了启用一个动画，您能够创立 CSS 类来定义所需的动画成果，无论是淡入淡出、更改色彩还是任何其余成果。Vue 将检测当增加元素和删除元素时，增加或删除您设置相应的类。

渐进式 Web 应用程序

渐进式 Web 应用程序（PWA）与一般的 Web 应用程序相似，但用户体验、性能曾经失去了加强，同时还减少了古代性能，例如，PWA 包含离线缓存、服务端渲染、告诉推送等。

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

逆锋起笔 是一个专一于程序员圈子的技术平台，你能够播种 最新技术动静 、 最新内测资格 、BAT 等大厂大佬的教训、 增长本身 、 学习材料 、 职业路线 、 赚钱思维 ，微信搜寻 逆锋起笔 关注！