一、環(huán)境搭建

首先，請(qǐng)確保已經(jīng)安裝了代碼編輯器和瀏覽器，如果沒有安裝推薦安裝VSCode和Chrome瀏覽器。

其次是安裝 Node.js，如果你的系統(tǒng)中還沒有安裝 Node.js ，可以進(jìn)入 Nodejs 官網(wǎng)下載相應(yīng)的安裝包進(jìn)行手動(dòng)安裝；如果已經(jīng)安裝了 Node.js，你可以使用這個(gè)命令檢查一下 Node.js 版本。

node -v

如果安裝了多個(gè)版本的Node.js，推薦使用 nvm 工具切換 Node.js 版本。安裝完 Nodejs 之后，包管理器npm也會(huì)被自動(dòng)安裝，你可以執(zhí)行下面的命令來(lái)驗(yàn)證。

npm -v

當(dāng)然，在現(xiàn)代的前端項(xiàng)目中，我非常不推薦使用 npm 作為項(xiàng)目的包管理器，甚至也不再推薦yarn(npm 的替代方案)，因?yàn)閮烧叨即嬖诒容^嚴(yán)重的性能和安全問(wèn)題，而這些問(wèn)題在 pnpm 中得到了很好的解決。使用pnpm之前，需要先安裝它，命令如下:

npm i -g pnpm

由于默認(rèn)的鏡像源在國(guó)外，包下載速度和穩(wěn)定性都不太好，因此我建議你換成國(guó)內(nèi)的鏡像源，這樣pnpm install命令的體驗(yàn)會(huì)好很多。

pnpm config set registry https://registry.npmmirror.com/

二、初始化項(xiàng)目

接下來(lái)，我們需要初始化一個(gè)Vite項(xiàng)目，可以在終端命令行中輸入如下的命令來(lái)初始化Vite項(xiàng)目。

pnpm create vite

在執(zhí)行完這個(gè)命令后，pnpm 首先會(huì)自動(dòng)下載 create-vite 這個(gè)第三方包，然后執(zhí)行這個(gè)包中的項(xiàng)目初始化邏輯。

首先，是輸入項(xiàng)目名稱，這里你可以輸入vite-project，然后按下回車，進(jìn)入選擇前端框架的部分：

Project name: vite-project
Select a framework: ? - Use arrow-keys. Return to submit.
    vanilla // 無(wú)前端框架
    vue     // 基于 Vue 
  react   // 基于 React
    preact  // 基于 Preact（一款精簡(jiǎn)版的類 React 框架）
    lit     // 基于 lit（一款 Web Components 框架） 
    svelte  // 基于 Svelte

Vite 內(nèi)置了以上不同前端框架的腳手架模板，這里我們選擇react框架，，緊接著選擇react-ts完成命令交互。等待腳手架的模板生成完畢，接下來(lái)執(zhí)行如下命令在本地啟動(dòng)項(xiàng)目：

// 進(jìn)入項(xiàng)目目錄
cd vite-project
// 安裝依賴
pnpm install
// 啟動(dòng)項(xiàng)目
pnpm run dev

到此這篇關(guān)于使用Vite從零搭建前端項(xiàng)目的文章就介紹到這了,更多相關(guān)Vite搭建前端項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論