Vite(在法语中是:”快”的意思)是一种 Vue 构建工具(目前来说),由 Vue 作者-尤雨溪 开发。

速度


官方的说法中 Vite 具有模块热更新的特点,项目可按需编译运行。

  • 即时服务器启动(按需文件服务于本地ESM,无需捆绑)
  • 闪电快速HMR(无论应用大小如何,热模块更换 (HMR) 都能保持快速状态。)
  • 优化构建(预配置的卷起构建与多页和库模式支持。)
  • 通用插件(在开发和构建之间共享的卷起-超级集插件接口。)
  • 丰富功能(对类型脚本、JSX、CSS 等的开箱即用支持。)
  • 完全键入的 ABI(具有完整类型脚本键入的灵活编程 ABI。)

从构建项目到打包、运行的速度上,甚至可能快于 Webpack。(我在创建项目使用时能直观的感受到)

[ Vite ] build

1

[ Webpack ] build

2

简洁


Vite 的相关工具可通过 yarn 和 npm 安装(以npm为例):npm install -g create-vite-app。像往常构建 Webpack 项目一样的类似操作来运行项目:npm install 安装依赖 npm run dev 启动。
但是能够发现在文件目录结构上更加简洁了。

1
2
3
4
5
6
|____node_modules
|____public //静态文件
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json

热更新 | 冷启动

在 Vite 项目中支持资源文件、样式、脚本的冷启动和热更新。对于资源会按需优先加载。并且可通过直接调试(当修改源代码保存后页面也会跟着发生改变)

1

CSS 预处理器

Vite 对于 SASS 等预处理器甚至 JSX 也能良好的支持。
在使用前可以在项目目录下通过 npm install -D sass 来安装 SASS
在 Vue 组件中编写 style 标签设置属性 lang="scss" 即可。不仅可通过直接调试以及热更新(当修改源代码保存后页面也会跟着发生改变),它们还会在项目打包时编译成 CSS 文件。就像 WebPack 一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

<style lang="scss">
$color: rgb(150, 150, 150);
body {
background-color: $color;
}
</style>

JSX 的支持

在 Vite + Vue 项目中,还可以支持 React JSX 的构建。
只需要引入即可!

1