、vite、vue-cli、-vue 这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。
先看这个表格：
脚手架
vue-cli
-vue
构建项目
vite
打包代码
是不是有了一个整体的感觉？我们再来详细地看一下。
vue-cli
官网：
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
vue-cli 是 Vue 早期推出的一款脚手架，使用 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、等。
vue-cli 用于创建 vue2 的项目；
@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。
使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue hello-world 创建项目，具体的就不介绍了。
-vue
官网：#with-build-tools
-vue 是 Vue3 专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
使用方式
npm init vue@latest
or
yarn create vue
可选插件
然后我们可以选择需要的各种插件：
官方最新文档已经看不到 vue-cli 的身影了，只有 -vue 的使用方式，所以大家可以放心食用。
vite
官网：
Vite（法语意为 "快速的"，发音 /vit/ ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
一个开发服务器webpack，它基于 原生 ES 模块 提供了 丰富的内建功能，速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。
目前支持的模板预设如下：
-ts
vue
vue-ts
react
react-ts
-ts
lit
lit-ts
-ts
官网：
是一种打包工具，特点就是，打得包非常精简，体积小。
官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。
尤雨溪在知乎的一次回答（）里提到：
core 是一个纯打包工具（对标 ），而 Vite 其实是一个更上层的工具链方案，对标的是 （ + 针对 web 的常用配置 + -dev-）。
core 因为只针对打包不预设场景，所以设计得极其灵活，不局限于针对 web 打包，几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定的场景依然不可替代。
但反过来导致的缺点就是配置项极度复杂，插件机制和内部逻辑晦涩难懂，针对常见的 web 也需要大量的配置。
另外大量 插件虽然单独发布却存在各种隐式耦合，很容易配置不当互相影响。对于新手来说，把 从零开始配到跟 Vite 开箱即用功能对等的程度根本是不可能的任务，所以大部分团队/公司要么用的是基于 包一层的脚手架（umi, vue-cli），或是专门养一个人称 配置工程师的角色。
小结
是一个全能选手webpack，啥都能干，只是有点复杂，对新手不太友好。
是后起之秀，打包更简洁。
vite 把 变成了“开袋即食”，便于新手入门。
-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。
所以，想创建一个 vue3 的项目，首选 -vue，非常方便快捷，建立的项目也可以统一风格。
限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情
站长微信:Jiucxh
