NutUI4.0正式发布！

(资料图)

Netty+SpringBoot开发即时通讯系统

download：https://www.zxit666.com/5771/

前言

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

NutUI4.0带来了CSS动态主题、icon图标库、自动按需引入、新增组件、更轻量的用户体验，盘绕组件丰厚性、轻量化、易用性力图将组件的质量和体验提升一个台阶。

新功用

CSSVariables动态主题

NutUI4.0新增CSSVariables动态主题，在项目运转时，经过CSS变量掩盖默许款式，完成定制主题、动态切换主题、暗黑形式等换肤功用，提升产品易用性。

CSSVariables实质是一系列的款式属性，默许值被定义在:root节点上，与NutUI3的定制主题、在线主题定制功用相比，用户无需新建自定义Scss变量文件，只需经过ConfigProvider组件完成实时动态主题切换，运用方式愈加简约、灵敏。

constthemeVars=reactive({buttonBorderRadius:|10px|});

主要按钮

NutUI4.0保存原有的主题定制、在线主题定制功用，开发中依据项目的实践需求停止综合考量，按需选取合适业务场景的换肤方式。

专属图标库

NutUI4.0新增专属图标库。@nutui/icons-vueH5图标包与@nutui/icons-vue-taroTaro图标包，专属图标库是将原NutUIIcon组件剥离，从而减少NutUI包体积464kB，提升了轻量化体验。

专属图标库坚持京东作风，运用方式包括IconFont全量引入，新增SVG按需引入方式。

按需运用

import{Add}from|@nutui/icons-vue|;

全量运用

import{IconFont}from|@nutui/icons-vue|;

随着专属图标库的降生，NutUI4.0中一切组件内置图标的运用方式也发作了变化，都能够经过插槽停止自定义，图标款式、大小、颜色均由开发者配置，灵敏度大幅提升。

import{ShareN}from|@nutui/icons-vue|;

自动按需引入

NutUI4.0新增更高效的自动按需引入方式。经过unplugin-vue-components完成按需引入，移除babel-plugin-import、vite-plugin-style-import插件。

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

为了适配unplugin-vue-components插件，NutUI4.0对局部组件的称号与运用方式停止了调整

nut-fixednav->nut-fixed-nav

nut-checkBoxgroup->nut-checkBox-group

......

更多组件称号调整可参考官网从v3晋级到v4。

组件更完善

NutUI4.0除新增功用外，也增强了组件的易用性、丰厚性，力图组件更高效、涵盖更多的业务场景。

新组件

NutUI4.0新增2个组件，为NutUI注入"新颖血液"。

我们深信80绝对不是组件库的数量极限，发掘更多新组件，让组件库更丰厚，是我们持续不时在做的事情。

Tour

新增Tour组件，用于引导用户理解产品功用。

PullRefresh

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

易用性提升

NutUI4.0对20+个组件做了毁坏性变卦，提升组件灵敏度、复用率、扩展性。

NutUI努力于打造一款好用的组件库，4.0期间对组件停止深度优化改造，诸如功用设计不合理、灵敏度不高、场景掩盖不全、扩展性不强等问题。

ShortPassword不再依赖原生键盘，Demo演示中键盘交换为Numberkeyboard组件，自在组合运用，灵敏度更高

精简Input组件Props，使其具备与Form组件相互搭配运用的才能，提升组件复用率

InfiniteLoading组件删除下拉刷新功用，组件功用定位愈加明晰，功用愈加地道

Picker组件删除内置Popup功用，平铺展现，满足更多的运用场景。同时也修正基于Picker派生出的DatePicker组件。

......

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

轻量化

NutUI不断以来以轻量化为中心理念，在组件体积、NPM依赖、构建产物等方面持续停止优化。相较于NutUI3.3.1，NutUI4.0的装置体积由14MB降落至8MB，减少42%。

注：上述数据来自于packagephobia

NutUI4.0在包体积上也有了明显的降落，由3.81MB降落至2.3MB，减少39%。

组件瘦身

NutUI4.0对10+个组件停止了优化，经过重构、逻辑修正、公共函数提取等方式，不只增强了组件的强健性，进步扩展性，也使NutUI的紧缩前体积减少了50kB。

Popover组件停止重构，去掉第三方依赖包，完成0外部依赖

优化H5与Taro共同需求编译函数，完成每端代码包的每行代码都是不可或缺的

提取公共函数5个，减少冗余代码

......

图标瘦身

NutUI4.0新增专属图标库，不只装置包体积减少595kB。

同时，NutUI4.0删除125个字体图标的font文件，包体积减少464kB。

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

反作用肃清

NutUI4.0优化打包战略，nutui.es.js由全量引入改为按需加载，其文件体积由624kB降落至11.9kB，减少612kB。同时，防止了反作用的产生。

技术晋级

NutUI4.0停止了底层架构晋级来支撑不时参加的新功用，共建亦有全新体验。

构建工具晋级

NutUI4.0将底层构建工具从Vite2晋级到Vite4，构建时间减少了10秒

库类型声明晋级

NutUI4.0开端，不在运用第三方插件vite-plugin-dts，改用vue官方引荐的vue-tsc消费类型声明文件。同时，与Volar插件两者分离完成检查类型错误才能。

将来

NutUI开展至今，我们不断在学习不断在考虑，除了提供愈加丰厚的组件、优化现有组件外，还需求做哪些事情才干效劳到更多的开发者，真正做到高效、灵敏、好用。

NutUI作为挪动端组件库，4.0开端会分为根底组件与高级组件两个方向。针对根底组件，开发方向拆分为H5、小程序、APP，丰厚更多的“端”需求。

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

责任编辑：