Vite是一款面向現(xiàn)代瀏覽器的構(gòu)建工具，旨在提供快速的開發(fā)體驗(yàn)。

特點(diǎn)：

快速的冷啟動(dòng)：

Vite使用ES modules原生支持的瀏覽器特性，僅在需要時(shí)編譯代碼，從而實(shí)現(xiàn)快速的冷啟動(dòng)。在開發(fā)環(huán)境下，只有第一次啟動(dòng)時(shí)需要編譯全部代碼，之后修改代碼時(shí)只需要編譯修改的部分，因此可以實(shí)現(xiàn)秒級(jí)的熱更新。

熱模塊替換

Vite支持熱模塊替換（HMR），在開發(fā)過程中修改代碼時(shí)，不需要刷新整個(gè)頁面，而是僅替換修改的模塊，從而提高開發(fā)效率。

基于插件：

Vite基于Rollup構(gòu)建，提供了豐富的插件機(jī)制，可以方便地?cái)U(kuò)展其功能。同時(shí)，Vite還提供了一些內(nèi)置插件，如Vue和React插件，可以讓我們更方便地開發(fā)Vue和React應(yīng)用。

零配置：

Vite支持零配置，可以直接使用默認(rèn)配置進(jìn)行開發(fā)。如果需要自定義配置，可以通過vite.config.js文件進(jìn)行配置。

使用Vite創(chuàng)建項(xiàng)目：

//使用npm創(chuàng)建Vite項(xiàng)目非常簡單，只需要執(zhí)行以下命令：
npm init vue@latest
Project name:  //這里寫項(xiàng)目名稱就可以
Package name：//同名即可
Add TypeScript? … No / Yes
//學(xué)過Ts的同志們可以選擇
Add JSX Support? … No / Yes
//你是否要添加 JSX 支持，以便在 Vue.js 項(xiàng)目中使用 JSX 語法。
//如果你想使用 JSX可以選擇安裝相應(yīng)的插件，否則可以跳過這一步。
Add Vue Router for Single Page Application development? … No / Yes
//提示你是否要添加 Vue Router 來支持單頁應(yīng)用程序開發(fā)。
//Vue Router 是 Vue.js 的官方路由管理器，它可以幫助你構(gòu)建單頁應(yīng)用程序，并處理頁面之間的導(dǎo)航。
Add Pinia for state management? … No / Yes
//pinia 和 vuex 具有相同的功效，是Vue 的存儲(chǔ)庫，它允許您跨組件|頁面共享狀態(tài)。
Add Vitest for Unit testing? … No / Yes
//提示你是否要添加 Vitest 來支持單元測試。Vitest 是 Vue.js 的官方單元測試工具。
//它可以幫助你編寫和運(yùn)行單元測試，以確保你的代碼的正確性和穩(wěn)定性。
Add Cypress for both Unit and End-to-End testing? … No / Yes
//提示你是否要添加 Cypress 來支持單元測試和端到端測試。
//Cypress 是一個(gè)用于編寫端到端測試的 JavaScript 測試框架。
//它可以幫助你編寫和運(yùn)行單元測試和端到端測試，以確保你的應(yīng)用程序的正確性和穩(wěn)定性。
Add ESLint for code quality? … No / Yes
//提示你是否要添加 ESLint 來提高代碼質(zhì)量。ESLint 是一個(gè)用于靜態(tài)代碼分析的工具。
//它可以幫助你在編寫代碼時(shí)檢測出潛在的問題和錯(cuò)誤，從而提高代碼的質(zhì)量和可讀性。
Add Prettier for code formatting? … No / Yes
//提示你是否要添加 Prettier 來提高代碼格式化。Prettier 是一個(gè)用于自動(dòng)化代碼格式化的工具。
//它可以幫助你統(tǒng)一你的代碼格式，并使代碼具有一致的風(fēng)格。
//項(xiàng)目到這里就創(chuàng)建完成了，下面是怎么啟動(dòng)Vite項(xiàng)目
cd //項(xiàng)目路徑
npm install //下載依賴包
npm run dev //就啟動(dòng)完成了