一分钟科普帖：vite和vue-cli

vite是什么？

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。

---

一、Vite概述

与Vue CLI类似，Vite也是一个提供基本项目脚手架和开发服务器的构建工具。

然而，Vite并不是基于Webpack的，它有自己的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了好几个数量级。Vite采用Rollup进行构建，速度也更快。

Vite目前还处于测试阶段，看来Vite项目的目的并不是像Vue CLI那样的一体化工具，而是专注于提供一个快速的开发服务器和基本的构建工具。

它的两主要组成部分：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能
• 一套构建指令，它使用 rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

二、vite基本使用：

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i或者 yarn
• 启动项目 npm run dev 或者 yarn dev

三、总结

Vue/cli：

Vue CLI 优点	Vue CLI 缺点
经历过战斗考验，可靠	开发服务器速度与依赖数量成反比
与Vue 2兼容
可以捆绑任何类型的依赖关系
插件生态系统
可以针对不同的目标进行构建

Vite：

Vite 优点	Vite 缺点
开发服务器比Webpack快10-100倍	只能针对现代浏览器（ES2015+）
将code-splitting作为优先事项	与CommonJS模块不完全兼容
	处于测试阶段，仅支持Vue 3
	最小的脚手架不包括Vuex、路由器等
	不同的开发服务器与构建工具