Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >NutUI 4.0 正式发布!

NutUI 4.0 正式发布!

作者头像
京东技术
发布于 2023-09-21 09:33:54
发布于 2023-09-21 09:33:54
63403
代码可运行
举报
文章被收录于专栏:京东技术京东技术
运行总次数:3
代码可运行

Tech 导读 NutUI 是一款京东风格的移动端组件库, 目前支持 Vue 和 React 技术栈,适配 Taro 多端。本文重点介绍了 Vue 4.0 版本带来的重大升级,包含 CSS 动态主题、icon 图标库、自动按需引入、新增组件、更轻量的用户体验,围绕组件丰富性、轻量化、易用性等方面,力求将组件的质量和体验提升一个台阶。

01

前言

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

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

02

新功能

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。从设计稿出发,提升页面搭建效率,亟需解决的核心问题有:

2.1 CSS Variables 动态主题

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 保留原有的主题定制,在线主题定制功能,开发中根据项目的实际需求进行综合考量,按需选取适合业务场景的换肤方式。

2.2 专属图标库

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

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

按需使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Add } from '@nutui/icons-vue';
<Add color='red'>

全量使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { IconFont } from '@nutui/icons-vue';
<IconFont name="dongdong"></IconFont>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <nut-navbar title="订单详情">
      <template #right>
        <ShareN width="16px" color='#fff'></ShareN>
      </template>
  </nut-navbar>
</template>
<script>
  import { ShareN } from '@nutui/icons-vue';
</script>

2.3 自动按需引入

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

与babel-plugin-import、vite-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
  • ... ...

03

组件更完善

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。从设计稿出发,提升页面搭建效率,亟需解决的核心问题有:

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

3.1 新组件

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

  • Tour

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

图2 NutUI 4.0 新增组件 Tour 示意图

  • PullRefresh

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

图3 NutUI 4.0 新增组件 PullRefresh示意图

3.2 易用性提升

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

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

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

04

轻量化

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。

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

图4 NutUI 4.0 轻量化比对示意图-安装体积

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

图5 NutUI 4.0 轻量化比对示意图-包体积

4.1 组件瘦身

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

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

4.2 图标瘦身

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

图6 NutUI 4.0 图标瘦身示意图

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

图7 NutUI 4.0 图标瘦身目录比对示意图

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

图8 NutUI 4.0 图标引入比对示意图

4.3 副作用清除

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

图9 NutUI 4.0 副作用清除比对示意图

05

技术升级

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。

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

构建工具升级

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

图10 NutUI 4.0 构建时长比对示意图

库类型声明升级

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

06

未来规划

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。

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

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

图11 NutUI 生态圈示意图-基础组件

在过去,NutUI 沉淀了大促域抽奖域高级组件库,在 NutUI 4.0 迭代同时,NutUI 团队总结过往开发业务组件的经验,梳理并推出商城域业务组件,包括商品类、优惠券类、订单类、发票类共计出 20+ 个高级组件,已同步上线。

图12 NutUI 生态圈示意图-业务组件

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023/03/31 18:58:00,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京东技术 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
如何从0开始搭建组件库
Tech 导读 本文主要介绍了组件库的意义,并列举了一些常见的组件库框架选型,重点讲述了组件库如何从0开始搭建的过程以及如何发布到npm私服,最后讲述了在具体项目中如何引用组件库的几种方法,方便读者对组件库进行一个系统的了解。
京东技术
2023/09/21
8590
如何从0开始搭建组件库
使用Taro开发鸿蒙原生应用——快速上手,鸿蒙应用开发指南
本指南为开发者提供了使用 Taro 框架开发鸿蒙原生应用的快速入门方法。Taro,作为一个多端统一开发框架,让开发者能够使用一套代码同时适配多个平台,包括鸿蒙系统。文章将详细介绍如何配置开发环境,以及如何利用 Taro 的特性和组件库来构建鸿蒙应用。从基本的项目设置到复杂的应用逻辑开发,本文将一步步引导开发者了解 Taro 在鸿蒙应用开发中的实际应用,快速掌握跨平台开发的技巧。
京东技术
2024/02/26
5450
使用Taro开发鸿蒙原生应用——快速上手,鸿蒙应用开发指南
Taro | 高性能小程序的最佳实践
Tech 导读 Taro作为开放式跨端跨框架解决方案,在大量小程序和H5应用中得到广泛实践,本文将为读者提供最佳实践示例,以帮助最大程度地提升小程序应用的性能表现。
京东技术
2023/12/26
7150
Taro | 高性能小程序的最佳实践
京东快递H5项目接入vite实战
Tech 导读 本文介绍了如何在开发阶段将vite应用于vue 2.x 工程,从而提高研发的开发体验与效率。主要涉及如何兼容process变量,如何处理 node-sass 与 dart-sass冲突,以及路径别名的兼容处理等。通过这篇文章可以为读者在vite接入过程中遇到的问题提供一些解决方案, 并帮助读者理清vue工程接入vite的具体思路。本文主要从整体介绍了新版会员徽章系统的设计方案以及未来规划,主要描述了等级模型的设计思路,读者可以通过本文对徽章系统的核心功能有初步的了解。
京东技术
2023/09/21
5610
京东快递H5项目接入vite实战
Ant-Design-Vue 3.x 图标库如何实现自动引入?
Ant-Design-Vue升级到2.x以上的版本之后,自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。
房东的狗丶
2023/02/17
2.2K0
使用Taro开发鸿蒙原生应用——当Taro遇到纯血鸿蒙
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2024/03/26
4550
使用Taro开发鸿蒙原生应用——当Taro遇到纯血鸿蒙
性能翻倍!京东亿级体量小程序优化实践
本文深入探讨如何通过系统性的优化措施显著提升了京东亿级用户体量小程序的性能。从前端渲染优化等方面,技术团队实施了一系列创新策略,使小程序的性能翻倍。本文将详细介绍这些优化措施的实施过程和取得的成效,为在大规模用户基础上追求极致性能的开发者提供宝贵的实践经验。
京东技术
2024/02/26
4600
性能翻倍!京东亿级体量小程序优化实践
一文帮你搞定H5、小程序、Taro长列表曝光埋点
Tech 导读 “埋点”(数据采集)是数据分析的重要手段;对于前端埋点来说最复杂的是各种事件的监听,本文以曝光埋点为例,介绍几种滑动列表曝光事件监听方案及在原生、Taro框架下的最佳实践,希望对前端同学有所帮助。
京东技术
2023/10/25
1.4K0
一文帮你搞定H5、小程序、Taro长列表曝光埋点
浅入深出的微前端MicroApp
导读 本文将深入浅出地探讨微前端架构模式——MicroApp,从微前端的基本概念、核心优势以及如何在现代web开发中实现它,详解微前端如何使得大型应用能够分解为小型、简单、可独立开发和部署的子应用,同时还能保持各个子应用间的完整性和协调性。此外,本文还将探讨实施微前端时可能遇到的挑战和最佳实践,为开发者提供一条清晰的实施路径,帮助其构建更加灵活和可维护的前端生态系统。
京东技术
2024/02/04
2.5K0
浅入深出的微前端MicroApp
代码质量与技术债系列分享之一—如何做好CodeReview
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2024/04/11
2480
代码质量与技术债系列分享之一—如何做好CodeReview
Shell在日常工作中的应用实践
Tech 导读 本文将从测试开发工作痛点出发,重在探讨Shell在日常工作中的实战应用,由浅入深,层层递进,将用户命令转化成计算机内核所能够理解的指令,逐步实现与操作系统的完美交互。另外,为了应对高频使用场景,Shell通过函数化封装来实现工具调用,避免陷入战术上勤奋的误区。
京东技术
2023/08/22
3010
Shell在日常工作中的应用实践
Vue3!ElementPlus!更加优雅的使用Icon
这可能是目前最便捷、最合适的 Icon 使用方式了,特别是在 Vue3 中,等等,你以为它只是适用于 Vue3?不,不要被标题欺骗,它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架,同样,它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的,示例代码也是基于此。
isboyjc
2022/03/28
7.2K0
Vue3!ElementPlus!更加优雅的使用Icon
Mybatis-SQL分析组件(2.0)
Tech 导读 针对大促、日常系统稳定性隐患-慢sql的预防和排查,Mybatis-SQL分析组件从一个新的角度发现慢sql,让慢sql止步于发生之前,区别于主流的基于慢sql日志分析和预警,实时根据Explain分析结果进行分析和预警。
京东技术
2023/08/22
3660
Mybatis-SQL分析组件(2.0)
你想要的【微前端】都在这里了!
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2023/08/22
6330
你想要的【微前端】都在这里了!
Vue3项目实践总结
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2023/09/21
5290
Vue3项目实践总结
借降本增效之名,探索开闭原则架构设计
Tech 导读 软件设计的优劣,很大程度上决定了该软件后期的运维和迭代的成本高低与风险大小,而对于互联网业务场景下迭代频率比较高的软件系统尤为明显。本文尝试借降本增效之名,来探索软件的开闭原则架构设计的实践对降低程序员认知负载的意义与价值。
京东技术
2023/08/22
1910
借降本增效之名,探索开闭原则架构设计
618技术揭秘:大促弹窗搭投实践
Tech 导读 弹窗作为非常重要的营销触达手段被各业务广泛应用,本文主要介绍 “XView 营销弹窗搭投系统” 关于快速搭建、投放配置营销弹窗能力的实现原理,以及在 618 等重要大促场景中的应用和实践,欢迎交流与探讨。
京东技术
2023/09/21
1.3K0
618技术揭秘:大促弹窗搭投实践
cookie时效无限延长方案
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2023/08/22
7770
cookie时效无限延长方案
大模型助力国际术语专业化,前后联动实现所见即所得
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
京东技术
2024/07/04
1200
大模型助力国际术语专业化,前后联动实现所见即所得
微电SCRM平台之一起玩转电销系统
导读 电销是什么?就是坐席拿着电话给客户打电话吗?这样的理解过于简单,本文将带领读者们一起走进微电平台之电销系统。微电平台2020年初开始建设,过去的两年多的时间里,经历了跌宕起伏,有经验、有教训,整体来说平台经历了人工、自动化阶段,目前处于初步智能化阶段,将一些心路历程分享给读者们,希望可以共同交流、共同进步。
京东技术
2023/01/10
1.9K0
微电SCRM平台之一起玩转电销系统
推荐阅读
相关推荐
如何从0开始搭建组件库
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验