您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何使用Vite從零搭建前端項目”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
首先,請確保已經(jīng)安裝了代碼編輯器和瀏覽器,如果沒有安裝推薦安裝VSCode和Chrome瀏覽器。
其次是安裝 Node.js,如果你的系統(tǒng)中還沒有安裝 Node.js ,可以進入 Nodejs 官網(wǎng)下載相應(yīng)的安裝包進行手動安裝;如果已經(jīng)安裝了 Node.js,你可以使用這個命令檢查一下 Node.js 版本。
node -v
如果安裝了多個版本的Node.js,推薦使用 nvm 工具切換 Node.js 版本。安裝完 Nodejs 之后,包管理器npm也會被自動安裝,你可以執(zhí)行下面的命令來驗證。
npm -v
當(dāng)然,在現(xiàn)代的前端項目中,我非常不推薦使用 npm 作為項目的包管理器,甚至也不再推薦yarn(npm 的替代方案),因為兩者都存在比較嚴重的性能和安全問題,而這些問題在 pnpm 中得到了很好的解決。使用pnpm之前,需要先安裝它,命令如下:
npm i -g pnpm
由于默認的鏡像源在國外,包下載速度和穩(wěn)定性都不太好,因此我建議你換成國內(nèi)的鏡像源,這樣pnpm install命令的體驗會好很多。
pnpm config set registry https://registry.npmmirror.com/
接下來,我們需要初始化一個Vite項目,可以在終端命令行中輸入如下的命令來初始化Vite項目。
pnpm create vite
在執(zhí)行完這個命令后,pnpm 首先會自動下載 create-vite 這個第三方包,然后執(zhí)行這個包中的項目初始化邏輯。
首先,是輸入項目名稱,這里你可以輸入vite-project,然后按下回車,進入選擇前端框架的部分:
Project name: vite-project Select a framework: ? - Use arrow-keys. Return to submit. vanilla // 無前端框架 vue // 基于 Vue react // 基于 React preact // 基于 Preact(一款精簡版的類 React 框架) lit // 基于 lit(一款 Web Components 框架) svelte // 基于 Svelte
Vite 內(nèi)置了以上不同前端框架的腳手架模板,這里我們選擇react框架,,緊接著選擇react-ts完成命令交互。等待腳手架的模板生成完畢,接下來執(zhí)行如下命令在本地啟動項目:
// 進入項目目錄 cd vite-project // 安裝依賴 pnpm install // 啟動項目 pnpm run dev
“如何使用Vite從零搭建前端項目”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。