創(chuàng)建vue3項(xiàng)目

(1)使用vite創(chuàng)建

什么是vite(https://cn.vitejs.dev/guide/

Vite(法語(yǔ)意為 "快速的",發(fā)音 /vit/奔垦,發(fā)音同 "veet")是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成:

  • 一個(gè)開發(fā)服務(wù)器痘绎,它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能房铭,如速度快到驚人的 模塊熱更新(HMR)茂契。

  • 一套構(gòu)建指令,它使用 Rollup 打包你的代碼耍贾,并且它是預(yù)配置的,可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源路幸。

Vite 意在提供開箱即用的配置逼争,同時(shí)它的 插件 APIJavaScript API 帶來(lái)了高度的可擴(kuò)展性,并有完整的類型支持劝赔。

  • vite是一個(gè)更加輕量(熱更新速度快誓焦,打包構(gòu)建速度快)的vue項(xiàng)目腳手架工具。
  • 相對(duì)于vue-cli它默認(rèn)安裝的插件非常少着帽,隨著開發(fā)過(guò)程依賴增多杂伟,需要自己額外配置。

如何創(chuàng)建vue3項(xiàng)目

cmd打開終端仍翰,輸入指令npm init vite 項(xiàng)目名稱 按enter鍵會(huì)彈出
create-vite
OK to proceed? Y/n (選y按enter鍵赫粥,這是第一次使用vite創(chuàng)建項(xiàng)目會(huì)彈出,不是第一次創(chuàng)建的不會(huì)彈出)
enter之后會(huì)彈出選擇的框架予借,這里我們選擇vue(上下鍵選擇)

選擇項(xiàng)目語(yǔ)言

項(xiàng)目創(chuàng)建成功

依次根據(jù)提示進(jìn)入項(xiàng)目目錄越平,隨后安裝依賴

最后運(yùn)行項(xiàng)目


vite默認(rèn)安裝的插件非常少,還有一些其他需要自己額外配置灵迫。(router)
使用cnpm i vue-router 安裝router秦叛,隨后在main.js里進(jìn)行配置

在src文件夾里創(chuàng)建router文件夾并且創(chuàng)建一個(gè)index.js文件,在index里配置路由

基本配置完成

(2)使用vue-cli創(chuàng)建

cmd打開終端瀑粥,輸入指令vue create 項(xiàng)目名稱 選擇自定義選擇安裝預(yù)置

根據(jù)自己所需選擇(空格選中挣跋,上下鍵挑選)

選中vue3項(xiàng)目

根據(jù)自己所需選擇

選擇less作為CSS預(yù)處理器

根據(jù)自己所需選擇

創(chuàng)建成功

vue-cli與vite 優(yōu)缺點(diǎn)

vue-cli

優(yōu)點(diǎn):經(jīng)歷過(guò)戰(zhàn)斗考驗(yàn),可靠狞换、與 Vue 2 兼容避咆、可以捆綁任何類型的依賴關(guān)系、插件生態(tài)系統(tǒng)修噪、可以針對(duì)不同的目標(biāo)進(jìn)行構(gòu)建
缺點(diǎn):開發(fā)服務(wù)器速度與依賴數(shù)量成反比

vite

優(yōu)點(diǎn):開發(fā)服務(wù)器比 Webpack 快 10-100 倍查库、將 code-splitting 作為優(yōu)先事項(xiàng)
只能針對(duì)現(xiàn)代瀏覽器(ES2015+)
缺點(diǎn):與 CommonJS 模塊不完全兼容、處于測(cè)試階段黄琼,僅支持 Vue 3樊销、最小的腳手架不包括 Vuex、路由器等、不同的開發(fā)服務(wù)器與構(gòu)建工具

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末现柠,一起剝皮案震驚了整個(gè)濱河市院领,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌够吩,老刑警劉巖比然,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異周循,居然都是意外死亡强法,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門湾笛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)饮怯,“玉大人,你說(shuō)我怎么就攤上這事嚎研”褪” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵临扮,是天一觀的道長(zhǎng)论矾。 經(jīng)常有香客問(wèn)我,道長(zhǎng)杆勇,這世上最難降的妖魔是什么贪壳? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蚜退,結(jié)果婚禮上闰靴,老公的妹妹穿的比我還像新娘。我一直安慰自己钻注,他們只是感情好蚂且,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著队寇,像睡著了一般膘掰。 火紅的嫁衣襯著肌膚如雪章姓。 梳的紋絲不亂的頭發(fā)上佳遣,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音凡伊,去河邊找鬼零渐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛系忙,可吹牛的內(nèi)容都是我干的诵盼。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼风宁!你這毒婦竟也來(lái)了洁墙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤戒财,失蹤者是張志新(化名)和其女友劉穎热监,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饮寞,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡孝扛,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了幽崩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苦始。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖慌申,靈堂內(nèi)的尸體忽然破棺而出陌选,到底是詐尸還是另有隱情,我是刑警寧澤蹄溉,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布柠贤,位于F島的核電站,受9級(jí)特大地震影響类缤,放射性物質(zhì)發(fā)生泄漏臼勉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一餐弱、第九天 我趴在偏房一處隱蔽的房頂上張望宴霸。 院中可真熱鬧,春花似錦膏蚓、人聲如沸瓢谢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)氓扛。三九已至,卻和暖如春论笔,著一層夾襖步出監(jiān)牢的瞬間采郎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工狂魔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蒜埋,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓最楷,卻偏偏與公主長(zhǎng)得像整份,于是被迫代替她去往敵國(guó)和親待错。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容