说起开源，大家一般都会想到阿里、华为、百度这些，作为国内互联的巨头，京东似乎一直在开源方面名气不大。
今天我们分享一个由京东零售团队开源的京东风格的轻量级组件库，如果你喜欢京东的风格，那可以考虑使用它来进行开发，它就是：NutUI。
NutUI 是什么
NutUI 是一个由京东零售团队开源的京东风格的轻量级组件库，支持移动端 H5 和小程序开发。
NutUI 具有以下特性：
- 80+ 高质量组件，覆盖移动端主流场景
- 支持一套代码同时开发 H5 + 多端小程序
- 基于京东 APP 10.0 视觉规范
- 支持按需引用
- 详尽的文档和示例
- 支持 TypeScript
- 支持服务端渲染（测试阶段）
- 支持组件级别定制主题，内置 700+ 个变量
- 国际化支持，已支持英文，印尼语和繁体中文
- 单元测试覆盖率超过 80%，保障稳定性
- 提供 Sketch 设计资源
NutUI 提供了支持多个框架的不同版本组件，组件涵盖了H5\小程序和app：
NutUI 的团队除了基础项目外，还维护着一系列的相关项目：
上手NutUI
可以通过NPM或者CDN的方式来安装和使用NutUI。
1. 通过 NPM 安装
bash
# pnpm
pnpm add @nutui/nutui-react
# yarn
yarn add @nutui/nutui-react
# npm
npm install @nutui/nutui-react2. 通过 CDN 安装及使用
可以在 jsdelivr 和 unpkg 等公共 CDN 上获取到 NutUI。 不推荐在生产环境使用组件库 CDN，如果需要这种使用方式，建议将特定版本的 CDN 文件下载至本地项目目录中使用。
xml
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<!-- 引入样式 -->
<link rel='stylesheet' href='<https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/style.css>' />
<!-- 引入React -->
<script crossorigin src='<https://unpkg.com/react@17/umd/react.production.min.js>'></script>
<script crossorigin src='<https://unpkg.com/react-dom@17/umd/react-dom.production.min.js>'></script>
<!-- 引入NutUI组件库 -->
<script src='<https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/nutui.react.umd.js>'></script>
</head>
<body>
<div id='app'></div>
<script>
// 在 #app 标签下渲染一个按钮组件
ReactDOM.render(
React.createElement(
nutui.react.Button,
null,
React.createElement("div", null, "主要按钮")
),
document.querySelector("#app")
);
</script>
</body>
</html>效果预览
在线组件库可以查看更多的组件
高级组件
NutUI还提供了3个高级组件，分别是:
NutUI-Biz:业务组件库，适用于移动端电商商城需求的快速开发。组件包括商品、订单、售后、客服、发票、履约六大域，开箱即用，帮助研发进一步提升开发效率，改善开发体验。
NutUI-Bingo:基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景。
NutUI-Cat:是一套基于 NutUI 2.0 的大促业务组件库，用于开发大促活动类 H5 页面。
项目信息
- 项目名称： NutUI
- GitHub 链接：github.com/jdf2e/nutui
- Star 数：6K