logo

京东风格的轻量级 Vue 组件库，支持移动端 H5 和小程序开发

NutUI 请用京东APP扫码请用微信扫码请用支付宝扫码

--- > Nut[nʌt]，源自电影《冰河世纪》里松鼠 Scrat "执迷不悟"，一生追求，即便引发大灾难也绝不松手的坚果。简体中文 | [English](./README_EN.md) ## 特性 * 🚀 70+ 高质量组件，覆盖移动端主流场景 * 💪 支持一套代码同时开发 H5+多端小程序 * 📖 基于京东APP 10.0 视觉规范 * 🍭 支持按需引用 * 📖 详尽的文档和示例 * 💪 支持 TypeScript * 💪 支持服务端渲染（测试阶段） * 🍭 支持组件级别定制主题，内置 700+ 个变量 * 🌍 国际化支持，已支持英文，印尼语和繁体中文 * 🍭 单元测试覆盖率超过 80%，保障稳定性 * 📖 提供 Sketch 设计资源 ## 安装 ```bash // Vue2 项目 npm i @nutui/nutui@2 ``` ```bash // Vue3 H5 项目 npm i @nutui/nutui ``` ```bash // Vue3 小程序项目 npm i @nutui/nutui-taro ``` ## 示例 ```js 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 实战快速入门](https://www.bilibili.com/video/BV14r4y1e7LK/?spm_id_from=333.999.0.0&vd_source=339cf5dcca71ec2905c729fd92bba8a9) [awesome-nutui](https://github.com/jdf2e/nutui/blob/v4/awesome.md) ## 主题我们提供了几套官方主题，来自京东内部实际业务，欢迎在项目中使用，如果不能满足需求，你也可以自定义主题 * 京东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 版，非模块化环境（如通过 `