NutUI 4.0 正式发布!

京东云开发者
• 阅读 278

作者: 京东零售 NutUI

NutUI 4.0 正式发布!

前言

技术日异月新、发展创新、持续的迭代已成为常态。NutUI 虽经过 v1.0、v2.0、v3.0 三次技术蜕变,仍面临很多兼容、破坏性调整的需求。随着我们自身承接业务的多样性变化及社区诉求日渐增多,大调整和升级势在必行,经过团队及社区开发者 3 个多月的开发和自测,在 2023 辞旧迎新之际我们正式发布 NutUI 4.0。

NutUI 4.0 带来了 CSS 动态主题icon 图标库自动按需引入新增组件更轻量的用户体验,围绕组件丰富性、轻量化、易用性力求将组件的质量和体验提升一个台阶。

新功能

CSS Variables 动态主题

NutUI 4.0 新增 CSS Variables 动态主题,在项目运行时,通过 CSS 变量覆盖默认样式,完成定制主题、动态切换主题、暗黑模式等换肤功能,提升产品易用性。

CSS Variables 本质是一系列的样式属性,默认值被定义在 :root 节点上,与 NutUI 3 的定制主题、在线主题定制功能相比,用户无需新建自定义 Scss 变量文件,只需通过 ConfigProvider 组件实现实时动态主题切换,使用方式更加简洁、灵活。

<script setup lang="ts">
  const themeVars = reactive({ buttonBorderRadius: '10px' });
</script>
<template>
    <nut-config-provider :theme-vars="themeVars">
      <nut-button type="primary">主要按钮</nut-button>
    </nut-config-provider>
</template>

NutUI 4.0 保留原有的主题定制、在线主题定制功能,开发中根据项目的实际需求进行综合考量,按需选取适合业务场景的换肤方式。

专属图标库

NutUI 4.0 新增专属图标库。@nutui/icons-vue H5 图标包与 @nutui/icons-vue-taro Taro 图标包,专属图标库是将原 NutUI Icon 组件剥离,从而减少 NutUI 包体积 464kB,提升了轻量化体验。

专属图标库保持京东风格,使用方式包括 IconFont 全量引入,新增 SVG 按需引入方式。

按需使用

import { Add } from '@nutui/icons-vue';
<Add color='red'>

全量使用

import { IconFont } from '@nutui/icons-vue';
<IconFont name="dongdong"></IconFont>

随着专属图标库的诞生,NutUI 4.0 中所有组件内置图标的使用方式也发生了变化,都可以通过插槽进行自定义,图标样式、大小、颜色均由开发者配置,灵活度大幅提升。

<template>
  <nut-navbar title="订单详情">
      <template #right>
        <ShareN width="16px" color='#fff'></ShareN>
      </template>
  </nut-navbar>
</template>
<script>
  import { ShareN } from '@nutui/icons-vue';
</script>

自动按需引入

NutUI 4.0 新增更高效的自动按需引入方式。通过 unplugin-vue-components 实现按需引入,移除 babel-plugin-importvite-plugin-style-import 插件。

babel-plugin-importvite-plugin-style-import 相比,unplugin-vue-components 支持在 Vite、Webpack、Vue CLI 等项目中自动引入组件,按需引入样式也不再强依赖于 babel,开发者可以选择 SWC、esbuild 等其他效率更高的编译工具,进而提升编译效率,Taro 小程序的开发体验也随之提升。

为了适配 unplugin-vue-components 插件,NutUI 4.0 对部分组件的名称与使用方式进行了调整

  • nut-fixednav -> nut-fixed-nav
  • nut-checkBoxgroup -> nut-checkBox-group
  • ... ...

更多组件名称调整可参考官网 从 v3 升级到 v4

组件更完善

NutUI 4.0 除新增功能外,也加强了组件的易用性、丰富性,力求组件更高效、涵盖更多的业务场景。

新组件

NutUI 4.0 新增 2 个组件,为 NutUI 注入"新鲜血液"。

我们坚信 80 绝对不是组件库的数量极限,挖掘更多新组件,让组件库更丰富,是我们持续不断在做的事情。

  • Tour

    新增 Tour 组件,用于引导用户了解产品功能。

NutUI 4.0 正式发布!

  • PullRefresh

    新增 PullRefresh 组件,用于下拉刷新的交互操作。

NutUI 4.0 正式发布!

易用性提升

NutUI 4.0 对 20+ 个组件做了破坏性变更,提升组件灵活度、复用率、扩展性。

NutUI 致力于打造一款好用的组件库,4.0 期间对组件进行深度优化改造,诸如功能设计不合理、灵活度不高、场景覆盖不全、扩展性不强等问题。

  • ShortPassword 不再依赖原生键盘,Demo 演示中键盘替换为 Numberkeyboard 组件,自由组合使用,灵活度更高
  • 精简 Input 组件 Props ,使其具备与 Form 组件互相搭配使用的能力,提升组件复用率
  • InfiniteLoading 组件删除下拉刷新功能,组件功能定位更加清晰,功能更加纯粹
  • Picker 组件删除内置 Popup 功能,平铺展示,满足更多的使用场景。同时也修改基于 Picker 派生出的 DatePicker 组件。
  • ... ...

更多组件 API 调整可参考官网 从 v3 升级到 v4

轻量化

NutUI 一直以来以轻量化为核心理念,在组件体积、NPM 依赖、构建产物等方面持续进行优化。相较于 NutUI 3.3.1,NutUI 4.0 的安装体积由 14MB 下降至 8MB,减少 42%。

NutUI 4.0 正式发布!

注:上述数据来自于 packagephobia

NutUI 4.0 在包体积上也有了明显的下降,由 3.81MB 下降至 2.3MB,减少 39%。

NutUI 4.0 正式发布!

组件瘦身

NutUI 4.0 对 10+ 个组件进行了优化,通过重构、逻辑修改、公共函数提取等方式,不仅加强了组件的健壮性,提高扩展性,也使 NutUI 的压缩前体积减少了 50kB。

  • Popover 组件进行重构,去掉第三方依赖包,实现 0 外部依赖
  • 优化 H5 与 Taro 共同需要编译函数,实现每端代码包的每行代码都是不可或缺的
  • 提取公共函数 5 个,减少冗余代码
  • ... ...

图标瘦身

NutUI 4.0 新增专属图标库,不仅安装包体积减少 595kB。

NutUI 4.0 正式发布!

同时,NutUI 4.0 删除 125 个字体图标的 font 文件,包体积减少 464kB。

NutUI 4.0 正式发布!

另外,专属图标库提供按需引入方式,在使用了 NutUI 的项目打包时,也只会引入组件内置图标,不会全量引入,项目包体积平均减少 50+ kB。

NutUI 4.0 正式发布!

副作用清除

NutUI 4.0 优化打包策略,nutui.es.js 由全量引入改为按需加载,其文件体积由 624kB 下降至 11.9kB,减少 612kB。同时,避免了副作用的产生。

NutUI 4.0 正式发布!

技术升级

NutUI 4.0 进行了底层架构升级来支撑不断加入的新功能,共建亦有全新体验。

  1. 构建工具升级

    NutUI 4.0 将底层构建工具从 Vite 2 升级到 Vite 4,构建时间减少了 10 秒

    NutUI 4.0 正式发布!

  2. 库类型声明升级

    NutUI 4.0 开始,不在使用第三方插件 vite-plugin-dts,改用 vue 官方推荐的 vue-tsc 生产类型声明文件。同时,与 Volar 插件两者结合实现检查类型错误能力。

未来

NutUI 发展至今,我们一直在学习一直在思考,除了提供更加丰富的组件、优化现有组件外,还需要做哪些事情才能服务到更多的开发者,真正做到高效、灵活、好用。

NutUI 作为移动端组件库,4.0 开始会分为 基础组件高级组件 两个方向。针对基础组件,开发方向拆分为 H5、小程序、APP,丰富更多的 “端” 需求。

NutUI 4.0 正式发布!

在过去,NutUI 沉淀了大促域抽奖域高级组件库,在 NutUI 4.0 迭代同时,我们总结过往开发业务组件的经验,梳理并推出商城域业务组件,包括商品类、优惠券类、订单类、发票类共计出 20+ 个高级组件。目前正紧张开发中,不久将与大家见面,敬请赐候~

NutUI 4.0 正式发布!

最后

NutUI 的持续迭代离不开使用者和开发者的长期反馈和支持,特别感谢本次为 NutUI 4.0 做出贡献的社区开发者:@Coffee-C、@gyt95、@jxt776、@kasonyang、@mikasayw、@sjx12、@thx125、@xiaosifeng。愿大家在开源的道路上步履不停~

NutUI 4.0 正式发布!

大家在开发中遇到任何问题,可以在 GitHub 或咚咚交流群(82957939)与我们联系,或者邮件至 nutui@jd.com,也欢迎大家为 NutUI Star。

相关链接:

点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
3年前
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
最近几年涌现出了很多技术博客和技术社区,也有很多技术同仁开始打造自己的博客,我们可以把自己的博客同步到不同的技术平台,但是随着技术平台的增多,我们文章同步所花费的
春风化雨 春风化雨
1年前
苹果WWDC 2023定档官宣,5款新品亮相值得期待
苹果科技公司正式官宣了WWDC2023,将于北京时间6月6日至10日举办!在WWDC2023大会上,苹果介绍Apple平台、技术和工具的最新动态,同时也将发布新品。根据苹果官方的介绍,WWDC2023将有为期一周丰富多彩的技术和社区活动,将介绍Apple平
使用 NutUI 搭建「自定义业务风格」的组件库 | 京东云技术团队
NutUI是一款京东风格的移动端组件库。NutUI目前支持Vue和React技术栈,支持Taro多端适配。
Easter79 Easter79
2年前
TypeScript 核心概念梳理
!(https://oscimg.oschina.net/oscnet/02343aa5c473479185ea31a0b3d37fa7.gif)8月20日,TypeScript4.0正式发布了( AnnouncingTypeScript4.0 ),虽然没有重大的变更和特性,可以看做是3.9版本正常迭代,不过Dan
Stella981 Stella981
2年前
Go 版本入 Dubbo 生态一周年:已和 Spring Cloud、gRPC 互通
本文作者:o\\\\0去年5月,阿里开源的高性能RPC框架Dubbo从ASF毕业并晋升顶级项目,同时,还宣布Go语言版本的Dubbogo正式加入Dubbo官方生态。经过一年的发展,Dubbogo在技术和社区运营方面都已经有了不错的成绩。Dubbogo是Dubbo的完整Go语言实现,在功能实现和技术路
Wesley13 Wesley13
2年前
2019 年 CNCF 中国云原生调查报告
!头图.jpg(https://ucc.alicdn.com/pic/developerecology/6db0c465111b4d9a96eb1ffe85c00e7a.jpg)中国72%的受访者生产中使用Kubernetes在CNCF,为更好地了解开源和云原生技术的使用,我们定期调查社区。这是第三次中国云原生调查,以中文进行
Wesley13 Wesley13
2年前
2020H1中国AI云服务市场规模增长远超预期;C++20 标准正式发布
开发者社区技术周刊又和大家见面了,让我们一起看看,过去一周有哪些值得我们开发者关注的重要新闻吧。!(https://static001.geekbang.org/infoq/0e/0ef0749d6a02848951b542a9d8828656.webp)C20标准正式发布2020H1中国AI云服务市场规模增长远
京东云开发者 京东云开发者
5个月前
画眉(京东科技设计稿转代码平台)介绍
前言随着金融App业务的不断发展,为了满足不同场景下的用户体验及丰富的业务诉求,业务产品层面最直接体现就是大量新功能的上线及老业务的升级,随之也给研发带来了巨大的压力,所以研发效率的提升就是当前亟需解决的问题,今天我们来看下“画眉”平台是如何帮助前端研发同
赵亦华 赵亦华
1年前
OceanBase 社区版4.0发版:一个全新的里程碑
2022年11月3日oceanbase社区版4.0(代号:小宇)测试版正式发布,这是社区版全新的里程碑。作为业界首款兼容MySQL8.0的单机分布式集成数据库,oceanbase社区版4.0全面开放MySQL兼容性,全面兼容MySQL8.0协议,大幅提升在线DDL能力,支持超大事务、主键变更、主键增删等。
京东云开发者 京东云开发者
11个月前
手把手带你初探Vue 3.0 | 京东物流技术团队
距离Vue3.0正式发布已经过去一段时间了,2月7日Vue团队正式宣布Vue3正式成为新的默认版本。最近接触的新项目也使用Vue3.0来开发,因此有必要对它进行一波总结和学习。