
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所示。

图1.6 Vue CLI版本号

图1.7 Please pick a preset
按回车键确认选择后,Vue CLI会自动创建一个默认预设的Vue 3项目,并自动安装项目依赖,最后出现如图1.8所示的内容,表示创建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所示。

图1.9 输入地址

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

使用yarn安装:
