学习 Vue

第 1 章 欢迎来到 Vue.js 世界 欢迎来到 Vue.js 世界！

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

Vue.js 最初发布于 2014 年，经历了快速普及，尤其是在 2018 年。凭借其易用性和灵活性，Vue 在开发者社区中是一个广受欢迎的框架。如果您正在寻找一款优秀的工具来构建并向最终用户交付性能卓越的 Web 应用程序，Vue.js 就是您的最佳选择 。

本章重点介绍 Vue.js 的核心概念，并引导你了解 Vue.js 开发环境所需的工具。本章还将探讨一些有用的工具，使你的 Vue.js 开发过程更易于管理。本章结束时，你将拥有一个包含简单 Vue.js 应用程序的工作环境，准备好开始学习 Vue.js 的旅程。

什么是 Vue.js？

Vue.js 或 Vue 在法语中是视图的意思；它是一个 JavaScript 引擎，用于在前端应用程序中构建渐进、可组合和反应式用户界面（UI）。

备注

从这里开始，我们将使用 Vue 来表示 Vue.js。

Vue 是在 JavaScript 的基础上编写的，它提供了一种有组织的机制来结构和构建网络应用 。它还充当转译编译器（transpiler）的角色，在部署前的构建时间将 Vue 代码（作为单文件组件，我们将在"Vue 单文件组件结构 "中进一步讨论）编译并翻译成等效的 HTML、CSS 和 JavaScript 代码。在独立模式下（使用生成的脚本文件），Vue 引擎会在运行时执行代码转换。

Vue 遵循 MVVM（模型-视图-视图模型）模式。与MVC（模型-视图-控制器）不同、¹不同，ViewModel 是视图和模型之间绑定数据的粘合剂。允许视图和模型直接通信可逐步实现组件的反应性 。

简而言之，Vue 的创建只专注于视图层，但可逐步调整，与其他外部库集成，以实现更复杂的使用。

由于 Vue 只专注于视图层，因此它有助于开发单页面应用程序（SPA）。SPA 可以快速、流畅地移动，同时与后台 不断进行数据通信。

Vue 的官方网站包括 API 文档、安装和主要用例，可参考 。

Vue 在现代网站开发中的优势

Vue 的一个显著优势是其文档编写精良、通俗易懂。此外，围绕 Vue 构建的生态系统和支持社区（如 Vue Router、Vuex 和 Pinia）可帮助开发人员以最小的投入建立和运行项目。

Vue API 简单明了，对于使用过 AngularJS 或 jQuery 的人来说再熟悉不过了。其强大的模板语法最大限度地减少了所需的学习努力，使您更容易在应用程序中处理数据或监听文档对象模型（DOM）事件。

Vue 的另一个重要优势是它的大小。框架的大小是应用程序性能的一个重要方面，尤其是交付时的初始加载时间。在撰写本文时，Vue 是速度最快、最轻量级的框架（大小约为 10kB）。从浏览器的角度来看，这一优势可减少下载耗时并提高运行时性能 。

随着 Vue 3 的发布，现在对 TypeScript 的内置支持为开发人员提供了键入类型的好处，并使他们的代码库更具可读性、条理性和长期可维护性 。

安装 Node.js

使用 Vue 工作需要设置开发生态系统和事先掌握编码知识，以便跟上学习进程。Node.js 和 NPM（或 Yarn）是在开始开发任何应用程序之前必须安装的开发工具 。

Node.js（或 Node）是基于 Chrome 浏览器的 V8 JavaScript 运行时引擎构建的开源 ...