创建Vue 3项目的方式有哪些？

There are several ways to create Vueprojects or to add script tags to our existing frontends. For prototyping orlearning purposes, we can add the lates version of Vue 3 by adding thefollowing code:

创建 Vue 项目或为现有前端添加脚本标签有多种方法。出于原型设计或学习目的，我们可以通过添加以下代码来添加最新版本的 Vue 3：

This will always include the latest versionof Vue in our app. If we use it in production, we should include the versionnumber to avoid unexpected changes from newer versions breaking our app. Theversion number can replace the next word if we want to specify the version.

这将始终在我们的应用程序中包含最新版本的 Vue。如果我们在生产中使用它，则应包含版本号，以避免新版本的意外更改破坏我们的应用程序。如果我们想指定版本，可以用版本号代替next单词。

We can also install Vue by installing it asa package. To do that, we can run the following command:

我们还可以将 Vue 作为软件包安装。为此，我们可以运行以下命令：

npm install vue@next

This will install the latest version of Vuein our JavaScript project.

这将在我们的 JavaScript 项目中安装最新版本的 Vue。

If we created a Vue project from scratchwith an older version of the Vue CLI, then we can use the CLI to generate allthe files and install all the packages for us. This is the easiest way to getstarted with a Vue project. With Vue 3, we should use Vue CLI v4.5 by runningthe following command:

如果我们使用旧版本的 Vue CLI 从零开始创建 Vue 项目，那么我们可以使用 CLI 生成所有文件并安装所有软件包。这是最简单的 Vue 项目入门方法。使用 Vue 3 时，我们应运行以下命令来使用 Vue CLI v4.5：

yarn global add @vue/cli@next

Then, tu upgrade our Vue project to Vue 3,we can run the following command:

然后，我们可以运行以下命令将 Vue 项目升级到 Vue 3：

vue upgrade –next

The Vite build tool will let us create aVue 3 project from scratch. It lets us serve our project much faster than withthe Vue CLI because it can work with modules natively. We can set up a Vueproject from scratch by running these commands with NPM:

Vite 构建工具可让我们从头开始创建Vue 3 项目。与 Vue CLI 相比，它能更快地为我们的项目提供服务，因为它可以原生处理模块。通过使用 NPM 运行这些命令，我们可以从头开始创建一个 Vue 项目：

npm init vite-app

cd

npm install

npm run dev

With Yarn, we must run the followingcommands:

使用 Yarn，我们必须运行以下命令：

yarn create vite-app

cd

yarn

yarn dev

In either case, we replace with the project name of our choice.

在这两种情况下，我们都要用自己选择的项目名称替换。

There are various builds of Vue that we canuse. One set are CDN versions, which don’t come with bundlers. We can recognizethem by the vue(.runtime).global(.prod).js pattern in the filename. These canbe included directly with script tags.

我们可以使用不同的 Vue 版本。其中一组是 CDN 版本，不带捆绑程序。我们可以通过文件名中的vue(.runtime).global(.prod).js 模式来识别它们。它们可以直接包含在脚本标签中。

The development and production branches arehardcodeed, and we can tell them apart by checking if the file ends with .prod.js.These files are production ready as they’re minifiled. These aren’t UniversalModule Definition(UMD) builds. They contain IIFEs that are meant to be usedwith regular script tags.

开发分支和生产分支是硬编码，我们可以通过检查文件是否以 .prod.js 结尾来区分它们。这些文件是生产准备就绪的，因为它们是迷你文件。这些文件不是通用模块定义（UMD）构建文件。它们包含的 IIFE 应与常规脚本标记一起使用。

If we use a bundler such as Webpack,Rollup, or Parcel, then we can use the vue(.runtime).esm-bundler.js file. Thedevelopment and production branches are determined by the process.env.NODE_ENVproperty. It also has the full version, which compiles the template on the flyat runtime and a runtime version.

如果我们使用 Webpack、Rollup或 Parcel 等捆绑程序，则可以使用vue(.runtime).esm-bundler.js 文件。开发和生产分支由process.env.NODE_ENV 属性决定。它还有完整版和运行时版，完整版可在运行时即时编译模板。

In this chapter, we will be going throughthe basic features of Vue with the script tag version of Vue. In the subsequentchapters, we’ll move on to using the Vue CLI to create our Vue 3 projects. Thisway, we can focus on exploring the basic features of Vue 3, which will be handywhen we move on to creating more complex projects. Let’s begin by creating aVue instance.

在本章中，我们将通过脚本标签版本的 Vue 来了解 Vue 的基本功能。在后续章节中，我们将继续使用 Vue CLI 创建 Vue 3 项目。这样，我们就可以专注于探索 Vue 3 的基本功能，当我们继续创建更复杂的项目时，这些功能将非常有用。首先，让我们创建一个 Vue 实例。