使用Vite從零搭建前端項(xiàng)目的詳細(xì)過程
一、環(huán)境搭建
首先,請確保已經(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í)行下面的命令來驗(yàn)證。
npm -v
當(dāng)然,在現(xiàn)代的前端項(xiàng)目中,我非常不推薦使用 npm 作為項(xiàng)目的包管理器,甚至也不再推薦yarn(npm 的替代方案),因?yàn)閮烧叨即嬖诒容^嚴(yán)重的性能和安全問題,而這些問題在 pnpm 中得到了很好的解決。使用pnpm之前,需要先安裝它,命令如下:
npm i -g pnpm
由于默認(rèn)的鏡像源在國外,包下載速度和穩(wěn)定性都不太好,因此我建議你換成國內(nèi)的鏡像源,這樣pnpm install命令的體驗(yàn)會(huì)好很多。
pnpm config set registry https://registry.npmmirror.com/
二、初始化項(xiàng)目
接下來,我們需要初始化一個(gè)Vite項(xiàng)目,可以在終端命令行中輸入如下的命令來初始化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 // 無前端框架 vue // 基于 Vue react // 基于 React preact // 基于 Preact(一款精簡版的類 React 框架) lit // 基于 lit(一款 Web Components 框架) svelte // 基于 Svelte
Vite 內(nèi)置了以上不同前端框架的腳手架模板,這里我們選擇react框架,,緊接著選擇react-ts完成命令交互。等待腳手架的模板生成完畢,接下來執(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)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的 attribute 和 jQuery中的 attr 方法淺析
這篇文章主要介紹了JavaScript中的 attribute 和 jQuery中的 attr 方法淺析,需要的朋友可以參考下2017-01-01js查看一個(gè)函數(shù)的執(zhí)行時(shí)間實(shí)例代碼
本篇文章給大家分享一段實(shí)例代碼,主要介紹js查看一個(gè)函數(shù)的執(zhí)行時(shí)間,代碼簡單易懂,感興趣的朋友一起跟著小編來學(xué)習(xí)學(xué)習(xí)吧2015-09-09CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲,對TypeScript感興趣的同學(xué),一定要看一下2021-04-04JS簡單實(shí)現(xiàn)城市二級聯(lián)動(dòng)選擇插件的方法
這篇文章主要介紹了JS簡單實(shí)現(xiàn)城市二級聯(lián)動(dòng)選擇插件的方法,涉及javascript實(shí)現(xiàn)select遍歷與設(shè)置技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08javascript得到當(dāng)前頁的來路即前一頁地址的方法
這篇文章主要介紹了javascript得到當(dāng)前頁的來路即前一頁地址的方法,需要的朋友可以參考下2014-02-02ActiveX控件的使用-js實(shí)現(xiàn)打印超市小票功能代碼詳解
這篇文章主要介紹了ActiveX控件的使用-js實(shí)現(xiàn)打印超市小票功能代碼詳解,具有一定參考價(jià)值,需要的朋友可以了解下。2017-11-11