京东技术:京东风格的移动端Vue组件库NutUI2.0来啦

双子孤狼 2019-02-27 18:28:45 ⋅ 213 阅读

移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注。据不完全统计,目前至少有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 Switch from '@nutui/nutui/dist/packages/switch/switch.js';
import '@nutui/nutui/dist/packages/button/button.css';
import '@nutui/nutui/dist/packages/Switch/switch.css';


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


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 的架构。架构方面主要有以下特点:

  • 基于 Webpack4.0 开发,拥有更快的构建速度,输出更小的 bundle 文件

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

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

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

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

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

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

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

  • 配套一个 webpack 插件和一个 Vue 模板工程构建工具

组件

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

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

跨平台


NutUI 2.0 还有一个重磅功能 —— 支持将 Vue 组件转成微信小程序组件,从而实现一次编码跨平台使用。目前这个功能仍在加紧开发中,稍后上线,尽请期待哦。

参与开发


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


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


---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    京东到家订单中心系统mysql到es转化之路

    原文:https://www.toutiao.com/i6796507988602389006 京东到家订单中心系统业务中,无论是外部商家订单生产,或是内部上下游系统依赖,订单查询调用量都非常

    Element 2.14.1 发布,基于 Vue 桌面组件

    Element 2.14.1 发布了。Element 是一套为开发者、设计师和产品经理准备基于 Vue 2.0 桌面组件,提供了配套设计资源,帮助你网站快速成型。由饿了么公司前端团队开源

    京东技术:如何实现百万TPS?详解JMQ4存储设计

    JMQ是京东中间团队自研消息中间,诞生于2014年,服务京东近万个应用,2018年11.11大促期间峰值流量超过5000亿条消息

    京东技术:使用JDReact小程序双向转换

    JDReact是京东商城前台产品研发部推出融合开发框架。

    京东技术:开发属于自己 | IDEA & Android Studio插开发指南

    是否曾经被ide重复繁琐操作所困扰,又或者没有心仪UI控而难受。那么请阅读这篇文章,掌握idea插开发流程,开发属于自己,造福开源社区。

    Vue 3 正式发布

    Vue.js 3.0 "One Piece" 已正式发布,此框架新主要版本提供了更好性能、更小捆绑包体积、更好 TypeScript 集成、用于处理大规模用例新 API,并为框架未来长期

    京东技术京东系统架构师如何让笨重架构变得灵巧

    京东系统架构师,从事架构设计与开发工作,熟悉各种开源软件架构。在Web开发、架构优化上有较丰富实战经历。

    滴滴开源基于 React 移动开发组件-Pile.js

    Pile.js 是滴滴开发基于 React 移动开发组件。 轻量,易用,包含 52 个交互功能,支持多语言与自定义皮肤。可以非常轻松创建用户交互界面,让前端开发更专注于业务逻辑实现。

    京东技术:多数据模型数据库 | 应用实例解析

    作 者 简 介吕信,京东商城技术架构部资深架构师,拥有多年数据产品研发及架构经验。

    精品推荐:基于Vue2.0高仿微信App单页应用 学习Vue新动力!

    利用Vue2.0模仿微信app,基本做到了以假乱真效果

    【实战解析】基于HBase大数据存储在京东应用场景

    作者就职于京东商城京麦平台,从事京东商家开放平台相关开发工作。热爱技术,熟悉各种常用开源框架,有丰富大型分布式系统、高并发系统开发经验。热衷于对大数据研究,对Hadoop、HBase以及

    「轻阅读」移动适配必须掌握基本概念和适配方案

    随着技术发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素差异,移动开发面临着多分辨率适配问题。

    VUE 开源收藏版(二):史上最全面学习资源 ,附GitHub源码地址

    最近做了一个Vue开源项目汇总,里面集合了OpenDigg 上优质Vue开源项目,方便移动开发人员便捷找到自己需要项目工具等,感兴趣可以到GitHub上给个star。

    京东技术:使用京东Taro重构小程序

    >>>>  Taro 简介 Taro 是一个基于 React 语法规范统一开发框架,大家可以通过 taro

    京东猎户座发布开源,配置化一键生成 cms 系统

    猎户座核心配置化功能开源!在降本提效大环境下,猎户座系统为了扩展更多应用场景,近期完成了第一阶段开源工作。此次开源代码内容涉及两个代码,内容为CCMS管理系统核心配置化功能以及包含表格列与

    京东技术:用最小图片格式,打造最优用户体验

    DPG图片压缩技术能够有效减少图片大小50%,并且减少50%CDN带宽流量!

    京东技术:如何实现靠谱分布式锁?(附SharkLock设计选择)

    分布式锁,是用控制分布式系统中互斥访问共享资源一种手段,从而避免并行导致结果不可控。

    React UI :React Suite 4.0.2 版本更新-多项Bug修复和新手入门

    React Suite 是一套 React ,为后台产品而生。