(资料图)

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 组件完成实时动态主题切换，运用方式愈加简约、灵敏。<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 保存原有的主题定制、在线主题定制功用，开发中依据项目的实践需求停止综合考量，按需选取合适业务场景的换肤方式。专属图标库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>自动按需引入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-navnut-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%。注：上述数据来自于 packagephobiaNutUI 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+ 个高级组件。目前正慌张开发中，不久将与大家见面，敬请赐候~