如何利用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è)過程非常簡便快捷！
通過以上步驟，我們就得到了一個(gè)非常純凈的框架基底
之后我們將一步一步給這個(gè)框架基底添加基礎(chǔ)的好用的工具，以便快捷開發(fā)。
小Tips：
Vite 需要 Node.js 版本 18+，20+。
然而，有些模板需要依賴更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請注意升級(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)目并寫好基本配置(推薦)
這篇文章主要介紹了使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
自定義指令，其實(shí)就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
我們在平時(shí)上網(wǎng)的時(shí)候會(huì)看到有些圖片是加水印的,一般水印往往是后端來做的,不過有些站點(diǎn)要保護(hù)的知識(shí)產(chǎn)權(quán)類型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個(gè)適當(dāng)?shù)南拗?本文就給大家介紹一下如何使用Vue實(shí)現(xiàn)防篡改的水印2023-08-08
本文主要介紹了vue3+ts代理的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
本文主要介紹了vue中插槽(slot)幾種類型的使用方法,主要分三種,默認(rèn)插槽,具名插槽,作用域插槽,下面就來一起介紹一下,感興趣的可以了解一下2024-03-03
React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Luckysheet?在vue中離線使用及引入報(bào)錯(cuò)的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報(bào)錯(cuò)的解決方案,將dist離線包在項(xiàng)目創(chuàng)建個(gè)文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過案例給大家介紹我的項(xiàng)目里面放置的位置，需要的朋友可以參考下2022-10-10
Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07