Vue3 中 Vite 和 Vue-cli 的特点与区别详解

1. 创建3.0项目

使用vue-cli时，需先安装并执行命令 npm init vue@latest 来初始化项目。

在配置项目功能选项时，除项目名称外，其余可选功能暂时选择“No”即可。

cd title

npm install

npm run dev ：运行

npm run build: 打包 (生成一个dist文件夹)

若使用Vite，其体验更为快速。

npm init vite-app title

cd title

npm install

npm run dev

其中 title 参数代表创建 Vue3 项目时指定的文件夹名称。

Vite 与 Vue-cli 是什么？

Vue-cli 的特点：

它是 Vue2.0 时代优秀的前端构建工具，被视为 WebPack 的超集。

Vue-cli 基于 WebPack 构建，内部已配置好打包规则。

它内置了支持热模块重载（HMR）的开发服务器。

拥有庞大的官方插件合集，依托于 WebPack 丰富的社区资源。

提供友好的图形化界面用于创建和管理 Vue 项目，即 vue ui。

在启动前端服务前，vue-cli 需将所有代码打包成 Bundle，这导致大型项目启动速度较慢。Vite 对此进行了大幅优化。

Vite 的特点：

Vite 是由 Vue 团队开发的新一代前端开发与构建工具，它不基于 WebPack。

为了解决项目启动缓慢的问题，Vite 将应用模块分为依赖和源码两类，从而改善了开发服务器的启动速度。

依赖部分通常是不变动的纯 JS 文件，处理大型组件库（如包含上百模块的 element-ui）成本较高，且格式多样。Vite 使用 Go 编写的 esbuild 进行依赖预构建，速度比 JS 打包器快 10-100 倍。

源码部分通常包含需转换的非 JS 文件，且常被编译。并非所有源码需同时加载（例如基于路由拆分的代码模块）。

上述机制正是 Vite 启动速度快的原因。

Vite 和 Vue-cli的区别：

1. Vite 基于原生 ES6 Modules，生产环境打包使用 Rollup。
2. Vue-cli 基于 WebPack 封装，开发环境和生产环境均基于 WebPack 打包。
3. 因此，两者在生产环境下均基于源代码文件进行打包。
4. 在开发环境中，Vite 利用原生 ES6 特性，无需打包代码，浏览器可直接调用，省去了打包过程，开发体验极佳。
5. Vite 会取代 vue-cli 吗？ Vue 创始人尤雨溪（Evan You）在 Twitter 上表示：起初不确定，但目前相信最终会是这样。

总结：

以上介绍了 Vue3 中 Vite 和 Vue-cli 的特点及区别。

本文到此结束，更多 Vue3 Vite 和 Vue-cli 区别内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！