创建工程

Misaka10032工程初始化脚手架Vite大约 1 分钟

使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-createopen in new window

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#viteopen in new window

vite 官网：https://vitejs.cnopen in new window

初始化步骤

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

优秀的冷启动

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

以 webpack 为基础的项目bundle启动方式

webpack-bundle
webpack-bundle

以 vite 为基础的项目esm启动方式

vite-esm
vite-esm

与 webpack 比较

首先我们知道，vite 主要还是用来在开发跟发布过程中的一个替代 webpack 的解决方案

虽然生产环境依然还是通过rollup打包的，但是在开发环境中，是使用的vite自身的模式，来改正了webpack在打包依赖的过程中时间太长的问题

从这里可以看出

1.vite是一个基于开发环境下的构建工具

2.vite其实并不能完全替代webpack，更偏向于优化版的webpack-dev-server

更多Vite的分析详见Vite工具