1使用vite创建vue3项目 1.1工具要求 node ：>=12 @vue/cli ：>=4.3.1 1.2创建项目 npm init vite-app my-vue3
1.3启动 npm run dev
1.4使用vue工具 vue-router：>=4 vuex: >=4 2配置vite 根目录下，创建vite.config.js文件 参考地址：vitejs.cn/config/#opt… 基础配置展示：
3vite相比webpack的优点 3.1优点一：构建速度快 vite 使用esbuild预构建依赖。esbuild使用go语言编写，操作级别是纳米级别的 webapack构建使用node.js打包器构建，操作级别是毫米级别的。 故vite比用js编写的打包器快10-100倍。
3.2优点二： 开发启动快 3.2.1webpack开发启动过程 根据入口建立依赖图谱，生成ast，对ast进行处理转化，打包成浏览器可以识别的代码。在进行启动，有了一个打包的过程。当模块过多时，打包速度就会变慢，影响启动。
3.2.2vite开发启动过程 直接启动服务，对请求的模块按需编译。根据你的加载在按需的去编译。主要原理是劫持浏览器的请求，进行整合和处理，在返回给浏览器。利用了现代浏览器识别es-module的原理。
3.3优点三：热更新速度更快 webapack基于打包，每次更新就需要重新进行打包，更新速度明显较慢。 webpack支持了hrm，允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。
vite 使用原生ems。当更新某个模块时，vite只需要重新加载该模块，重新编译该文件即可。
4vite基本原理 4.1EMS vite是基于现代浏览器支持ES Module的原理。 在scrpit 标签上加上type=module后，浏览器对于此js文件内容中的关键字import有识别。 根据import关键词，浏览器会对此关键词导入的文件进行get请求，请求资源内容。
4.2基本架构 使用vite启动服务时，会启动一个koa服务器。服务器拦截浏览器esm的请求。服务器通过path找到对应目录下的文件进行一定处理以esm格式返回给客户端。
4.3 项目分析 对文件内容中路径进行处理，npm包路径加上/node_modules/便于处理。 修改理由：浏览器只能识别./ …/ /这种开头的路径，对于直接使用模块名的路径如import vue from Vue.浏览器就会因为无法识别到路径报错。
讲每个vue文件拆分为多个请求，通过type来标识template 还是style 还是script
