最新要闻
- 200M内存就能用 Win11极限精简版实测:C盘只需8GB空间
- 手机预装App无法卸载是对用户侵害!人大教授:侵犯消费者自主选择权
- 焦点速讯:男子礁石上钓鱼被海浪拍进石缝 出海垂钓别选偏僻海域
- 特斯拉辅助驾驶不“看路” 撞碎一地护栏!车主:跟平时不一样
- 6999元 惠普新款32寸4K显示器上架:配备雷电4 100W供电
- 俄罗斯杀毒软件卡巴斯基将推自研OS及应用商店:不兼容第三方系统
- 全球热议:要钱没用!比尔盖茨喊话马斯克做慈善家:我们财富都捐出去
- 中国游客抛弃日韩后!新西兰首发团26000元1分钟售罄:出境游全面开启
- 全球速讯:男子油锅炸元宵现场惨烈 发生自爆崩起半米高:科普为何会翻车
- 天天头条:中国探月四期全面推进:月球上寻找水源、科研站基本成型
- 【全球新视野】Intel Arc 750新驱动提升43%游戏性能!RTX 3060最大劲敌来了
- 万元起步?苹果iPhone 16将推Ultra超旗舰 库克称果粉愿意花高价
- 存储卡/U盘提示要格式化?先恢复出数据再说
- 【全球新要闻】2600元的PCIe 5.0 SSD全球首测:读写双破10GB/s!但吵死了
- 邪恶、丑陋的互联网:你还敢发孩子的短视频吗?
- 世界热门:丰田最新表态:纯电车不环保!
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
NutUI 4.0 正式发布!
作者: 京东零售 NutUI
- NutUI 4.0 Github 地址:github.com/jdf2e/nutui
- NutUI 4.0 官网:nutui.jd.com
前言
技术日异月新、发展创新、持续的迭代已成为常态。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> 主要按钮
NutUI 4.0 保留原有的主题定制、在线主题定制功能,开发中根据项目的实际需求进行综合考量,按需选取适合业务场景的换肤方式。
专属图标库
NutUI 4.0 新增专属图标库。@nutui/icons-vueH5 图标包与@nutui/icons-vue-taroTaro 图标包,专属图标库是将原 NutUI Icon 组件剥离,从而减少 NutUI 包体积 464kB,提升了轻量化体验。
专属图标库保持京东风格,使用方式包括 IconFont 全量引入,新增 SVG 按需引入方式。
按需使用
import { Add } from "@nutui/icons-vue";
全量使用
import { IconFont } from "@nutui/icons-vue";
随着专属图标库的诞生,NutUI 4.0 中所有组件内置图标的使用方式也发生了变化,都可以通过插槽进行自定义,图标样式、大小、颜色均由开发者配置,灵活度大幅提升。
<script> import { ShareN } from "@nutui/icons-vue";</script>
自动按需引入
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
- ... ...
更多组件名称调整可参考官网从 v3 升级到 v4。
组件更完善
NutUI 4.0 除新增功能外,也加强了组件的易用性、丰富性,力求组件更高效、涵盖更多的业务场景。
新组件
NutUI 4.0 新增 2 个组件,为 NutUI 注入"新鲜血液"。
我们坚信 80 绝对不是组件库的数量极限,挖掘更多新组件,让组件库更丰富,是我们持续不断在做的事情。
Tour
新增 Tour 组件,用于引导用户了解产品功能。
PullRefresh
新增 PullRefresh 组件,用于下拉刷新的交互操作。
易用性提升
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%。
注:上述数据来自于packagephobia
NutUI 4.0 在包体积上也有了明显的下降,由 3.81MB 下降至 2.3MB,减少 39%。
组件瘦身
NutUI 4.0 对 10+ 个组件进行了优化,通过重构、逻辑修改、公共函数提取等方式,不仅加强了组件的健壮性,提高扩展性,也使 NutUI 的压缩前体积减少了 50kB。
- Popover 组件进行重构,去掉第三方依赖包,实现 0 外部依赖
- 优化 H5 与 Taro 共同需要编译函数,实现每端代码包的每行代码都是不可或缺的
- 提取公共函数 5 个,减少冗余代码
- ... ...
图标瘦身
NutUI 4.0 新增专属图标库,不仅安装包体积减少 595kB。
同时,NutUI 4.0 删除 125 个字体图标的 font 文件,包体积减少 464kB。
另外,专属图标库提供按需引入方式,在使用了 NutUI 的项目打包时,也只会引入组件内置图标,不会全量引入,项目包体积平均减少 50+ kB。
副作用清除
NutUI 4.0 优化打包策略,nutui.es.js 由全量引入改为按需加载,其文件体积由 624kB 下降至 11.9kB,减少 612kB。同时,避免了副作用的产生。
技术升级
NutUI 4.0 进行了底层架构升级来支撑不断加入的新功能,共建亦有全新体验。
构建工具升级
NutUI 4.0 将底层构建工具从 Vite 2 升级到 Vite 4,构建时间减少了 10 秒
库类型声明升级
NutUI 4.0 开始,不在使用第三方插件
vite-plugin-dts
,改用 vue 官方推荐的vue-tsc
生产类型声明文件。同时,与 Volar 插件两者结合实现检查类型错误能力。
未来
NutUI 发展至今,我们一直在学习一直在思考,除了提供更加丰富的组件、优化现有组件外,还需要做哪些事情才能服务到更多的开发者,真正做到高效、灵活、好用。
NutUI 作为移动端组件库,4.0 开始会分为基础组件
与高级组件
两个方向。针对基础组件,开发方向拆分为 H5、小程序、APP,丰富更多的 “端” 需求。
在过去,NutUI 沉淀了大促域
与抽奖域
高级组件库,在 NutUI 4.0 迭代同时,我们总结过往开发业务组件的经验,梳理并推出商城域
业务组件,包括商品类、优惠券类、订单类、发票类共计出 20+ 个高级组件。目前正紧张开发中,不久将与大家见面,敬请赐候~
最后
NutUI 的持续迭代离不开使用者和开发者的长期反馈和支持,特别感谢本次为 NutUI 4.0 做出贡献的社区开发者:@Coffee-C、@gyt95、@jxt776、@kasonyang、@mikasayw、@sjx12、@thx125、@xiaosifeng。愿大家在开源的道路上步履不停~
大家在开发中遇到任何问题,可以在 GitHub 或咚咚交流群(82957939)与我们联系,或者邮件至 nutui@jd.com,也欢迎大家为 NutUI Star。
相关链接:
- NutUI GitHub
- NutUI 4.0 官网
- 京东小程序官网
NutUI 4.0 正式发布!
200M内存就能用 Win11极限精简版实测:C盘只需8GB空间
手机预装App无法卸载是对用户侵害!人大教授:侵犯消费者自主选择权
焦点速讯:男子礁石上钓鱼被海浪拍进石缝 出海垂钓别选偏僻海域
特斯拉辅助驾驶不“看路” 撞碎一地护栏!车主:跟平时不一样
6999元 惠普新款32寸4K显示器上架:配备雷电4 100W供电
俄罗斯杀毒软件卡巴斯基将推自研OS及应用商店:不兼容第三方系统
全球热议:要钱没用!比尔盖茨喊话马斯克做慈善家:我们财富都捐出去
中国游客抛弃日韩后!新西兰首发团26000元1分钟售罄:出境游全面开启
读Java实战(第二版)笔记02_行为参数化Lambda表达式
全球速讯:男子油锅炸元宵现场惨烈 发生自爆崩起半米高:科普为何会翻车
天天头条:中国探月四期全面推进:月球上寻找水源、科研站基本成型
【全球新视野】Intel Arc 750新驱动提升43%游戏性能!RTX 3060最大劲敌来了
【全球播资讯】day02-REST和SpringMVC映射请求数据
万元起步?苹果iPhone 16将推Ultra超旗舰 库克称果粉愿意花高价
存储卡/U盘提示要格式化?先恢复出数据再说
【全球新要闻】2600元的PCIe 5.0 SSD全球首测:读写双破10GB/s!但吵死了
邪恶、丑陋的互联网:你还敢发孩子的短视频吗?
记一次selenium爬取p站图片的经历
世界热门:丰田最新表态:纯电车不环保!
焦点短讯!谷歌家也没有余粮了:用旧的服务器不要扔 擦擦还能用2年
环球快看点丨路由架构(一)
每日精选:《三体》电视剧罗辑亮相 网友:袁华 是你吗?
环球快消息!连续两部当主演 《流浪地球3》中或没有吴京:如何复活很关键
全球要闻:web安全基础-文件上传(含部分upload-labs靶场通关)
世界资讯:谈刻意练习 Talking about deliberate pratise
新动态:Linux环境下:程序的链接, 装载和库[动态链接]
【全球新要闻】染发剂致癌吗?几十块和几百块的染发剂 究竟有啥区别?
全球快讯:等等党赚了:《仙剑奇侠传七》宣布将加入XGP服务
环球新动态:Gmail之父:有了ChatGPT 搜索引擎活不过两年 就像干掉黄页电话簿
每日焦点!操作系统篇 ———— 开篇[一]
全球最资讯丨ES6 简介(二)
量子通信网络里程碑 中国科大实现模式匹配量子密钥分发
男子将厕所改造成电竞房 网友:从此再也不怕“膀胱局”了
世界观速讯丨9 文件操作
当前速看:多国反对被无视 日本2030年前排放40万吨核污水入海
今日关注:“最强法务部”名不虚传:任天堂赢得Joy-Con手柄集体诉讼案
热门:iPhone 14系列官方降价引热议 网友:安卓厂商压力山大
【环球时快讯】Java实现动态数组(数据结构与算法)
【全球新要闻】推特创作者将获得广告分成:需要开通蓝V会员才有资格
一加Ace 2正面“全身照”首次亮相:超窄边框双曲屏
当前速看:高中生分班前磕头跪谢班主任:网友看后意见大!老师回应:给每人发了红包
【全球速看料】MAUI新生6.9-控件辅助功能①:动画Animation
集合框架
10 正则表达式应用
《流浪地球2》里的“硬核科技” 中国电信已经用上了
全球报道:超详细--redis在Linux环境搭建主从复制
当前视讯!ChatGPT将英伟达AI GPU变成黄金 后者股价飙升超40%
《狂飙》带火鱼干店 老板:微信加烦了!剧中原来是这一集
焦点报道:为什么 L1 正则化能做特征选择而 L2 正则化不能
Linux环境下:程序的链接, 装载和库[可执行文件的装载]
当前焦点!Edge新版增加内容推荐按钮:打开甚至不用点
今日报丨比亚迪1月销量:汉卖出1.22万辆 宋Plus继续火爆
当前头条:[数据结构] 哈希表 (开放寻址法+拉链法)
天天动态:车主展示特斯拉自动泊车入位 结果翻车:变成“自动撞车”
【天天速看料】价格暴降后特斯拉供不应求 马斯克:准备要涨了
热点评!迁移学习(HDAN)《Heuristic Domain Adaptation》
美团索命一问:一个SQL ,怎么分析加了哪些锁? 含4大场景、8个规则
宝能造车梦破碎:烧了80多亿元的观致 如今沦为法拍车
女孩4万多元的摩托 被男摩友加白糖报废!官方介入
读Java实战(第二版)笔记01_Java的变化
全球即时:柔软顺滑 古今男士平角裤3条到手29.9元
世界视讯!休闲百搭 361° 运动束脚裤立减140元:49元起清仓价
环球速看:冰火两重天!四川一地昼夜温差38.6℃ 专家揭秘真相
今年开播有戏 “陈萍萍”演员吴刚回应《庆余年》第二季:很快了
python的基础知识1
奔驰被曝大砍产品线!19款车型或将淘汰 原因现实
环球视点!马斯克收费比微博狠多了:推特被曝企业“金V”认证付费:每月6770元
焦点热议:3年前旗舰也有份!中国广电剧透:小米10/青春版计划4月推送MIUI 14
《流浪地球2》票房破32亿元 导演谈第3部:原班人马再来一遍
全球最资讯丨浙江台州最大汽车经销商老板跑路 旗下19家4S店全部关停
12.4万保时捷首单买家发声:保时捷答应优惠卖车
[数据结构] 树、森林的遍历
每日时讯!MAUI新生2.5-数据绑定和MVVM:MVVM的属性验证
当前速递!父亲借女儿3万压岁钱不还被起诉 法院:应还本金及利息
焦点观察:1万元!佳能入门级全画幅相机EOS R8规格曝光
世界微速讯:为S23让路!三星Galaxy S22京东秒杀:骁龙8小屏旗舰 3569元
环球微头条丨豆瓣8.1分!《三体》主创:能拍中国科幻大作 此生无憾
低代码平台前端的设计与实现(三)设计态画布DesignCanvas的设计与实现
热资讯!重庆一景区煮麻辣汤圆:下次元宵佳节还得等384天
男子打包螺蛳粉开车24小时运回北京 只因朋友圈一句话:这是真爱
【天天新视野】用户滑雪频繁触发iPhone车祸检测功能 苹果:已进行了优化 同时派代表考察
天天快播:甜品级游戏本价格已曝光:搭载RTX 4050/4060
环球消息!5 组合数据类型
今日讯!短记我的二十五岁,如落叶般随风飘荡。
世界观焦点:java基础:流程控制
女子春节连打4通宵麻将:患上突发性耳聋
国产显卡搞定“显卡杀手”:摩尔线程MTT S80居然能跑《孤岛危机》
【世界独家】极限挤牙膏!三星Galaxy S23系列用残血版LPDDR5X内存
世界微动态丨wireshark 抓包整理———— 从一个小案例开始 [一]
【全球热闻】游客洪崖洞花30元找当地大爷抄近道 只花2分钟:网友道出真相
速讯:博纳影业总裁妻子金巧巧否认暗指《满江红》排片多、不好看:个人喜好
颜值最高的白色手机来了!vivo X90告白下周预售:天玑9200加持
天天消息!Python教程:IO
零下10度静止一夜不掉电!“车主”盛赞恒驰5 OTA效果好
当前视点!java基础:java基础语法
大众也不香了!比亚迪ATTO 3获德媒超高认可:钟爱刀片电池
快资讯:CPU性能提升10%!13代酷睿笔记本测试数据出炉
【全球报资讯】盖茨向马斯克“泼冷水”:殖民火星完全浪费钱
世界新资讯:医生发现19岁阿尔兹海默症患者:已知最年轻