如何利用vite快速搭建vue3項(xiàng)目
更新時(shí)間：2024年03月21日 16:04:41 作者：菜鳥(niǎo)茜
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1.選擇一個(gè)文件夾
在vscode終端打開(kāi)，輸入命令【npm create vite@latest】
npm create vite@latest
2.提示你輸入項(xiàng)目名稱之后
我這里設(shè)置的是【rookiedemo】
3.回車(chē)之后
出現(xiàn)選擇框架的提示，我們選擇【vue】回車(chē)
4.之后根據(jù)你的編碼習(xí)慣或需要
選擇【ts】或者【js】，點(diǎn)回車(chē)
5.vite非常貼心
按照對(duì)應(yīng)的提示，即可
6.【cd rookiedemo】
進(jìn)入對(duì)應(yīng)的工程目錄
7.【npm install】安裝
安裝中……
安裝完畢……
8.【npm run dev】運(yùn)行
9.瀏覽器打開(kāi)即可看到
整個(gè)過(guò)程非常簡(jiǎn)便快捷！
通過(guò)以上步驟，我們就得到了一個(gè)非常純凈的框架基底
之后我們將一步一步給這個(gè)框架基底添加基礎(chǔ)的好用的工具，以便快捷開(kāi)發(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)文章
這篇文章主要為大家詳細(xì)介紹了VUE Elemen-ui之穿梭框使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
使用vue-cli3新建一個(gè)項(xiàng)目并寫(xiě)好基本配置(推薦)
這篇文章主要介紹了使用vue-cli3新建一個(gè)項(xiàng)目并寫(xiě)好基本配置的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
自定義指令，其實(shí)就是在vue提供的鉤子中寫(xiě)代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
我們?cè)谄綍r(shí)上網(wǎng)的時(shí)候會(huì)看到有些圖片是加水印的,一般水印往往是后端來(lái)做的,不過(guò)有些站點(diǎn)要保護(hù)的知識(shí)產(chǎn)權(quán)類(lèi)型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個(gè)適當(dāng)?shù)南拗?本文就給大家介紹一下如何使用Vue實(shí)現(xiàn)防篡改的水印2023-08-08
本文主要介紹了vue3+ts代理的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
本文主要介紹了vue中插槽(slot)幾種類(lèi)型的使用方法,主要分三種,默認(rèn)插槽,具名插槽,作用域插槽,下面就來(lái)一起介紹一下,感興趣的可以了解一下2024-03-03
React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Luckysheet?在vue中離線使用及引入報(bào)錯(cuò)的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報(bào)錯(cuò)的解決方案,將dist離線包在項(xiàng)目創(chuàng)建個(gè)文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過(guò)案例給大家介紹我的項(xiàng)目里面放置的位置，需要的朋友可以參考下2022-10-10
Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07