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

\u003cp\u003eNutUI 是一套来自京东用户体验设计部（JDC）前端开发部的移动端 Vue 组件库，NutUI 1.0 版本于 2018 年发布。据不完全统计，目前在京东至少有30多个 web 项目正在使用 NutUI。\u003c/p\u003e\n\u003cp\u003e经过一段时间紧锣密鼓的开发，近期，我们正式发布了 NutUI 的 2.0 版。NutUI 2.0 定位于一个京东风格的移动端精品组件库，并不是 NutUI 1.x 的简单升级版。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c86170c0ecf3.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e（扫描/长按识别二维码可以体验 NutUI 2.0 的组件示例）\u003c/p\u003e\n\u003cp\u003eNutUI 官网同步进行了改版，也欢迎大家访问 \u003ca href=\"https://nutui.jd.com\"\u003ehttps://nutui.jd.com\u003c/a\u003e ( PC 端)。\u003c/p\u003e\n\u003cp\u003e我们来看看 NutUI 2.0 有哪些重要的新特性。\u003c/p\u003e\n\u003ch2\u003e京东APP 7.0 视觉风格\u003c/h2\u003e\n\u003cp\u003eNutUI 2.0 的组件在开发时参考了京东APP 7.0 视觉规范，统一了视觉风格和动效。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8617758c8eb.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8617950af41.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e如果与你需要的风格有差异，可以通过增加一个自定义 class 来调整样式。如果差异较大，可以替换掉整个组件的默认样式文件，既可达到修改样式的目的，又能减少被覆盖的冗余代码。\u003c/p\u003e\n\u003ch2\u003e定制主题\u003c/h2\u003e\n\u003cp\u003eNutUI 2.0 支持自定义组件库整体主题风格。通过在项目中重置一些样式变量的值，可轻而易举的实现组件换肤。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8617b5680b6.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e按需加载\u003c/h2\u003e\n\u003cp\u003eNutUI 1.x 的按需加载是通过自定义构建的方式来实现的，虽可满足需求，但是让用户每次都进 node_modules 目录下找到 NutUI 项目目录安装依赖，再进行自定义构建多有不便。于是，2.0 版我们对组件的按需加载功能进行了重新设计。\u003c/p\u003e\n\u003cp\u003e使用 NutUI 2.0 的组件时，不必导入完整的组件库，直接在项目中引入我们需要的组件文件及其对应的样式文件即可。如：\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eimport Button from '@nutui/nutui/dist/packages/button/button.js';\nimport '@nutui/nutui/dist/packages/button/button.css';\n\nimport Switch from '@nutui/nutui/dist/packages/switch/switch.js';\nimport '@nutui/nutui/dist/packages/Switch/switch.css';\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e不需要再进行自定义构建了，比 NutUI 1.x 方便不少吧。如果你觉得这种方式还不够方便或者不够优雅，也没关系，通过我们提供的 webpack 插件 \u003ca href=\"https://www.npmjs.com/package/@nutui/babel-plugin-separate-import\"\u003e\u003ccode\u003e@nutui/babel-plugin-separate-import\u003c/code\u003e\u003c/a\u003e ，还可以支持 \u003ccode\u003eES6 module\u003c/code\u003e 风格的按需加载写法，且兼容不支持 \u003ccode\u003eES6 module\u003c/code\u003e 语法的浏览器。如：\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eimport { Button, Icon } from '@nutui/nutui';\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e安装插件也麻烦？不妨试试我们提供的一个 Vue 项目的构建工具 \u003ca href=\"https://www.npmjs.com/package/gaea-cli\"\u003e\u003ccode\u003eGaea-cli\u003c/code\u003e\u003c/a\u003e，它可以快速生成一个已内置了这个插件的 Vue 模板工程，你可以直接基于这个工程开发项目。另外，这个构建工具还有很多高级功能，以及针对京东开发环境进行的特定优化，此前的系列版本已经过数十个项目的验证，还是比较稳定的。\u003c/p\u003e\n\u003ch2\u003e国际化\u003c/h2\u003e\n\u003cp\u003eNutUI 2.0 开始支持多语言。组件默认使用中文，可加载其他语言包来实现多语言切换功能。如果你的项目中已经使用了目前 Vue 生态里特别流行的国际化插件 \u003ccode\u003evue-i18n\u003c/code\u003e 来实现项目的国际化功能，那么在使用 NutUI 2.0 组件的时候，也完全不需要担心，NutUI 2.0 的国际化功能是完全兼容 \u003ccode\u003evue-i18n\u003c/code\u003e 插件的。\u003c/p\u003e\n\u003ch2\u003eSVG图标\u003c/h2\u003e\n\u003cp\u003e我们认为移动端组件库图标方案的最佳实践是 SVG 方案，因为 SVG 图标较字体图标更灵活，更利于按需加载，也不会招致部分浏览器对其进行抗锯齿处理，清晰度高，结合 symbol 元素还可以实现 SVG 图标的复用。同时，SVG 图标在移动端的兼容性也是良好的。我们在 NutUI 1.x 时期就选择了 SVG 作为组件库的图标方案，而这种选择在 NutUI 2.0 版本获得了传承。\u003c/p\u003e\n\u003cp\u003e除了上述几点，NutUI 2.0 还有支持 \u003ccode\u003eTypeScript\u003c/code\u003e，支持 \u003ccode\u003eSSR\u003c/code\u003e 服务端渲染等特性。\u003c/p\u003e\n\u003ch2\u003e全新架构\u003c/h2\u003e\n\u003cp\u003eNutUI 2.0 基于全新的架构开发，并非基于 1.0 的架构升级而来。我们结合 1.0 的架构经验、2.0 的功能需求、工具的新变化、我厂的开发环境、主流优秀组件库的实现方案等因素，全新打造了 2.0 的架构。架构方面主要有以下特点：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e基于 \u003ccode\u003eWebpack 4.0\u003c/code\u003e 开发，拥有更快的构建速度，输出更小的 bundle 文件；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e一次性构建出多种类型的 bundle，兼容各种主流模块化场景和非模块化引用场景；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e基于 \u003ccode\u003eBabel 7\u003c/code\u003e 实现了 Polyfill 的智能加载，无须额外引入 Babel-polyfill 文件也可兼容低版本浏览器；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e集成 \u003ca href=\"http://carefree.jd.com\"\u003e\u003ccode\u003eCarefree\u003c/code\u003e\u003c/a\u003e 方案，大幅提升我厂开发环境的真机调试效率；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eMarkdown\u003c/code\u003e 格式的文档便于书写和 Github 阅读，基于 MD 文件自动生成文档网站；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e示例页面 PWA 加持，支持离线缓存和创建主屏图标；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e接入持续化集成和自动化测试，提升代码可靠性；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e支持自动生成新组件模板；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e配套一个 webpack 插件和一个 Vue 模板工程构建工具（Gaea 4.0)；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e…\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003e组件\u003c/h2\u003e\n\u003cp\u003e组件库是个舞台，台上的主角不是组件库的功能和架构，而是组件。我们在组件开发上下了不少功夫，精心挑选和打磨了一批组件。NutUI 2.0 一期拥有组件三十多个，涉及“基础”、“布局”，“数据录入”、“操作反馈”、“数据展示”、“导航”6大类。\u003c/p\u003e\n\u003cp\u003e接下来，我们会集中精力继续新增一批组件，同时也会跟进对现有组件的打磨和维护。大家有什么通用组件的需求也可以反馈给我们。\u003c/p\u003e\n\u003ch2\u003e跨平台\u003c/h2\u003e\n\u003cp\u003e根据开发规划，NutUI 2.0 还会有一个重磅功能 —— 支持将 Vue 组件转成微信小程序组件，实现一次编码跨平台（H5和微信小程序）使用，届时 NutUI 将由一个 Web 端 Vue 组件库升华为一个多终端跨平台组件库。目前，这个功能仍在加紧开发中，稍后上线，敬请期待。\u003c/p\u003e\n\u003ch2\u003e参与开发\u003c/h2\u003e\n\u003cp\u003e欢迎感兴趣的小伙伴参与 NutUI 项目的开发，我们建议通过提 pull request 的方式参与。如果要修一个 bug，请提交 pull request 到 master 分支；如果你要提一个新增功能或组件的 pull request，那么请基于 v2 分支，通过 Code Review 之后，我们会合并你的代码。\u003c/p\u003e\n\u003cp\u003eNutUI 2.0 组件库没有埋任何彩蛋，大家尽管放心使用哦~\u003c/p\u003e\n\u003ch2\u003e链接\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e官网(PC端)：\u003ca href=\"https://nutui.jd.com\"\u003ehttps://nutui.jd.com\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eGithub仓库：\u003ca href=\"https://github.com/jdf2e/nutui/\"\u003ehttps://github.com/jdf2e/nutui/\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e更新日志：\u003ca href=\"https://github.com/jdf2e/nutui/releases\"\u003ehttps://github.com/jdf2e/nutui/releases\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e反馈建议：\u003ca href=\"https://github.com/jdf2e/nutui/issues\"\u003ehttps://github.com/jdf2e/nutui/issues\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eNutUI按需加载插件：\u003cbr /\u003e\n\u003ca href=\"https://www.npmjs.com/package/@nutui/babel-plugin-separate-import\"\u003ehttps://www.npmjs.com/package/@nutui/babel-plugin-separate-import\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eVue模板工程构建工具：\u003ca href=\"https://www.npmjs.com/package/gaea-cli\"\u003ehttps://www.npmjs.com/package/gaea-cli\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e不依赖wifi热点的H5真机测试工具Carefree: \u003ca href=\"https://carefree.jd.com/\"\u003ehttps://carefree.jd.com/\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e联系我们：[email protected]\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c870aa334386.png\" alt=\"\" /\u003e\u003cbr /\u003e\n\u003cstrong\u003e会议推荐\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e2019年6月，GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里？点击下图了解更多详情。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://gmtc.geekbang.org/?utm_source=infoq\u0026amp;utm_medium=bottombanner\"\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c871d4ec69ec.png?imageView2/0/w/800\" alt=\"\" /\u003e\u003c/a\u003e\u003c/p\u003e\n