Vite是什么
主流的构建工具
- Webpack
- Vite
- Rollup
- Esbuild
- Parcel
提供现代前端项目常见功能
-
Typescript：将我们编写的Typesript编译为
-
React/Vue：将React的Jsx，Vue的模板编译为Render函数
-
Less/Sass：将Less，Sass等预处理语言编译为css
-
语法兼容：将高版本的语言特性兼容到低版本的浏览器中
-
性能优化：将项目的构建产物压缩，优化，提高访问速度
-
模块化：将我们编写的模块化代码，解析合并为一个文件
-
热更新：代码开发阶段实现代码修改自动更新浏览器页面
Vite初体验
搭建前端项目
手动搭建项目流程
- 新建文件夹作为项目目录
- yarn init -y 初始化项目目录，生成package.json
- 新建index.html入口文件
- 新建文件main.js，简单输出一句话console.log('vite 启动');
- 在index.html中引入main.js文件
- cmd运行 yarn add lodash vite 安装 vite
启动项目
- cmd运行 yarn vite dev
脚手架搭建项目
- vite官方提供的脚手架是create-vite 运行 yarn create vite 就可以创建一个预设好各种功能的项目文件夹
