6.1K Star！NutUI：京东出品高颜值移动组件库，H5和小程序都可用

大家好，欢迎来到IT知识分享网。

「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

大家好！我是小墨，本期给大家推荐一个移动端组件库——NutUI。能够快速搭建页面，同时又能保证组件质量和性能。

NutUI简介

NutUI是由京东前端团队开发的移动端组件库，基于 Vue.js，提供了丰富的组件，覆盖了各种移动端场景，最重要的是它支持一套代码同时开发 H5 和小程序，节省了大量时间和精力，真是开发效率提升利器！而且它还遵循京东APP 10.0 的视觉规范，风格看起来很舒服。

功能特点

• 组件丰富： 80+高质量组件，满足各种移动端开发需求，常用的按钮、弹窗、表单、图标等等，它都有！不用再自己重复造轮子了，想想都开心！
• 跨端支持： Write Once, Run Anywhere! 一套代码，可以在H5、微信小程序、支付宝小程序、京东小程序等多个平台运行。简直不要太方便！之前为了适配不同的平台，真是写到头秃。
• 京东风格： 组件的设计风格和京东App 10.0 的视觉规范一致，颜值高！用起来感觉很专业。
• 易用性强： 文档清晰，API简洁明了，上手非常容易。而且还支持 TypeScript，代码提示更友好，开发体验直接起飞！
• 自定义主题： 提供了 700+ 的样式变量，可以轻松定制主题风格，满足个性化需求。

使用方式

NutUI 的安装和使用都非常简单。

1. 安装:

npm i @nutui/nutui

2. 引入:

在 main.js 文件中引入 NutUI：

import { createApp } from 'vue' import App from './App.vue' import NutUI from '@nutui/nutui'; import '@nutui/nutui/dist/style.css'; createApp(App).use(NutUI).mount('#app')

3. 使用:

在 Vue 组件中直接使用 NutUI 的组件：

<template> <nut-button type="primary">NutUI 按钮</nut-button> </template>

怎么样？是不是超级简单！

项目地址

https://github.com/jdf2e/nutui

总结

NutUI 是一款非常优秀移动端组件库，它有着丰富的组件、良好的跨端支持、易用的 API 和详细的文档。它能够极大地提升开发效率，强烈推荐给大家！当然，它也有一些不足之处，比如部分组件的自定义程度还不是很高。不过总的来说，NutUI 是一款值得一试的组件库！大家觉得 NutUI 怎么样？在实际项目中有没有遇到什么问题？欢迎在评论区留言交流！

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！