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组件实现实时动态主题切换,使用方式更加简洁,灵活。
<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 按需引入方式。
按需使用:
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>
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 对部分组件的名称与使用方式进行了调整:
03
组件更完善
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。从设计稿出发,提升页面搭建效率,亟需解决的核心问题有:
NutUI 4.0 除新增功能外,也加强了组件的易用性、丰富性,力求组件更高效、涵盖更多的业务场景。
3.1 新组件
NutUI 4.0 新增 2 个组件,为 NutUI 注入"新鲜血液"。
新增 Tour 组件,用于引导用户了解产品功能。
图2 NutUI 4.0 新增组件 Tour 示意图
新增 PullRefresh 组件,用于下拉刷新的交互操作。
图3 NutUI 4.0 新增组件 PullRefresh示意图
3.2 易用性提升
NutUI 4.0 对 20+ 个组件做了破坏性变更,提升组件灵活度、复用率、扩展性。
NutUI 致力于打造一款好用的组件库,4.0 期间对组件进行深度优化改造,诸如功能设计不合理、灵活度不高、场景覆盖不全、扩展性不强等问题。
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。
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 生态圈示意图-业务组件
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有