【vue3|第2期】vue3基于vue-cli创建与基于vite创建的区别与联系

最新推荐文章于 2025-08-06 16:01:53 发布

原创最新推荐文章于 2025-08-06 16:01:53 发布 · 1.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #vue #vue3

Vue 专栏收录该内容

29 篇文章

订阅专栏

日期：2024年5月19日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

在这里插入图片描述

一、前言

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。在 Vue.js 的世界里，随着 Vue3 的发布，我们迎来了新的构建工具选项。特别是当涉及到新项目的创建时，你可能会面临选择：是使用传统的基于webpack的Vue CLI（vue-cli），还是选择新兴的快速构建工具Vite？本文将帮助你了解两者的区别与联系，以便你能够根据自己的需求做出更好的选择。下面我们将探讨这两种方式的区别和联系。

二、Vue CLI

Vue CLI（Command Line Interface）是一个基于 Vue.js 进行项目开发的标准化工具。它提供了一个命令行界面，允许开发者快速搭建Vue项目框架，并包含了项目配置、插件系统、预设等多种功能。

（3-1）创建项目流程

全局安装 Vue CLI：
```
npm install -g @vue/cli
```
使用 Vue CLI 创建新项目：
```
vue create my-vue3-project
```
选择或配置项目选项，如预设、插件等。
项目创建完成后，进入项目目录并运行开发服务器：
```
cd my-vue3-project
npm run serve
```

（3-2）特点

丰富的插件和预设：Vue CLI 提供了大量的官方和社区插件，可以轻松集成各种工具和库。
详细的配置：Vue CLI 允许开发者通过 vue.config.js 文件进行详细的配置。
热重载：支持热模块替换（HMR），提高开发效率。

三、Vite

Vite 是一个由原生 ES Module 驱动的现代前端构建工具，它利用浏览器原生 ES Module 支持来提供快速的开发体验。Vite 在开发环境下无需打包，可以显著提升项目的构建速度。

（3-1）创建项目流程

使用 Vite 创建新项目：
```
npm create vue@latest
```
选择或配置项目选项

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

安装依赖并启动开发服务器：

 cd <your-project-name>
 npm install
 npm run dev

（3-2）特点

极速的开发服务器启动：Vite 在开发模式下不需要打包，服务器启动速度极快。
简化的配置：Vite 提供了简洁的配置文件 vite.config.js，易于上手。
原生 ES Module 支持：Vite 利用浏览器的 ES Module 支持来加载模块，无需打包即可直接运行。

四、区别与联系

构建速度：Vite 在开发模式下具有更快的构建速度，因为它不需要打包，而是直接利用浏览器解析 ES Module。Vue CLI 在每个文件变化时都需要重新打包，因此在大型项目中可能会有较慢的构建速度。
配置复杂度：Vue CLI 提供了丰富的插件和详细的配置选项，适合需要复杂配置的项目。Vite 则提供了更简洁的配置，适合快速启动和需要较少配置的项目。
插件生态：Vue CLI 拥有成熟的插件生态，许多第三方库和工具都与 Vue CLI 兼容。Vite 虽然是一个较新的工具，但其插件生态也在快速发展。
适用场景：Vue CLI 适用于各种规模的项目，特别是需要复杂配置和插件支持的大型项目。Vite 更适合追求快速开发体验和构建速度的小型到中型项目。

五、如何选择

项目需求：如果你的项目有复杂的构建需求或需要兼容多种环境，那么vue-cli可能更适合你。而如果你的项目更注重开发体验和性能，那么vite可能是一个更好的选择。
技术栈：如果你的团队已经熟悉了webpack和vue-cli的使用，那么继续使用vue-cli可能更有效率。如果你的团队愿意尝试新技术，那么vite可能是一个值得尝试的选择。
学习成本：如果你是一个初学者或希望快速上手Vue项目，那么vue-cli可能更容易上手。而如果你愿意投入时间去学习新的构建工具，那么vite也是一个不错的选择。

六、总结

Vue CLI 和 Vite 都是创建 Vue 3 项目的有效工具，它们各有优势和适用场景。Vue CLI 提供了成熟的插件系统和详细的配置选项，适合需要高度定制的大型项目。而 Vite 则以其快速的构建速度和简洁的配置，为开发者提供了现代化的开发体验，适合追求快速启动和开发效率的项目。开发者可以根据项目的具体需求和团队的偏好来选择合适的工具。

参考文章：