vite详解

一、vite简介

一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite3，Vite全新的插件架构、丝滑的开发体验，可以和Vue3完美结合。

优势分析

• Vite主要对应的应用场景是开发模式，跳过打包按需加载，因此更新的速度非常快；
• 在大型项目上可以有效提高本地开发编译打包的速度，解决“改一行代码等半天”的问题；
• 浏览器解析 imports，利用了 type="module"功能，然后拦截浏览器发出的 ES imports 请求并做相应处理；
• 闪电般的冷启动速度；
• 即时热模块更换（热更新）；
• 真正的按需编译；

总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可拓展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。

浏览器支持

• 开发环境中：Vite需要在支持原生 ES 模块动态导入的浏览器中使用。
• 生产环境：默认支持的浏览器需要支持通过脚本标签来引入原生 ES 模块。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。

二、vite搭建vue3.x项目

可以使用npm或yarn来初始化Vite项目

Node.js的版本需要 >= 12.0.0

1、创建项目

npm创建

 yarn创建

 2、集成Vue-Router

Vue-Router作为大多数项目必不可少的路由工具，已经被大多数的前端项目所使用，Vue-Router可以让构建单页面应用变得更加的容易。

安装