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