首頁  >  文章  >  web前端  >  Vite3.0發布了,看看Vite3.0的新特性

Vite3.0發布了,看看Vite3.0的新特性

青灯夜游
青灯夜游轉載
2022-07-22 11:16:063726瀏覽

Vite3已經發布了3.0,你還捲動嗎?以下這篇文章就來看看Vite3.0新特性,現在前端的發展的速度這麼快,時時保持對新技術的敏感度才能保證自己不被淘汰。

前一段時間,尤大發布了Vite3.0,以及更新了Vite的官方文檔,如下圖

Vite3.0發布了,看看Vite3.0的新特性

進入首頁反正給我的感覺就是很驚艷。

這篇文件就來簡單的介紹一下Vite3.0都有哪些新東西,別被磁碟區的不成樣子。

模板的變更

就那我自己來說,我用Vite創建最多的就是Vue項目, 這個更新後,使用Vite創建的Vue範本的主題與Vite的文檔保持一致,也支援暗色與亮色模式,且icon從Vue的logo換成了Vite的logo。

我們可以使用Vite建立一個Vue模板並執行一下看個效果:

pnpm create vite
# project name -> demo
# select a framework -> vue
# select a variant -> vue
cd demo
pnpm install
pnpm dev

兩個主題就是下面這樣的

Vite3.0發布了,看看Vite3.0的新特性

##除了Vue外,以下這些模板的主題也是一致的。

Vite3.0發布了,看看Vite3.0的新特性

Vite CLI的最佳化

#Vite CLI在命令列中的樣式也進行了最佳化,請看下面這個圖

Vite3.0發布了,看看Vite3.0的新特性

左邊是Vite3.0,右邊是Vite2.0,視覺上明顯3.0比2.0好看。

除了外觀之外,我們可以看到

預設的連接埠號碼也發生了變化,從3000變成了5173;Local的位址從localhost變成了127.0.0.1

import.meta.glob API的變化

#import.meta.globAPI可以動態的導入文件,在Vite3中允許import.meta.glob被重寫,具體可以參考Glob導入形式,在官方文件中描述的已經非常的詳細了。

其他內容

Vite3.0還更新的一些其他的內容,如下:

  • Vite整體體積變小;

  • JS和CSS的壓縮工具使用了ESbuild(Vite2中開始);

  • 修正了N多個bug;

  • 相容性做了調整,

    最低支援node14.18

  • Vite決定

    每年發布一個新的版本;

寫在最後

這篇文章簡短了介紹了一下Vite中的一些新特性。

現在前端發展的速度已經變的非常的快,

時刻保持對新技術的敏感度才能保證自己不被淘汰加油吧各位~

#最後祝大家:天天不加班,年薪過百萬。

【相關影片教學推薦:

vuejs入門教學web前端入門

以上是Vite3.0發布了,看看Vite3.0的新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除