大家好！今天是2023年1月3日，2023年的第一上班工作日，大家新好！近期在做网站建设时用到了Vue3框架，但在Vite和Vue-cli的使用上遇到了些问题，经过网上搜索和学习，稍微有了一些思路，现记录下来和大家一起分享。vue-cli是Vue早期推出的一款脚手架,使用webpack创建Vue项目,可以选择安装需要的各种插件,比如Vuex、VueRouter。在使用过程应该如何来使用Vite和Vue-cli呢？

1. 首先是创建3.0项目

ue-cli : 安装并执行 npm init vue@latest

选择项目功能时： 除了第一项的项目名字外，其他可以暂时No

cd title

npm install

npm run dev ：运行

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

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

vite: 使用vite 体验更快速

npm init vite-app title

cd title

npm install

npm run dev

title 代表创建 Vue3 项目的文件夹名称

2、Vite 与 Vue-cli 是什么？

Vue-cli 的特点：

是Vue2.0最棒的前端构建工具，是WebPack的超集

Vue-cli 基于WebPack构建，配置好了打包规则

内置了热模块重载的开发服务器

有丰富的官方插件合集，站在webpack庞大的社区资源上

友好的图形化创建和管理Vue项目界面 : vue ui

vue-cli在(前端)服务启动之前，要把所有代码打包成Bundle再启动服务，这也是为什么一个些大型项目 启动时，特别慢的原因。这一点在Vite做了大幅度改善。

Vite 的特点：

Vite是Vue团队开发的新一代前端开发与构建工具，vite不是基于webpack,

它为了解决项目启动慢的问题，vite通过一开始将应用中的模块分为依赖和源码两类，改进了开发服务器的启动慢的特点；

依赖： 大多为在开发时，不会变动的纯js，一些较大的依赖(例如有上百个模块的组件库：element-ui) ,处理的代价很高。依赖通常会存在多种模块化的格式.vite会使用esbuild预构建依赖，esbuld使用Go编写，并且比 js编写的打包器，速度快10-100倍；

源码： 通常包含一些并非直接是js的文件，需要转换，时常被编译。同时，并不是所有的源码都需要同时被加载。(例如：基于路由拆分的代码模块)。

以上： 这就是为什么vite启动快的原因；

3、Vite 和 Vue-cli的区别：

vite是基于原生Es6 Modules，在生产环境下打包使用的Rollup；

vue-cli基于webpack封装，生产环境和开发环境都是基于webpack打包；

所以两者在生产环境都是基于源代码的文件打包。

在开发环境中，Vite是基于原生的es6，无需对代码进行打包，浏览器可以直接调用，所以说vite因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验极好；

vite会取代vue-cli吗？ 尤雨溪(Evan You)在Twitter上说：起初我不确定，但在这个阶段，我相信最终会是这样。

好了，以上内容就是今天要和大家分享的Vue3框架中中Vite和Vue-cli的特点区别及具体使用方法，如果喜欢的话记得收藏哦！