最后
最后写上我自己一直喜欢的一句名言：
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
打开命令行工具，使用npm命令：
npm init vite@lasted
运行结果，如图：
输入需要创建的项目名“ learn_vite ”，如果不输入，默认是 “ vite-project ” 。
回车进行下一步，需要选择创建项目的类型，如图：
使用上下箭头切换，选择我们最熟悉的 vue ，回车进行下一步。
进行选择是否为 ts? vite 原生支持 ts 。我们直接选择vue。不要 ts。
此时，项目创建完成了，需要进入项目，安装依赖，就可以启动服务了。
根据提示地址，去访问我们刚刚创建的第一个项目。如图所示。
2.2、 vite创建文件目录
创建好项目之后，使用编辑器打开项目，我们可以看到项目结构如图：
学习vite是如何运行项目的，首先从配置文件入手。打开package.json文件，代码如下：
{
"name": "learn_vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}
找到启动项目的命令，以及打包命令。
三、vite VS webpack
3.1、vite 速度快有多快？
我们创建两个项目，一个使用 vite ，另一个使用 webpack 。创建完成之后，启动服务，对比启动时间，我们就知道 vite 有多快了。
启动服务时，webpack 需要先打包项目，打包之后再启动项目，但是 vite 完全跳过了打包这个概念，服务器随起随用。所以在启动服务时，vite 比 webpack 的速度快多了。
3.2、vite 热更新效率有多高？
一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时，使模块图的一部分失活，但它也需要整个重新构建并重新载入页面。这样代价很高，重新加载页面会失去应用的当前状态。所以 vite 支持了动态模块热加载（HMR），也就是允许一个模块“热替换”自己，对页面的其他部分没有影响，也就是只替换更新了一部分有改变的元素，所以大大改进了开发体验。
vite 同时还利用 http 头加速整个页面的加载，依赖模块请求会通过 Cache-Control:max-age=31536000，immutable 进行强缓存，再次请求的时候，缓存的内容就不需要再次请求。
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后写上我自己一直喜欢的一句名言：
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
