Vite的基本使用

认识Vite

• 什么是Vite？官方的定位：下一代前端开发与构建工具
• Vite是一种新型前端构建工具，能够显著提升前端开发体验。

Vite的构造

它由两部分组成：

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快。
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源。

Vite的安装和使用

• Vite要求Node版本大于12的
• npm install vite -D
• 通过vite来启动项目： npx vite

Vite可以直接支持css的处理：

直接导入css即可

如果要编译less文件：

• 直接导入less文件

• 安装less编译器：npm install less -D

Vite支持postcss的转换：

• 只需要安装postcss，并配置postcss.config.js即可：
• npm install postcss postcss-preset-env -D

module.exports =