zhouLion / nutui

京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web)

京东风格的移动端 Vue2、Vue3 组件库，支持一套代码生成 H5 和小程序

     

---

Nut[nʌt]，源自电影《冰河世纪》里松鼠 Scrat "执迷不悟"，一生追求，即便引发大灾难也绝不松手的坚果。

简体中文 | English

特性

• 🚀 70+ 高质量组件，覆盖移动端主流场景
• 💪 支持一套代码同时开发 H5+多端小程序
• 📖 基于京东APP 10.0 视觉规范
• 🍭 支持按需引用
• 📖 详尽的文档和示例
• 💪 支持 TypeScript
• 💪 支持服务端渲染（测试阶段）
• 🍭 支持组件级别定制主题，内置 700+ 个变量
• 🌍 国际化支持，已支持英文，印尼语和繁体中文
• 🍭 单元测试覆盖率超过 80%，保障稳定性
• 📖 提供 Sketch 设计资源

安装

// Vue2 项目 
npm i @nutui/nutui@2

// Vue3 H5 项目
npm i @nutui/nutui

// Vue3 小程序项目
npm i @nutui/nutui-taro

示例

import { createApp } from "vue";
import App from "./App.vue";

// 注意：这种方式将会导入所有组件
import NutUI from "@nutui/nutui";
// 采用按需加载时  此全局css样式，需要删除
import "@nutui/nutui/dist/style.css";

createApp(App).use(NutUI).mount("#app");

学习资源

NutUI 实战快速入门

awesome-nutui

主题

我们提供了几套官方主题，来自京东内部实际业务，欢迎在项目中使用，如果不能满足需求，你也可以 自定义主题

• 京东APP视觉（Vue3，默认）
• 京东科技视觉（Vue3）
• 京东零售B商城主题（Vue3）
• 京东企业业务主题（Vue3）
• 京东物流视觉（Vue2）

版本说明

@nutui/nutui 和 @nutui/nutui-taro 属于并行版本，存在部分差异，版本号始终保持一致。如果兼容 ios 10 以下请使用 @nutui/nutui@2

• NutUI 2x & NutUI-JDL 使用 Vue2 开发，支持现代浏览器及 Android >= 4.0、iOS >= 8.0，仅 H5 应用。
• NutUI 3x 使用 Vue3 开发，支持现代浏览器及 Chrome >= 51、iOS >= 10.0，可输出 H5 和小程序两类应用。

构建版本

AMD 环境、Webpack、Vite 等构建工具环境、服务端建议使用 es 版，非模块化环境（如通过 <script> 标签直接引用）建议使用 umd 压缩版。

• es nutui.es.js

• umd nutui.umd.js

使用案例

NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使用 NutUI 开发多端应用。

更多案例

我们正在征集社区优秀案例，欢迎点击提交

链接

• Discussions (用👍投票)
• Feature Requests (用👍投票)
• Bugs (用👍投票)
• Question (用👍投票)

开发交流

版本	微信群	内部咚咚群
NutUI Vue	回复「NutUI」	82957939
NutUI x Taro	回复「NutUI」	1022545110

参与共建

请参考 《贡献指南》，参与共建提 PR

非常欢迎社区开发者为 NutUI 贡献代码，在贡献之前请先阅读 《提问的智慧》，《如何有效报告bug》，《NutUI 邀您共建》 能够更容易的理解和获得帮助。

感谢以下所有给 NutUI 贡献过代码的 开发者。

贡献者们

感谢以下小伙伴们为 NutUI 发展做出的贡献：

开发计划

Milestones

更新日志

本项目遵从 Angular Style Commit Message Conventions，更新日志请查阅 Release。

github stargazers