使用Vite從零搭建前端項目的詳細過程

Posted on by

一、環境搭建

首先，請確保已經安裝瞭代碼編輯器和瀏覽器，如果沒有安裝推薦安裝VSCode和Chrome瀏覽器。

其次是安裝 Node.js，如果你的系統中還沒有安裝 Node.js ，可以進入 Nodejs 官網下載相應的安裝包進行手動安裝；如果已經安裝瞭 Node.js，你可以使用這個命令檢查一下 Node.js 版本。

node -v

如果安裝瞭多個版本的Node.js，推薦使用 nvm 工具切換 Node.js 版本。安裝完 Nodejs 之後，包管理器npm也會被自動安裝，你可以執行下面的命令來驗證。

npm -v

當然，在現代的前端項目中，我非常不推薦使用 npm 作為項目的包管理器，甚至也不再推薦yarn(npm 的替代方案)，因為兩者都存在比較嚴重的性能和安全問題，而這些問題在 pnpm 中得到瞭很好的解決。使用pnpm之前，需要先安裝它，命令如下:

npm i -g pnpm

由於默認的鏡像源在國外，包下載速度和穩定性都不太好，因此我建議你換成國內的鏡像源，這樣pnpm install命令的體驗會好很多。

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

二、初始化項目

接下來，我們需要初始化一個Vite項目，可以在終端命令行中輸入如下的命令來初始化Vite項目。

pnpm create vite

在執行完這個命令後，pnpm 首先會自動下載 create-vite 這個第三方包，然後執行這個包中的項目初始化邏輯。

首先，是輸入項目名稱，這裡你可以輸入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 內置瞭以上不同前端框架的腳手架模板，這裡我們選擇react框架，，緊接著選擇react-ts完成命令交互。等待腳手架的模板生成完畢，接下來執行如下命令在本地啟動項目：

// 進入項目目錄
cd vite-project
// 安裝依賴
pnpm install
// 啟動項目
pnpm run dev

到此這篇關於使用Vite從零搭建前端項目的文章就介紹到這瞭,更多相關Vite搭建前端項目內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：