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

移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注。据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI 。

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

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

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

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

京东APP 7.0 视觉风格

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

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

如果与你需要的风格有差异,还可以通过增加一个自定义 class 来调整样式。如果差异较大,甚至可以替换掉整个组件的默认样式文件。你的组件,你做主。

定制主题

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

京东风格的移动端Vue组件库NutUI2.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 服务端渲染等特性。

全新架构

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

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大类。

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

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

跨平台

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

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

参与开发

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 6,443评论 1 77
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组...
    鲁大师666阅读 43,366评论 5 97
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库...
    卞卞村长L阅读 1,700评论 0 8
  • Vue2.0+组件库总结 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基...
    szch阅读 1,960评论 1 52
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    35eeabfa0772阅读 3,259评论 7 12