写点什么

京东 Vue 组件库 NutUI 2.0 发布:将支持跨平台!

2019 年 3 月 12 日

京东Vue组件库NutUI 2.0发布:将支持跨平台!

NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布。据不完全统计,目前在京东至少有 30 多个 web 项目正在使用 NutUI。


经过一段时间紧锣密鼓的开发,近期,我们正式发布了 NutUI 的 2.0 版。NutUI 2.0 定位于一个京东风格的移动端精品组件库,并不是 NutUI 1.x 的简单升级版。



(扫描/长按识别二维码可以体验 NutUI 2.0 的组件示例)


NutUI 官网同步进行了改版,也欢迎大家访问 https://nutui.jd.com ( PC 端)。


我们来看看 NutUI 2.0 有哪些重要的新特性。


京东 APP 7.0 视觉风格

NutUI 2.0 的组件在开发时参考了京东 APP 7.0 视觉规范,统一了视觉风格和动效。




如果与你需要的风格有差异,可以通过增加一个自定义 class 来调整样式。如果差异较大,可以替换掉整个组件的默认样式文件,既可达到修改样式的目的,又能减少被覆盖的冗余代码。


定制主题

NutUI 2.0 支持自定义组件库整体主题风格。通过在项目中重置一些样式变量的值,可轻而易举的实现组件换肤。



按需加载

NutUI 1.x 的按需加载是通过自定义构建的方式来实现的,虽可满足需求,但是让用户每次都进 node_modules 目录下找到 NutUI 项目目录安装依赖,再进行自定义构建多有不便。于是,2.0 版我们对组件的按需加载功能进行了重新设计。


使用 NutUI 2.0 的组件时,不必导入完整的组件库,直接在项目中引入我们需要的组件文件及其对应的样式文件即可。如:


import Button from '@nutui/nutui/dist/packages/button/button.js';import '@nutui/nutui/dist/packages/button/button.css';
import Switch from '@nutui/nutui/dist/packages/switch/switch.js';import '@nutui/nutui/dist/packages/Switch/switch.css';
复制代码


不需要再进行自定义构建了,比 NutUI 1.x 方便不少吧。如果你觉得这种方式还不够方便或者不够优雅,也没关系,通过我们提供的 webpack 插件 @nutui/babel-plugin-separate-import ,还可以支持 ES6 module 风格的按需加载写法,且兼容不支持 ES6 module 语法的浏览器。如:


import { Button, Icon } from '@nutui/nutui';
复制代码


安装插件也麻烦?不妨试试我们提供的一个 Vue 项目的构建工具 Gaea-cli,它可以快速生成一个已内置了这个插件的 Vue 模板工程,你可以直接基于这个工程开发项目。另外,这个构建工具还有很多高级功能,以及针对京东开发环境进行的特定优化,此前的系列版本已经过数十个项目的验证,还是比较稳定的。


国际化

NutUI 2.0 开始支持多语言。组件默认使用中文,可加载其他语言包来实现多语言切换功能。如果你的项目中已经使用了目前 Vue 生态里特别流行的国际化插件 vue-i18n 来实现项目的国际化功能,那么在使用 NutUI 2.0 组件的时候,也完全不需要担心,NutUI 2.0 的国际化功能是完全兼容 vue-i18n 插件的。


SVG 图标

我们认为移动端组件库图标方案的最佳实践是 SVG 方案,因为 SVG 图标较字体图标更灵活,更利于按需加载,也不会招致部分浏览器对其进行抗锯齿处理,清晰度高,结合 symbol 元素还可以实现 SVG 图标的复用。同时,SVG 图标在移动端的兼容性也是良好的。我们在 NutUI 1.x 时期就选择了 SVG 作为组件库的图标方案,而这种选择在 NutUI 2.0 版本获得了传承。


除了上述几点,NutUI 2.0 还有支持 TypeScript,支持 SSR 服务端渲染等特性。


全新架构

NutUI 2.0 基于全新的架构开发,并非基于 1.0 的架构升级而来。我们结合 1.0 的架构经验、2.0 的功能需求、工具的新变化、我厂的开发环境、主流优秀组件库的实现方案等因素,全新打造了 2.0 的架构。架构方面主要有以下特点:


  • 基于 Webpack 4.0 开发,拥有更快的构建速度,输出更小的 bundle 文件;

  • 一次性构建出多种类型的 bundle,兼容各种主流模块化场景和非模块化引用场景;

  • 基于 Babel 7 实现了 Polyfill 的智能加载,无须额外引入 Babel-polyfill 文件也可兼容低版本浏览器;

  • 集成 Carefree 方案,大幅提升我厂开发环境的真机调试效率;

  • Markdown 格式的文档便于书写和 Github 阅读,基于 MD 文件自动生成文档网站;

  • 示例页面 PWA 加持,支持离线缓存和创建主屏图标;

  • 接入持续化集成和自动化测试,提升代码可靠性;

  • 支持自动生成新组件模板;

  • 配套一个 webpack 插件和一个 Vue 模板工程构建工具(Gaea 4.0);


组件

组件库是个舞台,台上的主角不是组件库的功能和架构,而是组件。我们在组件开发上下了不少功夫,精心挑选和打磨了一批组件。NutUI 2.0 一期拥有组件三十多个,涉及“基础”、“布局”,“数据录入”、“操作反馈”、“数据展示”、“导航”6 大类。


接下来,我们会集中精力继续新增一批组件,同时也会跟进对现有组件的打磨和维护。大家有什么通用组件的需求也可以反馈给我们。


跨平台

根据开发规划,NutUI 2.0 还会有一个重磅功能 —— 支持将 Vue 组件转成微信小程序组件,实现一次编码跨平台(H5 和微信小程序)使用,届时 NutUI 将由一个 Web 端 Vue 组件库升华为一个多终端跨平台组件库。目前,这个功能仍在加紧开发中,稍后上线,敬请期待。


参与开发

欢迎感兴趣的小伙伴参与 NutUI 项目的开发,我们建议通过提 pull request 的方式参与。如果要修一个 bug,请提交 pull request 到 master 分支;如果你要提一个新增功能或组件的 pull request,那么请基于 v2 分支,通过 Code Review 之后,我们会合并你的代码。


NutUI 2.0 组件库没有埋任何彩蛋,大家尽管放心使用哦~


链接


更多内容,请关注前端之巅。



会议推荐


2019 年 6 月,GMTC 全球大前端技术大会 2019 即将到来。小程序、Flutter、移动 AI、工程化、性能优化…大前端的下一站在哪里?点击下图了解更多详情。



2019 年 3 月 12 日 09:306326

评论

发布
暂无评论
发现更多内容

6种快速统计代码执行时间的方法

Bruce Duan

java统计时间 currentTimeMillis nanoTime StopWatch

Django的Models更新时,不触发Signals解决办法

BigYoung

django singals 信号机制 update 更新

Go: Goroutine, 系统线程和CPU管理

陈思敏捷

go golang mpg

LeetCode题解:88. 合并两个有序数组,splice合并数组+sort排序,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

微博基于 Flink 的机器学习实践

Apache Flink

flink

源码分析 | 咋嘞?你的IDEA过期了吧!加个Jar包就破解了,为什么?

小傅哥

Java 字节码插桩 asm bytebuddy

手撕二分查找及其变种,就是干!

我是程序员小贱

Windows AD 保姆级配置NTP服务器教程

BigYoung

时间 AD ntp Windows Server 2012 R2

微服务框架 - 模块功能设计篇

superman

中本聪原始比特币论文解读:点对点的电子现金系统

韩超

比特币 区块链

Flink 中的应用部署:当前状态与新应用模式

Apache Flink

flink

契约测试:解决微服务测试的问题

陈磊@Criss

为什么修改hosts不立即生效?--浏览器DNS缓存机制分析

陈磊@Criss

实用心理学—没用你打我!

代码制造者

职场 职场搞笑 信息技术 人工

【写作群星榜】8.1~8.14 写作平台优秀作者 & 文章排名

InfoQ写作平台官方

写作平台 排行榜

Serverless:为我们到底带来了什么

刘宇

Serverless 云原生

非科班学习编程一定得知道这几个网站!

我是程序员小贱

2.3.1 理解动态代理 -《SSM深入解析与项目实战》

谙忆

office 365激活,总是自动变成专业版2019

wood

Office Office 365

从北京降雨的复盘中,我发现了企业SD-WAN网络的秘密

脑极体

图解23种设计模式——前方高能,前端切图仔请务必抓好方向盘

执鸢者

typescript 前端 设计模式

想要成功,你需要的是目标与动机,目标是你的助攻,动机是你的爱人。

叶小鍵

成功学 心理学 海蒂·格兰特·霍尔沃森

微服务框架-模块需求篇

superman

为什么会是Docker?

架构精进之路

Docker

2.3.2 JDK动态代理 -《SSM深入解析与项目实战》

谙忆

一文了解对称加密与非对称加密

我是程序员小贱

安全

记一次腾讯云(西安)后台开发面试经历

z小赵

面试 分布式 高并发

[修复 Webpack 官方 Bug] 提取CSS时的依赖图修正

分一

前端 webpack 编译优化 源码刨析

芯片破壁者(十二.下):青瓦台魔咒与半导体“死亡谷”

脑极体

Git设置分支保护实现CodeReview卡点

陈磊@Criss

Python中的单下划线和双下划线使用场景

王坤祥

Python Python基础知识 Python基础

演讲经验交流会|ArchSummit 上海站

演讲经验交流会|ArchSummit 上海站

京东Vue组件库NutUI 2.0发布:将支持跨平台!-InfoQ