Vue-cli和Vite

一、创建项目

Vue-cli

创建项目：vue create 项目名

（创建完有node_modules包）

启动项目：yarn serve或npm run serve

Vite

创建项目： npm init vite       

（创建完是没有node_modules包的，需要npm install后生产node_modules）

启动项目：先 npm install 再 npm run dev

二、主要区别

Vite

在开发环境：基于浏览器原生ES6 Modules，无需对代码进行打包直接让浏览器使用。（开发环境下体验非常快）

在生产环境：基于RollUp打包

Vue-cli

在开发环境：基于对源码文件，用Webpack对代码进行打包，结合webpack-dev-server提供静态资源服务。

在生产环境：基于Webpack打包

Webpack有着生态更加丰富的loader，可以处理各种各样的资源依赖，以及代码拆分(Code Splitting)和按需合并。

三、优缺点

Vue-cli

优点：

1. 生态好、应用项目多；

2. 可以和Vue2Vue3结合；

3. 直接解析各种类型代码依赖；

4. 构建配置项丰富，插件全。

缺点：

1. 开发环境体验慢；

2. 只支持Vue；

3. 产物冗余代码多；

Vite

优点：

1. 开发环境体验快；

2. 支持Vue、React等；

3. 产物简洁清晰。

缺点：

1. 只针对ES6浏览器，生态不够完善；

2. 脚手架不包括Vuex，Router等。