vite搭建vue3項(xiàng)目的搭建步驟
更新時(shí)間：2025年09月29日 09:27:58 作者：lmryBC49
本文主要介紹了vite搭建vue3項(xiàng)目的搭建步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.確保Nodejs環(huán)境
在終端輸入如下命令來查看node環(huán)境，
node -v
如果使用的是nvm管理node版本，可以輸入如下命令查看:
nvm ls
運(yùn)行結(jié)果為
v16.20.2
v17.0.1
v18.20.4
v20.18.0
--> v22.12.0
其中箭頭所指就是當(dāng)前版本。
2.使用vite-cli工具
1.直接使用vite-cli工具創(chuàng)建項(xiàng)目
# npm 模板 npm create vite@latest # yarn yarn create vite@latest # pnpm pnpm create vite@latest
也可以在項(xiàng)目搭建好后切換,因?yàn)関ite項(xiàng)目的依賴是搭建好后再下載的。
2.輸入項(xiàng)目名稱
upsilon@upsilon:~/workplace$ npm create vite@latest > npx > create-vite # 輸入項(xiàng)目名稱 ? Project name: ? vue-vite-project
3.選擇項(xiàng)目框架，選擇Vue
上下鍵進(jìn)行選擇，enter鍵進(jìn)行選取
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
? Project name: … vue-vite-project
# 選擇項(xiàng)目框架
? Select a framework: ? - Use arrow-keys. Return to submit.
Vanilla
? Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
4.選擇項(xiàng)目語言，一般選擇typescript
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
? Project name: … vue-vite-project
? Select a framework: ? Vue
# 選擇項(xiàng)目語言
? Select a variant: ? - Use arrow-keys. Return to submit.
? TypeScript
JavaScript
Official Vue Starter
Nuxt ↗
5.完成后的結(jié)果為
upsilon@upsilon:~/workplace$ npm create vite@latest > npx > create-vite ? Project name: … vue-vite-project ? Select a framework: ? Vue ? Select a variant: ? TypeScript Scaffolding project in /home/upsilon/workplace/vue-vite-project... Done. Now run: cd vue-vite-project npm install npm run dev
3.進(jìn)入項(xiàng)目安裝依賴
和webpack不同，Vite項(xiàng)目在搭建時(shí)沒有下載依賴，所以需要進(jìn)入項(xiàng)目下載依賴。
1.npm依賴
npm i
2.使用pnpm
# 如果沒有安裝pnpm可以運(yùn)行 npm i -g pnpm # 下載依賴 pnpm i
3.使用yarn
# 如果沒有安裝yarn npm i -g yarn # 下載依賴 yarn
到此這篇關(guān)于vite搭建vue3項(xiàng)目的搭建步驟的文章就介紹到這了,更多相關(guān)vite搭建vue3內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
在日常開發(fā)中，我們會遇到一些情況，限制日期的范圍的選擇，本文就詳細(xì)的介紹了ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，感興趣的可以了解一下2022-04-04
Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法
最近在項(xiàng)目開發(fā)中碰到一個(gè)需求是在頁面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
postcss一種對css編譯的工具，類似babel對js的處理，postcss只是一個(gè)工具，本身不會對css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer就是其一2023-02-02
這篇文章主要介紹了Vue實(shí)現(xiàn)背景更換顏色操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中的el-date-picker時(shí)間選擇器的使用實(shí)例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個(gè)日期、日期范圍、時(shí)間、日期時(shí)間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時(shí)間選擇器的使用,感興趣的朋友一起看看吧2023-10-10
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下2023-01-01
利用Vue實(shí)現(xiàn)將圖片轉(zhuǎn)換為Base64編碼的方法
這篇文章主要介紹了利用Vue實(shí)現(xiàn)將圖片轉(zhuǎn)換為Base64編碼的方法,Base64是一種編碼方式,用于將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成64個(gè)基于ASCII的可打印字符,這種編碼可嵌入圖像到HTML或CSS中,減少加載時(shí)間,解決跨域問題,并支持離線應(yīng)用開發(fā),需要的朋友可以參考下2024-10-10
mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式,這篇文章主要給大家介紹了關(guān)于vue中混入 mixins使用的相關(guān)資料,需要的朋友可以參考下2021-10-10