vite的使用

vite构建vue3项目

1、什么是vite

vite是一个web开发构建工具，由于其原生ES模块导入方法，它允许快速提供代码，在开发环境基于浏览器原生ES imports开发，在生产环境下基于Rollup打包。使用vite快速构建项目比webpack打包更加快速。

它主要具有以下特点：
1.快速的冷启动
2.即时的模块热更新
3.真正的按需编译

生产环境：比如说 npm run dev 在启动的时候，实际上是边在写的时候它会有一个解析调试的过程；
开发环境：就是我们在执行npm run build后的一些相关处理。

1.1、vite和vue-cli的区别

它们两个在生产环境下都是基于我们的源代码文件进行打包的；
vite在开发环境下由于它是基于原生ES模块，它不需要对我们的代码进行打包，浏览器是可以直接调用的，因为vite在开发环境时是基于浏览器支持的ES模块，它相当于可以让浏览器直接的进行解析模块，然后服务器按需编译即可，所以使用vite就可以省掉了打包和解析这个过程。

2、安装vite

提示： -g 是全局安装的意思

npm i -g vite

查看vite版本

vite -v

3、创建vue3项目

3.1、初始化vite

npm inti vite

3.2、安装依赖

npm install

3.3、启动项目

npm run dev

项目启动后，网页上出现这个页面就证明成功了