2.1　使用Vite创建Vue3项目

本节讲解使用Vite快速创建Vue3项目，使用Vite创建Vue3项目有哪些优点呢？

• 高效的开发体验：Vite在开发阶段具有惊人的速度，可以极大地提高开发效率。采用新的打包方式，可以在无须预先构建的情况下进行实时编译，并且在修改代码时自动更新浏览器，提高开发性能。
• 更少的依赖：Vite不再需要像传统的Webpack那样打包所有的依赖，这将减少构建的时间，减小输出文件的大小，有助于提高性能。
• 灵活的配置选项：Vite提供了很多可以配置的选项，开发者可以根据项目的需求进行自定义，如CSS预处理器等。
• 支持热模块替换：Vite使用热模块替换实现在不刷新整个页面的情况下更新应用程序的部分内容。

总体来说，使用Vite创建Vue3项目可以提供更灵活、更高效的开发体验。

在了解了Vite的优点之后，让我们深入了解如何使用Vite创建Vue3项目，下面将展示操作过程，帮助您构建一个全新的Vue3应用程序。

创建站点并在终端打开，在终端中运行下述命令安装Vite。

npm create vite@latest my-vue-app -- --template vue

注意：

项目中的所有模块均使用npm包管理器进行安装。

Vite安装完成之后运行cd命令，进入my-vue-app站点，运行npm install命令，安装项目依赖，最后运行npm run dev命令，启动Vue3项目，操作过程如图2-1所示。

图2-1

提示：

Vite需要Node.js的版本为14.18+，npm的版本为7+，当包管理器发出警告时，请注意升级Node.js的版本。