京东开源移动端Vue组件库NutUI 2.0发布

时间 2019-11-10

标签京东开源移动 vue 组件 nutui 2.0 发布栏目无线繁體版

原文原文链接

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

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

（扫描/长按识别二维码能够体验 NutUI 2.0 的组件示例）前端

NutUI 官网同步进行了改版，也欢迎你们访问 https://nutui.jd.com ( PC 端)。vue

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

京东APP 7.0 视觉风格

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

若是与你须要的风格有差别，能够经过增长一个自定义 class 来调整样式。若是差别较大，能够替换掉整个组件的默认样式文件，既可达到修改样式的目的，又能减小被覆盖的冗余代码。webpack

定制主题

NutUI 2.0 支持自定义组件库总体主题风格。经过在项目中重置一些样式变量的值，可垂手可得的实现组件换肤。git

按需加载

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

使用 NutUI 2.0 的组件时，没必要导入完整的组件库，直接在项目中引入咱们须要的组件文件及其对应的样式文件便可。如：web

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 组件库没有埋任何彩蛋，你们尽管放心使用哦~

连接

官网：https://nutui.jd.com (PC端)
Github仓库：https://github.com/jdf2e/nutui/ (欢迎Star~)
更新日志：https://github.com/jdf2e/nutu...
反馈建议：https://github.com/jdf2e/nutu...
NutUI按需加载插件：https://www.npmjs.com/package...
Vue模板工程构建工具：https://www.npmjs.com/package...
不依赖wifi热点的H5真机测试工具Carefree: https://carefree.jd.com/
联系咱们：nutui@jd.com