京东风格的轻量级 Vue 组件库,支持移动端 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/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 开发多端应用。
链接
开发交流
版本 | 微信群 | 内部咚咚群 |
---|---|---|
NutUI Vue | 回复「NutUI」 | 82957939 |
NutUI x Taro | 回复「NutUI」 | 1022545110 |
参与共建
NutUI 社区共建倡议
为 NutUI 贡献代码
NutUI 的共建方向主要分为:解决 issue、修复 bug、新增组件、增加国际化、UI 定制、平台适配、跨端扩展等。
欢迎社区开发者参与共建,在贡献您的代码之前请先阅读 《NutUI 贡献指南》。
问题反馈与建议
在反馈问题之前,推荐阅读 《提问的智慧》、《如何向开源社区提问题》和《如何有效地报告 Bug》,这样您能够更容易获得理解和帮助。
如果您有任何想法、疑问或建议,都可以参与社区讨论分享您的观点。
贡献者们
感谢以下所有给 NutUI 贡献过代码的 开发者。
Stargazers
Forkers
开发计划
更新日志
本项目遵从 Angular Style Commit Message Conventions,更新日志请查阅 Release。