1.4.2　安装Vue的几种方法

1．npm/yarn安装

在用Vue构建大型应用时，推荐使用npm/yarn安装Vue，npm安装Vue的命令如下：

使用yarn安装依赖，需要先全局安装yarn，执行如下命令：

然后通过yarn安装Vue，命令如下：

Vue还提供了编写单文件组件的配套工具。如果需要使用单文件组件，还需要安装@vue/compiler-sfc：

大多数情况下，笔者更推荐使用Vue CLI来创建一个配置最小化的版本。

注意：要使用npm安装，需先安装Node环境，安装了Node之后，npm就自动安装上了。后续章节提到npm安装的前提都是已经安装好Node环境，安装方法将不再复述。

Node的安装方法很简单：首先从官网下载符合自己机器配置的Node安装包，然后双击安装包根据提示傻瓜式安装即可，没有难度。

2．Vue CLI安装

Vue提供了一个官方的CLI，为单页面应用（Single Page Application，SPA）快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置，只需要几分钟就可以运行起来，并带有热重载、保存时lint校验以及生产环境可用的构建版本。

对于Vue 3，官方推荐使用npm上可用的Vue CLI v4.5作为@vue/cli，通常使用npm/yarn等工具进行全局安装，命令如下：

查看Vue CLI是否安装成功，运行如下命令：

或

笔者在写此书时，使用的Vue CLI版本是4.5.14，如图1.6所示，本书中所有Vue CLI创建的项目都使用该版本。

Vue CLI安装成功后，可以通过Vue CLI创建Vue 3应用，Vue CLI提供了多种预设方式，下面演示使用默认预设创建一个Vue 3项目：

首先，运行如下命令（将<project-name>替换成任意一个准备好的项目名称）：

执行上面的命令后，会出现交互提示Please pick a preset（选择预设），使用键盘上的方向键可以进行选择，这里笔者选择默认的Vue 3配置项，包含babel、eslint（Default ([Vue 3] babel, eslint），如图1.7所示。

按回车键确认选择后，Vue CLI会自动创建一个默认预设的Vue 3项目，并自动安装项目依赖，最后出现如图1.8所示的内容，表示创建Vue 3项目成功。

然后按照图1.8中的提示进入刚刚创建好的项目，并启动项目，继续运行如下命令（替换<project-name>为准备好的项目名称）：

最后，一个简单的Vue 3项目工程就创建好了。打开浏览器，输入上面的命令运行最后提示的地址，如笔者这里，输入http://localhost:8080/或http://192.168.162.97:8080/，如图1.9所示。

运行结果如图1.10所示。

3．Vite安装

Vite被称作下一代前端开发与构建工具，是一个基于浏览器原生ES imports的开发服务器，利用浏览器去解析imports，在服务器端按需编译返回，直接跳过了打包环节，服务器随起随用，其热更新速度不会随着模块的增多而变慢，因此目前已经在前端社区逐步开始流行。Vite的优势非常明显，如果读者的项目预期非常庞大，笔者推荐直接使用Vite来构建，使用Vite要求Node版本大于12。

通过在终端运行以下命令，可以使用Vite快速构建Vue项目。

使用npm安装：

使用yarn安装：