Vite3.0都发布了,你还能卷得动吗(新特性一览)

简介: 前一段时间,尤大发布了Vite3.0,以及更新了Vite的官方文档,今天叶秋学长带领大家一起学习Vite3.0新特性一览,以下是Vite的官方文档图示:编辑进入首页反正给我的感觉就是很惊艳。这篇文档就来简单的介绍一下Vite3.0都有哪些新东西,别被卷的不成样子。目录一、模板的变更二、Vite CLI的优化三、import.meta.glob API的变化四、其他内容Vite3.0还更新的一些其他的内容,如下:Vite整体体积变小;JS和CSS的压缩工具使用了ESbuild(Vite2中开始);修复了N多个bug;兼容性做了调整,最低支持node14.18+;Vit

  前一段时间,尤大发布了Vite3.0,以及更新了Vite的官方文档,今天叶秋学长带领大家一起学习Vite3.0新特性一览,以下是Vite的官方文档图示:

image.gif编辑

进入首页反正给我的感觉就是很惊艳。

这篇文档就来简单的介绍一下Vite3.0都有哪些新东西,别被卷的不成样子。

目录

一、模板的变更

二、Vite CLI的优化

三、import.meta.glob API的变化

四、其他内容

Vite3.0还更新的一些其他的内容,如下:

Vite整体体积变小;

JS和CSS的压缩工具使用了ESbuild(Vite2中开始);

修复了N多个bug;

兼容性做了调整,最低支持node14.18+;

Vite决定每年发布一个新的版本;


一、模板的变更

就拿我自己来说,我用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

image.gif

两个主题就是下面这样的

image.gif编辑

image.gif编辑

二、Vite CLI的优化

Vite CLI在命令行中的样式也进行了优化,看下面这个图

image.gif编辑

左边是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中的一些新特性。小叶秋在这里提醒大家一句:现在前端发展的速度已经变的非常的快,时刻保持对新技术的敏感度才能保证自己不被淘汰,加油吧各位~

    结束语:关注博主不迷路,叶秋学长带你上高速~~~

    image.gif

    相关文章
    uniapp的touchstart与click
    uniapp的touchstart与click
    643 0
    |
    关系型数据库 Java MySQL
    【Sqlite】sqlite安装与与使用图文详解
    【Sqlite】sqlite安装与与使用图文详解
    341 0
    |
    4月前
    |
    人工智能 Java API
    Spring AI 实战|Spring AI入门之DeepSeek调用
    本文介绍了Spring AI框架如何帮助Java开发者轻松集成和使用大模型API。文章从Spring AI的初探开始,探讨了其核心能力及应用场景,包括手动与自动发起请求、流式响应实现打字机效果,以及兼容不同AI服务(如DeepSeek、通义千问)的方法。同时,还详细讲解了如何在生产环境中添加监控以优化性能和成本管理。通过Spring AI,开发者可以简化大模型调用流程,降低复杂度,为企业智能应用开发提供强大支持。最后,文章展望了Spring AI在未来AI时代的重要作用,鼓励开发者积极拥抱这一技术变革。
    1539 71
    Spring AI 实战|Spring AI入门之DeepSeek调用
    |
    网络协议 安全 Linux
    Tool之wget:wget的简介、安装、入门、使用方法之详细攻略(一)
    Tool之wget:wget的简介、安装、入门、使用方法之详细攻略
    Tool之wget:wget的简介、安装、入门、使用方法之详细攻略(一)
    |
    10月前
    |
    数据采集 Web App开发 监控
    高效爬取B站评论:Python爬虫的最佳实践
    高效爬取B站评论:Python爬虫的最佳实践
    |
    10月前
    |
    人工智能 Cloud Native 算法
    |
    网络协议 Shell 网络安全
    开发工具使用之 github 私人仓库Clone 失败的问题
    这篇文章介绍了解决GitHub上私人仓库克隆失败的问题,通过检查本地SSH key的存在与否、生成新的SSH key、添加SSH key到GitHub以及使用SSH方式克隆私有仓库的步骤来解决这个问题。
    开发工具使用之 github 私人仓库Clone 失败的问题
    |
    10月前
    |
    缓存 Linux 网络安全
    docker的镜像无法下载如何解决?
    【10月更文挑战第31天】docker的镜像无法下载如何解决?
    6220 30
    |
    JavaScript 前端开发 Go
    Wails简介
    Wails简介
    433 0
    |
    开发框架 前端开发 JavaScript
    基于SqlSugar的数据库访问处理的封装,支持.net FrameWork和.net core的项目调用
    基于SqlSugar的数据库访问处理的封装,支持.net FrameWork和.net core的项目调用