使用Vue CLI安装和运行Vue3项目 [2022]

在本教程中，您将通过分步说明学习如何从头开始启动和运行 Vue 3 项目。 

目录

         1. 安装 node.js & npm 包

2. 安装Vue CLI

3. 创建一个 Vue 3 项目。

4. 运行项目

 1. 安装 node.js & npm 包

第一步是将 Node.js 和 NPM（节点包管理器）安装到您的计算机上。

您可以通过转到计算机中的终端/命令提示符窗口并运行几个命令来检查它们是否已安装。

要检查 node js 的安装版本，

node -v

如果您已经安装了它，请确保它是 10 或更高版本。 

要检查 npm，请运行以下命令。

npm -v

如果未安装它们，您将在运行 node 和 npm 版本检查命令时收到“找不到命令”消息或类似消息。

在这种情况下，您将需要安装它们。

所以，在你的浏览器中访问Node.js 网站——你可以看到两个版本，我建议使用 LTS，它是更稳定的版本，它也建议大多数用户使用。

单击 LTS 按钮，然后开始在计算机上下载 Node.js 包文件。 

双击包文件进行安装，这将打开安装程序窗口。您几乎可以像安装其他应用程序一样进行安装。

正如您从介绍选项卡中看到的那样，我不仅要安装 node.js，还要安装 npm——所以我们不需要单独安装它们。

点击继续，继续，

然后同意并安装，这将要求输入管理员密码。输入密码后，需要几秒钟才能完成安装过程。

下一步是安装 Vue CLI。

2.安装Vue CLI

那么，什么是 Vue CLI？

Vue CLI是一个官方的 vue npm 包，可让您在计算机上快速创建 vue 项目。

让我们全局安装，这样就可以在电脑的任何地方创建vue项目。

打开终端窗口并运行 以下命令

npm install -g @vue/cli

完成安装过程需要几秒钟。

如果它说你没有权限，只需像这样在它前面添加sudo再次运行该命令，它会要求你输入你的管理员密码，然后你就完成了。

sudo npm install -g @vue/cli

为了创建 vue 3 项目，我们需要至少 4.5 或更高版本的 vue cli 版本。

如果您已经安装了 vue cli，您可以使用以下命令检查版本。

vue --version

如果您的版本低于 4.5，则只需运行以下命令即可对其进行升级。

npm upgrade --next

下一步是创建一个 vue 3 项目。

3. 创建一个 Vue 3 项目。

为此，请打开终端并输入以下内容进入桌面：

cd ~/Desktop

然后，输入： 

vue create my-project-name

然后你会被问到一个问题——你想使用哪个版本的 vue，你可以通过在键盘上上下移动箭头键来选择 vue 3，然后按 Enter 进行选择。

这将开始创建我们的 vue 3 项目，项目名称为文件夹名称。

创建 vue 3 项目并安装其默认依赖项需要几秒钟。

完成后，您可以在桌面上看到带有项目名称的文件夹。

最后一步是在浏览器上运行 vue 3 项目。

4. 运行项目

如您所见，我的终端窗口给了我两个命令来运行项目。

第一个命令是进入项目文件夹：

CD my-project-name

要运行应用程序，请运行以下命令。

npm run serve

为了井井有条，我将从我的Visual Studio Code编辑器中运行该项目，而不是使用终端窗口。

转到应用程序文件夹 → Visual Studio 代码

然后，File → Open → 然后导航到我们在桌面上创建的项目文件夹并点击open。

如您所知，终端窗口已与 Visual Studio 集成，因此我只需从顶部菜单栏中选择终端选项即可打开它，然后选择新建终端，这将在编辑器底部打开一个新窗口。

如您所见，终端已经进入项目，所以我不必使用第一个命令，即

CD my-project-name

我所要做的就是运行npm run serve命令。

它将开始在我的计算机上运行服务器并给我 localhost URL。

如您所见，我得到了两个：一个是 localhost，另一个是网络 URL，当您想在多个设备上查看项目（例如在手机上查看项目 UI）时，这非常有用。

打开浏览器并复制网络 URL 并将其粘贴到那里。

在这种状态下，我们成功启动并运行了我们的 Vue 3 应用程序。