我们正处于一个信息大暴发的时代,每天都能产生数以百万计的新闻资讯!
虽然有大数据推荐,但面对海量数据,通过我们的调研发现,在一个小时的时间里,您通常无法真正有效地获取您感兴趣的资讯!
头条新闻资讯订阅,旨在帮助您收集感兴趣的资讯内容,并且在第一时间通知到您。可以有效节约您获取资讯的时间,避免错过一些关键信息。
NutUI 4.0 正式发布!
Netty+SpringBoot 开发即时通讯系统
download:https://www.zxit666.com/5771/
前言
技术日异月新、开展创新、持续的迭代已成为常态。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 组件完成实时动态主题切换,运用方式愈加简约、灵敏。
const themeVars = reactive({ buttonBorderRadius: '10px' });
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';
全量运用
import { IconFont } from '@nutui/icons-vue';
随着专属图标库的降生,NutUI 4.0 中一切组件内置图标的运用方式也发作了变化,都能够经过插槽停止自定义,图标款式、大小、颜色均由开发者配置,灵敏度大幅提升。
import { ShareN } from '@nutui/icons-vue';
自动按需引入
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+ 个高级组件。目前正慌张开发中,不久将与大家见面,敬请赐候~返回搜狐,查看更多
责任编辑:
以上内容为资讯信息快照,由td.fyun.cc爬虫进行采集并收录,本站未对信息做任何修改,信息内容不代表本站立场。
快照生成时间:2023-02-02 05:45:14
本站信息快照查询为非营利公共服务,如有侵权请联系我们进行删除。
信息原文地址: