vite搭建vue3項目的搭建步驟
更新時間：2025年09月29日 09:27:58 作者：lmryBC49
本文主要介紹了vite搭建vue3項目的搭建步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
1.確保Nodejs環(huán)境
在終端輸入如下命令來查看node環(huán)境，
node -v
如果使用的是nvm管理node版本，可以輸入如下命令查看:
nvm ls
運行結果為
v16.20.2
v17.0.1
v18.20.4
v20.18.0
--> v22.12.0
其中箭頭所指就是當前版本。
2.使用vite-cli工具
1.直接使用vite-cli工具創(chuàng)建項目
# npm 模板 npm create vite@latest # yarn yarn create vite@latest # pnpm pnpm create vite@latest
也可以在項目搭建好后切換,因為vite項目的依賴是搭建好后再下載的。
2.輸入項目名稱
upsilon@upsilon:~/workplace$ npm create vite@latest > npx > create-vite # 輸入項目名稱 ? Project name: ? vue-vite-project
3.選擇項目框架，選擇Vue
上下鍵進行選擇，enter鍵進行選取
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
? Project name: … vue-vite-project
# 選擇項目框架
? Select a framework: ? - Use arrow-keys. Return to submit.
Vanilla
? Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
4.選擇項目語言，一般選擇typescript
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
? Project name: … vue-vite-project
? Select a framework: ? Vue
# 選擇項目語言
? Select a variant: ? - Use arrow-keys. Return to submit.
? TypeScript
JavaScript
Official Vue Starter
Nuxt ↗
5.完成后的結果為
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.進入項目安裝依賴
和webpack不同，Vite項目在搭建時沒有下載依賴，所以需要進入項目下載依賴。
1.npm依賴
npm i
2.使用pnpm
# 如果沒有安裝pnpm可以運行 npm i -g pnpm # 下載依賴 pnpm i
3.使用yarn
# 如果沒有安裝yarn npm i -g yarn # 下載依賴 yarn
到此這篇關于vite搭建vue3項目的搭建步驟的文章就介紹到這了,更多相關vite搭建vue3內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue2和el-input無法修改和寫入并且不報錯的解決方案
這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報錯的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了9102年webpack4搭建vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
在vue中當我們管理數(shù)據(jù)的時候比較亂，我們要用到下面的這個庫，本文主要介紹了如何使用 Vuex的入門教程，具有一定的參考價值，感興趣的可以了解一下2022-02-02
淺談vue中數(shù)據(jù)雙向綁定的實現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實現(xiàn)原理 ，主要使用v-model這個數(shù)據(jù)雙向綁定，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了解決vue-cli中stylus無法使用的問題方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue仿element實現(xiàn)分頁器效果，實現(xiàn)思路是定一個值foldPage, 意為當前最多顯示的標簽數(shù),當總頁數(shù)超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實例代碼大家參考下本文2018-09-09
在本篇文章中我們給大家總結了關于編寫vue組件的方法知識點，有此需要的讀者們跟著學習下。2019-02-02
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04