入门

概述

Vite（法语为 fast，发音为/vit/）是一种构建工具，旨在为现代Web项目提供更快，更精简的开发体验。它包含两个主要部分：

• 一个开发服务器，它在本机ES模块上提供了丰富的功能增强，例如，极快的Hot Module Replacement（HMR）。

• 一个构建命令，将您的代码与Rollup捆绑在一起，该Rollup已预先配置为输出高度优化的静态资源进行生产。

Vite固执己见，并具有开箱即用的明智默认值，但通过其Plugin API和JavaScript API具有完全键入支持，它也可以高度扩展。

浏览器支持

• 对于开发：需要本地ESM动态导入支持。

• 对于生产：默认构建针对通过script标签支持本机ESM的浏览器。可以通过官方@ vitejs / plugin-legacy支持旧版浏览器-有关更多详细信息，请参见“生产版本”部分。

搭建您的第一个Vite项目

兼容性问题

Vite需要Node.js版本> = 12.0.0。

• 使用 NPM：

npm init @vitejs/app

• 使用 yarn：

yarn create @vitejs/app

然后按照提示进行操作！

您还可以通过其他命令行选项直接指定项目名称和要使用的模板。例如，要搭建Vite + Vue项目，请运行：

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts

index.html 和项目根

您可能已经注意到的一件事是，在Vite项目中，index.html它处于中心位置而不是隐藏在内部public。这是故意的：在开发过程中，Vite是服务器，并且index.html是应用程序的入口点。

Vite视为index.html源代码和模块图的一部分。它解决