如何利用vite快速搭建vue3項目
更新時間：2024年03月21日 16:04:41 作者：菜鳥茜
這篇文章主要介紹了如何利用vite快速搭建vue3項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.選擇一個文件夾
在vscode終端打開，輸入命令【npm create vite@latest】
npm create vite@latest
2.提示你輸入項目名稱之后
我這里設(shè)置的是【rookiedemo】
3.回車之后
出現(xiàn)選擇框架的提示，我們選擇【vue】回車
4.之后根據(jù)你的編碼習(xí)慣或需要
選擇【ts】或者【js】，點回車
5.vite非常貼心
按照對應(yīng)的提示，即可
6.【cd rookiedemo】
進入對應(yīng)的工程目錄
7.【npm install】安裝
安裝中……
安裝完畢……
8.【npm run dev】運行
9.瀏覽器打開即可看到
整個過程非常簡便快捷！
通過以上步驟，我們就得到了一個非常純凈的框架基底
之后我們將一步一步給這個框架基底添加基礎(chǔ)的好用的工具，以便快捷開發(fā)。
小Tips：
Vite 需要 Node.js 版本 18+，20+。
然而，有些模板需要依賴更高的 Node 版本才能正常運行，當(dāng)你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
今天小編就為大家分享一篇vue v-for直接循環(huán)數(shù)字實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在Vue.js開發(fā)中,雙向綁定是實現(xiàn)表單輸入與數(shù)據(jù)同步的核心特性之一,然而,在實際開發(fā)中,開發(fā)者可能會遇到雙向綁定失效的問題,導(dǎo)致表單輸入無法正確更新數(shù)據(jù)或視圖,本文將探討雙向綁定失效的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調(diào)用mutations里的方法，才能在store存儲成功，需要的朋友可以參考下2022-11-11
vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3 element-plus el-tree自定義圖標方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vuex的mapGetters無效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
我們在前端開發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue遞歸組件的相關(guān)資料,遞歸組件是Vue.js中用于渲染層級結(jié)構(gòu)的強大工具,通過組件調(diào)用自身來簡化復(fù)雜數(shù)據(jù)的渲染,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12