开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情
vite，起源于法语：很快的意思。
为什么要用vite
vite为什么那么快呢？归结于vite的几个特点：
- 冷服务不打包
- 用es6 import 来引入对应 的js
- 使用rollup 去打包
- 开发中有热更新
- 等等
不过vite只能用于创建vue3项目~
vite2.0的主要特点
- 多框架支持
Vite 一开始主要注重于 Vue 的单文件组件支持，现在 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版，而 Svelte 社区也在开发 Vite 整合方案。
- 全新插件机制和 API
Vite 的 JS API 也得到了大幅改进，并且已经有不少用户在开发基于 Vite 的上层框架，Nuxt 团队也已经在 Nuxt 3 中验证了初步整合的可行性。
- 基于 esbuild 的依赖预打包
Vite 之前是使用 Rollup 来执行这个过程，而 2.0 切换到了 esbuild，使这个过程加快了几十倍。
-
更好的 CSS 支持 Vite 将 CSS 看作模块系统中的一等公民，并且内置了一下支持：强化路径解析、自动 URL 改写和CSS 代码分割
-
服务端渲染 (SSR) 支持
Vite 2.0 提供实验性的 SSR 支持
- 旧浏览器支持 Vite 默认只支持原生支持 ESM 的现代浏览器，但可以通过官方的 @vitejs/plugin-legacy 来支持旧浏览器。
创建vite项目
创建项目
npm init vite-app (project 项目名)
安装依赖包
cd (project 项目名)
npm install
项目运行
npm run dev
当当当当~成功了
然而vite3已经发布了
vite3创建项目：
npm create vite
# project name -> demo
# select a framework -> vue
# select a variant -> vue
cd demo
npm install
npm dev
运行后效果如下：
vite 3.0做了哪些更新
- 模板做了变更
- Vite CLI在命令行中的样式做了优化，默认端口也做了更改
import.meta.globAPI可以动态导入文件，允许import.meta.glob被重写- vite整体体积变小了
- js和css压缩工具使用了ESbuild
- 修复了n多个bug
- 兼容性做了调整，最低支持node14.18+
如何在vite项目中使用TypeScript
如果在项目中需要使用到TypeSciprt，只需要将script的lang="lang"即可。
<script lang="ts">
……
</script>
如何在vite项目中使用 less sass
这三者比较类似，首先安装依赖
less:
npm install less less-loader -D
sass:
npm install sass node-sass sass-loader -D
使用：
css
<style lang="scss" scoped>
.bg{
background:red;
}
</style>
