入门
概述
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项目，请运行：
代码语言：javascript复制# 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源代码和模块图的一部分。它解决<script type="module" src="...">了引用您的JavaScript源代码的问题。即使<script type="module">通过引用的内联和CSS<link href>也享受Vite特定的功能。此外，内部index.html的URL会自动重新设置基础，因此不需要特殊的%PUBLIC_URL%占位符。
与静态http服务器类似，Vite具有“根目录”的概念，从中可以从中提供文件。您会<root>在其他文档中看到它的引用。源代码中的绝对URL将使用项目根目录作为基础来解析，因此您可以像使用普通静态文件服务器一样（除非功能更强大！）来编写代码。Vite还能够处理解析为根目录以外的文件系统位置的依赖项，即使在基于Monorepo的设置中也可以使用。
指定备用根
运行vite时以当前工作目录为根目录启动开发服务器。您可以使用指定备用根vite serve some/sub/dir。
命令行界面
在安装了Vite的项目中，您可以vite在npm脚本中使用二进制文件，也可以直接通过运行它npx vite。这是脚手架Vite项目中的默认npm脚本：
代码语言：javascript复制{
"scripts": {
"dev": "vite", // start dev server
"build": "vite build", // build for production
"serve": "vite preview" // locally preview production build
}
}
您可以指定其他CLI选项，例如--port或--https。有关CLI选项的完整列表，请npx vite --help在您的项目中运行。
使用未发布的提交
如果您迫不及待地需要一个新版本来测试最新功能，则需要将vite存储库克隆到本地计算机，然后自己构建并链接它（需要使用Yarn 1.x）
代码语言：javascript复制git clone https://github.com/vitejs/vite.git
cd vite
yarn
cd packages/vite
yarn build
yarn link
然后转到基于vite的项目并运行yarn link vite。现在，重新启动开发服务器（yarn dev）以顺其自然！
