入門

概述

Vite（法語為 fast，發(fā)音為/vit/）是一種構(gòu)建工具，旨在為現(xiàn)代Web項(xiàng)目提供更快，更精簡的開發(fā)體驗(yàn)。它包含兩個(gè)主要部分：

• 一個(gè)開發(fā)服務(wù)器，它在本機(jī)ES模塊上提供了豐富的功能增強(qiáng)，例如，極快的Hot Module Replacement（HMR）。

• 一個(gè)構(gòu)建命令，將您的代碼與Rollup捆綁在一起，該Rollup已預(yù)先配置為輸出高度優(yōu)化的靜態(tài)資源進(jìn)行生產(chǎn)。

Vite固執(zhí)己見，并具有開箱即用的明智默認(rèn)值，但通過其Plugin API和JavaScript API具有完全鍵入支持，它也可以高度擴(kuò)展。

瀏覽器支持

• 對(duì)于開發(fā)：需要本地ESM動(dòng)態(tài)導(dǎo)入支持。

• 對(duì)于生產(chǎn)：默認(rèn)構(gòu)建針對(duì)通過script標(biāo)簽支持本機(jī)ESM的瀏覽器?？梢酝ㄟ^官方@ vitejs / plugin-legacy支持舊版瀏覽器-有關(guān)更多詳細(xì)信息，請(qǐng)參見“生產(chǎn)版本”部分。

搭建您的第一個(gè)Vite項(xiàng)目

兼容性問題

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

• 使用 NPM：

npm?init?@vitejs/app

• 使用 yarn：

yarn?create?@vitejs/app

然后按照提示進(jìn)行操作！

您還可以通過其他命令行選項(xiàng)直接指定項(xiàng)目名稱和要使用的模板。例如，要搭建Vite + Vue項(xiàng)目，請(qǐng)運(yùn)行：

#?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

支持的模板預(yù)設(shè)包括：

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

index.html 和項(xiàng)目根

您可能已經(jīng)注意到的一件事是，在Vite項(xiàng)目中，index.html它處于中心位置而不是隱藏在內(nèi)部public。這是故意的：在開發(fā)過程中，Vite是服務(wù)器，并且index.html是應(yīng)用程序的入口點(diǎn)。

Vite視為index.html源代碼和模塊圖的一部分。它解決

<b id="afajh"><abbr id="afajh"></abbr></b>