Initially released in 2014, Vue.js has experienced rapid adoption, especially in 2018. Vue is a popular framework within the developer community, thanks to its ease of use and flexibility. If you are looking for a great tool to build and ship excellent perform‐ ant web applications to end users, Vue.js is the answer.
Vue.js最初于2014年发布，经历了快速的采用，特别是在2018年。由于其易用性和灵活性，Vue在开发人员社区中是一个流行的框架。如果你正在寻找一个伟大的工具来构建和交付高性能的web应用程序给最终用户，Vue.js就是答案。
This chapter highlights the core concepts of Vue.js and walks you through the tools you need for your Vue.js development environment. It also explores helpful tools that make your Vue.js development process more manageable. By the end of the chapter, you will have a working environment with a simple Vue.js application ready to start your journey in learning Vue.js.
本章重点介绍Vue.js的核心概念，并引导您了解Vue.js开发环境所需的工具。它还探讨了使Vue.js开发过程更易于管理的有用工具。在本章结束时，您将拥有一个带有简单Vue.js应用程序的工作环境，准备开始您的Vue.js学习之旅。
什么是Vue.js
Vue.js, or Vue, means view in French; it is a JavaScript engine for building progres‐ sive, composable, and reactive user interfaces (UI) in frontend applications.
Vue.js在法语中是视图的意思；它是一个JavaScript引擎，用于在前端应用程序中构建渐进式、可组合和响应式用户界面（UI）。
Vue is written on top of JavaScript and offers an organized mechanism to structure and build a web application. It also acts as the trans-compiler (transpiler) that com‐ piles and translates Vue code (as a Single File Component, which we will discuss fur‐ ther in “Vue Single File Component Structure” on page 57) into equivalent HTML, CSS, and JavaScript code in build time before deploying. In a standalone mode (with a generated script file), the Vue engine performs the code translation at run-time instead.
Vue是基于JavaScript编写的，它提供了一种有组织的机制来构建web应用程序。它还充当转换编译器（transpiler），在部署之前的构建时间将Vue代码（作为单个文件组件，我们将在第57页的“Vue单个文件组件结构”中讨论）编译和翻译为等效的HTML， CSS和JavaScript代码。在独立模式下（使用生成的脚本文件），Vue引擎在运行时执行代码转换。
Vue follows the MVVM (Model–View–ViewModel) pattern. Unlike MVC (Model– View–Controller), 1 the ViewModel is the binder that binds data between the View and Model. Allowing direct communication for the view and model progressively enables the component’s reactivity.
Vue遵循MVVM（模型-视图-视图模型）模式。与MVC（模型-视图-控制器）不同，ViewModel是绑定视图和模型之间数据的绑定器。允许视图和模型之间的直接通信逐步实现组件的响应性。
In short, Vue was created to focus only on the View layer but is incrementally adapta‐ ble to integrate with other external libraries for more complex usage.
简而言之，Vue的创建只关注视图层，但它可以逐渐适应与其他外部库集成，以实现更复杂的用途。
Since Vue focuses solely on the View layer, it empowers the development of singlepage applications (SPAs). SPAs can move quickly and fluidly while communicating data continuously with the backend.
由于Vue只关注视图层，因此它支持单页应用程序（spa）的开发。spa可以快速流畅地移动，同时与后端持续通信数据。
The official website for Vue includes API documentation, installation, and primary use cases for reference.
Vue的官方网站包含API文档、安装和主要用例供参考。
Vue在现代Web开发中的好处
A significant advantage of Vue is its well-written, easy-to-understand documentation. In addition, the ecosystem and supporting community built around Vue, such as Vue Router, Vuex, and Pinia, helps developers set up and run their projects with mini‐ mum effort.
Vue的一个显著优势是其编写良好、易于理解的文档。此外，围绕Vue建立的生态系统和支持社区，如Vue Router， Vuex和Pinia，可以帮助开发人员以最小的努力设置和运行他们的项目。
Vue APIs are straightforward and familiar to anyone who has worked with AngularJS or jQuery before. Its powerful template syntax minimizes the learning effort required and makes it easier to work with data or listen to Document Object Model (DOM) events in your application.
Vue api简单明了，对于以前使用过AngularJS或jQuery的人来说都很熟悉。其强大的模板语法最大限度地减少了所需的学习工作，并使处理数据或监听应用程序中的文档对象模型（DOM）事件变得更加容易。
Another significant benefit Vue offers is its size. The size of a framework is a substan‐ tial aspect of the application’s performance, especially the initial loading time on delivery. At the time of writing, Vue stands as the fastest and most lightweight frame‐ work (~10kB in size). This advantage results in less time-consuming downloading and better run-time performance from a browser perspective.
Vue提供的另一个重要优势是它的大小。框架的大小是应用程序性能的一个重要方面，尤其是交付时的初始加载时间。在撰写本文时，Vue是最快和最轻量级的框架（约10kB大小）。从浏览器的角度来看，这一优势减少了下载时间，提高了运行时性能。
With the release of Vue 3, the built-in support for TypeScript now offers developers the benefit of typing in types and making their codebase more readable, organized, and maintainable in the long term.
随着Vue 3的发布，对TypeScript的内置支持现在为开发人员提供了键入类型的好处，并使他们的代码库在长期内更具可读性、组织性和可维护性。
安装Node.js
Working with Vue requires setting up the development ecosystem and prior coding knowledge to keep up with the learning process. Node.js and NPM (or Yarn) are nec‐ essary development tools to install before you start working on any application.
使用Vue需要建立开发生态系统和先前的编码知识，以跟上学习过程。Node.js和NPM（或Yarn）是开始开发任何应用程序之前必须安装的开发工具。
Node.js (or Node) is an open source JavaScript server environment built on Chrome’s V8 JavaScript run-time engine. Node allows developers to code and run JavaScript applications locally or in a hosted server, outside a browser.
Node.js（或Node）是一个基于Chrome V8 JavaScript运行时引擎的开源JavaScript服务器环境。Node允许开发人员在本地或托管服务器上编写和运行JavaScript应用程序，而不是在浏览器中。
Chromium-based browsers like Chrome and Edge also use the V8 engine to interpret JavaScript code into efficient low-level computer code and execute it.
基于Chrome的浏览器（如Chrome和Edge）也使用V8引擎将JavaScript代码解释为高效的低级电脑代码并执行。
Node is cross-platform supported and easy to install. If you are not sure you installed Node, open your terminal (or command prompt in Windows) and run the following command:
Node支持跨平台，易于安装。如果你不确定你已经安装了Node，打开你的终端（或者Windows的命令提示符），运行下面的命令：
node -v
The output should be a Node version or “Command not found” if Node is not installed.
如果没有安装Node，输出应该是Node版本或者“Command not found”。
If you haven’t installed Node, or your Node version is lower than 12.2.0, please visit the Node project website and download the installer for the latest version based on your operation system.
如果您还没有安装Node，或者您的Node版本低于12.2.0，请访问Node项目网站，根据您的操作系统下载最新版本的安装程序。
Once the download finishes, click on the installer and follow the instructions to set it up.
下载完成后，单击安装程序并按照说明进行设置。
When installing Node, besides the node command, you also have the npm command added to the command-line tool. If you type the node -v command, you should see the installed version number displayed.
在安装Node时，除了Node命令外，还在命令行工具中添加了npm命令。如果输入node -v命令，应该会看到显示的安装版本号。
NPM
The Node Package Manager (NPM) is the default package manager for Node. It will be installed together with Node.js by default. It lets developers download and install other remote Node packages with ease. Vue and other frontend frameworks are examples of helpful Node packages.
Node包管理器（NPM）是Node的默认包管理器。默认情况下，它将与Node.js一起安装。它允许开发人员轻松地下载和安装其他远程Node包。Vue和其他前端框架都是有用的Node包的例子。
NPM is a powerful tool for developing complex JavaScript applications, with the abil‐ ity to create and run task scripts (to start a local development server, for instance) and automatically download project package dependencies.
NPM是开发复杂JavaScript应用程序的强大工具，具有创建和运行任务脚本的能力（例如，启动本地开发服务器），并自动下载项目包依赖项。
Similar to the Node version check, you can perform an NPM version check through the npm command:
与Node版本检查类似，你可以通过NPM命令来执行NPM版本检查：
npm -v
To update your NPM version, use the following command:
要更新你的NPM版本，使用以下命令：
npm install npm@latest -g
With parameter @latest, your current NPM tool automatically updates its version to the latest version. You can run npm -v again to ensure it is updated correctly. You can also replace the latest word to target any specific NPM version (in the format xx.x.x). Additionally, you need to indicate the installation at the global scope with the -g flag for the npm command to be available everywhere on your local machine. For example, if you run the command npm install npm@6.13.4 -g, the tool will tar‐ get the NPM package version 6.13.4 for installing and updating.
使用@latest参数，当前NPM工具会自动将其版本更新为最新版本。你可以再次运行npm -v以确保它被正确更新。你也可以替换最新的单词来针对任何特定的NPM版本（格式为xx.x.x）。此外，您需要使用-g标志在全局范围内指示安装，以便npm命令在本地机器上的任何地方都可用。例如，如果你运行命令npm install npm@6.13.4 -g，该工具将获取npm包6.13.4版本进行安装和更新。
A Node project depends on a collection of Node packages (or dependencies) to be up and running. In the package.json file within the project directory, you can find these installed packages. This package.json file also describes the project, including the name, author(s), and other scripting commands applied to the project exclusively.
Node项目依赖于Node包（或依赖项）的集合才能启动和运行。在包装里。在项目目录下的Json文件中，您可以找到这些已安装的包。这个package.json文件还描述了项目，包括名称、作者和其他专门应用于项目的脚本命令。
When you run the command npm install (or npm i) within the project folder, NPM will refer to this file and install all the listed packages into a folder called node_mod‐ ules, ready for the project to use. Also, it will add a package-lock.json file to keep track of the package installed version and compatibility between common dependencies.
当你在项目文件夹中运行命令npm install（或npm i）时，npm会引用这个文件，并将列出的所有包安装到一个名为node_mod‐ules的文件夹中，以便项目使用。此外，它还将添加一个包锁。Json文件来跟踪包的安装版本和常见依赖项之间的兼容性。
To start a project from scratch with dependencies, use the following command within the project directory:
在project目录下使用下面的命令来从头开始一个带有依赖项的项目：
npm init
This command walks you through some questions related to the project and initial‐ izes an empty project with a package.json file containing your answers.
这个命令引导您完成与项目相关的一些问题，并初始化一个带有包的空项目。Json文件包含您的答案。
You can search for any public open source packages at the NPM official website.
您可以在NPM官方网站上搜索任何公共开源包。
Yarn
If NPM is the standard package manager tool, then Yarn is an alternative and popular package manager developed by Facebook.3 Yarn is faster, more secure, and more reli‐ able due to its parallel downloading and caching mechanism. It is compatible with all NPM packages; thus it can be used as a drop-in replacement for NPM.
如果说NPM是标准的包管理器工具，那么Yarn就是facebook开发的另一种流行的包管理器。Yarn更快、更安全、更可靠，因为它的并行下载和缓存机制。它与所有NPM包兼容；因此，它可以作为NPM的临时替代品。
You can install the latest version of Yarn based on your operating system by visiting the Yarn official website.
您可以根据您的操作系统登录Yarn官方网站安装最新版本的Yarn。
If you are working on a macOS computer and have Homebrew installed, you can install Yarn directly using the command:
如果你在macOS电脑上工作，并且安装了Homebrew，你可以直接使用下面的命令安装Yarn：
brew install yarn
This command installs Yarn and Node.js (if not available) globally.
该命令全局安装Yarn和Node.js（如果不可用）。
You can also install Yarn globally using the NPM package management tool with the following command:
你也可以使用NPM包管理工具全局安装Yarn，命令如下：
npm i -g yarn
You should now have Yarn installed on your machine and ready to use.
现在您应该已经在机器上安装了Yarn并准备使用了。
To check if Yarn is installed and to verify its version, use the following command:
检查是否安装了Yarn，并验证Yarn的版本。
yarn -v
To add a new package, use the following command:
要添加一个新包，使用以下命令：
yarn add <node package name>
To install the dependencies for a project, instead of npm install, you only need to run the yarn command within the project directory. Once this finishes, similar to NPM, Yarn will also add a yarn.lock file in your project directory.
要为一个项目安装依赖，而不是npm install，你只需要在项目目录下运行yarn命令。一旦完成，与NPM类似，Yarn也会添加一个纱线。锁定项目目录中的文件。
At this point, you have set up your essential coding environment for Vue develop‐ ment. In the next section, we’ll look at the Vue Developer Tools and what they offer us in working with Vue.
至此，您已经为Vue开发设置了必要的编码环境。在下一节中，我们将介绍Vue开发人员工具以及它们在使用Vue时提供的功能。
Vue开发者工具
Vue Developer Tools (or Vue Devtools) are the official tools to help you work with your Vue projects locally. These tools include extensions for Chrome and Firefox, and an Electron desktop application for other browsers. You should install one of these tools during the development process.
Vue开发者工具（或Vue Devtools）是官方工具，可以帮助您在本地使用Vue项目。这些工具包括Chrome和Firefox的扩展，以及用于其他浏览器的电子桌面应用程序。您应该在开发过程中安装其中一个工具。
Chrome users can head to the extension link in the Chrome Web Store and install the extension.
Chrome用户可以前往Chrome Web Store中的扩展链接并安装扩展。
Once your extension is installed and enabled, you can detect if any site currently uses Vue in production. When a site is built with Vue, the Vue icon on the browser toolbar highlights.
一旦您的扩展安装并启用，您可以检测是否有任何网站目前在生产中使用Vue。使用Vue构建站点时，浏览器工具栏上的Vue图标会高亮显示。
The Vue Devtools enable you to inspect the Vue component tree, component props and data, events, and routing information within the browser’s developer console. Vue Devtools divide the information into various tabs, providing helpful insights for debugging and inspecting behaviors of any Vue component within the project.
Vue Devtools使您能够在浏览器的开发控制台中检查Vue组件树、组件道具和数据、事件和路由信息。Vue Devtools将信息划分为不同的选项卡，为调试和检查项目中任何Vue组件的行为提供有用的见解。
Vite.js作为构建器管理工具
Introduced in 2020, Vite.js (or Vite) is a JavaScript development server that uses the native ES module4 import during development instead of bundling your code into chunks of JavaScript files like Webpack, Rollup, etc.
Vite.js（或Vite）于2020年推出，是一个JavaScript开发服务器，在开发过程中使用原生ES模块4导入，而不是将代码捆绑到Webpack， Rollup等JavaScript文件块中。
This approach allows Vite to perform a hot reload5 during development at an insane speed, making the development experience seamless. It also offers many out-of-thebox features such as TypeScript support and on-demand compilation, which is quickly gaining popularity and adaption among the developer community.
这种方法允许Vite在开发过程中以极快的速度执行热重新加载5，使开发体验无缝化。它还提供了许多开箱即用的特性，如TypeScript支持和按需编译，这些特性在开发人员社区中迅速流行和适应。
The Vue community has replaced the Vue CLI tool(which uses Webpack under the hood) with Vite to be the default builder tool for creating and managing Vue projects.
Vue社区已经用Vite取代了Vue CLI工具（它在底层使用Webpack），成为创建和管理Vue项目的默认构建器工具。
创建一个新的Vue项目
With Vite, there are various ways to create a new Vue application project. The most straightforward way is to use the following command syntax in your command prompt or terminal:
使用Vite，有多种方法可以创建新的Vue应用程序项目。最直接的方法是在命令提示符或终端中使用以下命令语法：
npm init vue@latest
This command will first install create-vue, an official scaffolding tool, and then present you with a list of essentials questions to configure your Vue application.
该命令将首先安装官方搭建工具create-vue，然后向您提供配置Vue应用程序所需的基本问题列表。
Next, we will explore the file structure of our newly created project.
接下来，我们将探索新创建项目的文件结构。
项目文件结构
A new Vue project contains the following initial structure within the src directory:
一个新的Vue项目在src目录中包含以下初始结构：
assets Folder where you can put project images, graphics, and CSS files.
assets文件夹，其中可以放置项目图像、图形和CSS文件。
components Folder where you create and write Vue components following the Single File Component (SFC) concept.
components文件夹，您可以在其中按照单文件组件（Single File Component， SFC）概念创建和编写Vue组件。
router Folder where all the routing configurations reside.
router存放所有路由配置的文件夹。
stores Folder where you create and manage project global data by store using Pinia.
stores文件夹，您可以在其中创建和管理使用Pinia存储的项目全局数据。
views Folder where all the Vue components that bind to defined routes reside.
views文件夹，所有绑定到已定义路由的Vue组件都在其中。
App.vue The main Vue application component, acts as the root to host all other Vue com‐ ponents within the application.
Vue是Vue应用程序的主组件，作为根节点来承载应用程序中所有其他Vue组件。
main.ts Contains the TypeScript code responsible for mounting the root component (App.vue) into an HTML element on the DOM page. This file is also where you set up plugins and third-party libraries in the application, such as Vue Router, Pinia, etc.
主要。包含负责将根组件（App.vue）挂载到DOM页面上的HTML元素中的TypeScript代码。这个文件也是你在应用程序中设置插件和第三方库的地方，比如Vue Router， Pinia等。
In the project’s root directory is an index.html file, which is the entry point for load‐ ing your application in the browser. It imports the main.ts file using the script tag and provides the target element for the Vue engine to load the Vue application by executing the code in main.ts. This file will likely stay unchanged during the devel‐ opment process.
在项目的根目录中有一个index.html文件，它是在浏览器中加载应用程序的入口点。它导入main。使用script标记的Vue .ts文件，并为Vue引擎提供目标元素，以便通过执行main.ts中的代码加载Vue应用程序。该文件在开发过程中可能保持不变。
You can find all the example code in the dedicated Github repository. We organize these code files by chapter.
您可以在专用的Github存储库中找到所有示例代码。我们按章组织这些代码文件。
总结
In this chapter, we learned about the benefits of Vue and how to install the essential tools for our Vue development environment. We also discussed the Vue Developer Tools and other tools for effectively building a Vue project, such as Vite. Now that we have created our first Vue project, we are ready to learn Vue, starting with the basics: the Vue instance, the built-in directives, and how Vue handles reactivity.
在本章中，我们了解了Vue的优点以及如何为我们的Vue开发环境安装必要的工具。我们还讨论了Vue开发人员工具和其他有效构建Vue项目的工具，例如Vite。现在我们已经创建了我们的第一个Vue项目，我们已经准备好学习Vue，从基础知识开始：Vue实例，内置指令，以及Vue如何处理响应性。
