6K star!京东开源,京东风格的轻量级移动端组件库

说起开源,大家一般都会想到阿里、华为、百度这些,作为国内互联的巨头,京东似乎一直在开源方面名气不大。

今天我们分享一个由京东零售团队开源的京东风格的轻量级组件库,如果你喜欢京东的风格,那可以考虑使用它来进行开发,它就是: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-react

2. 通过 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 页面。

项目信息

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站