![Vue.js 3.x+Element Plus前端开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/80/47216080/b_47216080.jpg)
1.4.2 安装Vue的几种方法
1.npm/yarn安装
在用Vue构建大型应用时,推荐使用npm/yarn安装Vue,npm安装Vue的命令如下:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161457.jpg?sign=1739233463-n4dC5mQbMLYcAfc3dAVMzUHxIxVnSug0-0-e54db8c429023ad852b3fea193628326)
使用yarn安装依赖,需要先全局安装yarn,执行如下命令:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161458.jpg?sign=1739233463-aMYxmutJdo5FCVoJ1QiFSpAVdDmGkCXj-0-21538caa35ad560a4dbaea3b4ebcf52d)
然后通过yarn安装Vue,命令如下:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161460.jpg?sign=1739233463-LnmKxFyPEYoVA5YMYbpkig8EifIbnCMY-0-e0186ebe574f8f3adb7e8038073507a7)
Vue还提供了编写单文件组件的配套工具。如果需要使用单文件组件,还需要安装@vue/compiler-sfc:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161461.jpg?sign=1739233463-QTshqZroRZQnbAQlJB3G6yNchR6UM2RL-0-52e170be0d6bc5b2592cb5b6ea0a8d43)
大多数情况下,笔者更推荐使用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等工具进行全局安装,命令如下:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_99141.jpg?sign=1739233463-tW7IqMo6zLlYTQff3XdwG2EgBlRPbf87-0-74796d71e9e2d33cc065bc51eea655c8)
查看Vue CLI是否安装成功,运行如下命令:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161462.jpg?sign=1739233463-YPr2ipFJn8ZdTdB5dRLu2VmSj50RJ6Ko-0-e9dae1f3cad95ba5945150a012d9cf66)
或
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P21_161463.jpg?sign=1739233463-kLQQrKcxrGCzqi7NKvXigg880AnrP85k-0-61224afbabd50a7768248e3049ef6677)
笔者在写此书时,使用的Vue CLI版本是4.5.14,如图1.6所示,本书中所有Vue CLI创建的项目都使用该版本。
Vue CLI安装成功后,可以通过Vue CLI创建Vue 3应用,Vue CLI提供了多种预设方式,下面演示使用默认预设创建一个Vue 3项目:
首先,运行如下命令(将<project-name>替换成任意一个准备好的项目名称):
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P22_161467.jpg?sign=1739233463-tzXzmpz74RFqYw6hEXY7nE2Wa8BKJ4PM-0-aede8aba558a7ec00a50ce40e158b095)
执行上面的命令后,会出现交互提示Please pick a preset(选择预设),使用键盘上的方向键可以进行选择,这里笔者选择默认的Vue 3配置项,包含babel、eslint(Default ([Vue 3] babel, eslint),如图1.7所示。
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P22_99204.jpg?sign=1739233463-ot5vVlL49tsnKp7OVjQb3UH9GBEpcKUk-0-d00091051f169c6a1d8cc3b0d55efa98)
图1.6 Vue CLI版本号
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P22_99183.jpg?sign=1739233463-2sNvBleqgboASce2HpEjGmsK2p7wDkcb-0-ab4ab4886a093220c776c6c57a35639d)
图1.7 Please pick a preset
按回车键确认选择后,Vue CLI会自动创建一个默认预设的Vue 3项目,并自动安装项目依赖,最后出现如图1.8所示的内容,表示创建Vue 3项目成功。
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P22_99187.jpg?sign=1739233463-Q6iZ3EwK8ScsHljm14BzV0vSgRqrgFib-0-8d91b9e9813411f3637bf1995b523dbe)
图1.8 创建默认预设Vue 3项目成功
然后按照图1.8中的提示进入刚刚创建好的项目,并启动项目,继续运行如下命令(替换<project-name>为准备好的项目名称):
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P22_99195.jpg?sign=1739233463-ycHaSGeIXOFA5ZJfF46YQiD3Q2qmgEP1-0-59ea5213fd20e6c4128e00d518eb5d5c)
最后,一个简单的Vue 3项目工程就创建好了。打开浏览器,输入上面的命令运行最后提示的地址,如笔者这里,输入http://localhost:8080/或http://192.168.162.97:8080/,如图1.9所示。
运行结果如图1.10所示。
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P23_99296.jpg?sign=1739233463-PSGp4vlvf2mVacfW8pw3YGijMj01ZGjA-0-c38c7e2009f2730e37ca1e0f792b5a74)
图1.9 输入地址
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P23_99208.jpg?sign=1739233463-DbqWlRgqDZcGfmnTO9gXaapuZG7rd2SW-0-c1b2b29b790aa365d9aa6f72dbdfb972)
图1.10 启动项目运行结果
3.Vite安装
Vite被称作下一代前端开发与构建工具,是一个基于浏览器原生ES imports的开发服务器,利用浏览器去解析imports,在服务器端按需编译返回,直接跳过了打包环节,服务器随起随用,其热更新速度不会随着模块的增多而变慢,因此目前已经在前端社区逐步开始流行。Vite的优势非常明显,如果读者的项目预期非常庞大,笔者推荐直接使用Vite来构建,使用Vite要求Node版本大于12。
通过在终端运行以下命令,可以使用Vite快速构建Vue项目。
使用npm安装:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P23_99222.jpg?sign=1739233463-FTiAehWYr4GPJaoxHN5VFG1EiSJn5m0m-0-943ac1f40135b3a849d4ff81fd8ebf60)
使用yarn安装:
![](https://epubservercos.yuewen.com/944A24/26580761609034306/epubprivate/OEBPS/Images/Figure-P23_161474.jpg?sign=1739233463-r6fPL8zcHISPFaIDjSO6kQlg60BrlHzS-0-a064ae39892d563153b24db9530107f4)