京东组件移动端库的使用 Nut-UI
1.介绍
NutUI
NutUI-Vue 组件库，基于 Taro，使用 Vue 技术栈开发小程序应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。
特性
- 🚀 80+ 高质量组件，覆盖移动端主流场景
- 💪 支持一套代码同时开发多端
- 📖 基于京东 APP 10.0 视觉规范
- 🍭 支持按需引用
- 📖 详尽的文档和示例
- 💪 支持 TypeScript
- 💡 支持 webstorm，vscode 组件属性高亮
- 💪 支持动态定制主题
- 🍭 支持暗黑模式
- 🌍 支持国际化
- 🍭 单元测试覆盖率超过 80%，保障稳定性
- 📖 提供 Sketch 设计资源
扫码体验
链接
官方生态
由 NutUI 官方团队维护的项目如下：
| 项目 | 描述 |
|---|---|
| @nutui/nutui | NutUI 移动端 H5 版本 |
| @nutui/nutui-taro | NutUI Taro 多端版本 |
| @nutui/icons-vue | @nutui/nutui 使用的图标库 |
| @nutui/icons-vue-taro | @nutui/nutui-taro 使用的图标库 |
| @nutui/touch-emulator | 在桌面端使用 NutUI 的辅助库 |
| @nutui/playground | NutUI 在线 Playground |
| nutui-demo | NutUI 官方示例合集 |
社区生态
由社区维护的项目如下，欢迎补充：
| 项目 | 描述 |
|---|---|
| yang1206/uniapp-nutui | 基于 NutUI 4.x 版本开发的 uni-app 组件库 |
| jwaterwater/uni-nutui | 基于 NutUI 3.x 版本开发的 uni-app 组件库 |
2.使用
这个组件库 一般是跟Taro 框架一起使用的
在Taro框架中有对应的安装是 有是配好的
1. 通过 npm 包安装
# pnpm
pnpm add @nutui/nutui# npm
npm i @nutui/nutui# yarn
yarn add @nutui/nutui
2.csdn 使用
<!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/dist/style.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/icons-vue/dist/style_icon.css" /><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 引入NutUI组件库 --><script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.umd.js"></script></head><body><div id="app"></div><script>// 在 #app 标签下渲染一个按钮组件const app = Vue.createApp({template: `<nut-button type="primary">主要按钮</nut-button><nut-button type="info">信息按钮</nut-button><nut-button type="default">默认按钮</nut-button><nut-button type="danger">危险按钮</nut-button><nut-button type="warning">警告按钮</nut-button><nut-button type="success">成功按钮</nut-button>`,});app.use(nutui);app.mount("#app");</script></body>
</html>相关文章：
京东组件移动端库的使用 Nut-UI
1.介绍 NutUI NutUI-Vue 组件库，基于 Taro，使用 Vue 技术栈开发小程序应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。 特性 🚀 80 高质量组件，覆盖移动端主…...
用Python来实现2024年春晚刘谦魔术
简介 这是新春的第一篇，今天早上睡到了自然醒，打开手机刷视频就被刘谦的魔术所吸引，忍不住用编程去模拟一下这个过程。 首先，声明的一点，大年初一不学习，所以这其中涉及的数学原理约瑟夫环大家可以找找其…...
TestNG基础教程
TestNG基础教程 一、常用断言二、执行顺序三、依赖测试四、参数化测试1、通过dataProvider实现2、通过xml配置（这里是直接跑xml） 五、testng.xml常用配置方式1、分组维度控制2、类维度配置3、包维度配置 六、TestNG并发测试1、通过注解来实现2、通过xml来…...
###51单片机学习（1）-----单片机烧录软件的使用，以及如何建立一个工程项目
前言：感谢您的关注哦，我会持续更新编程相关知识，愿您在这里有所收获。如果有任何问题，欢迎沟通交流！期待与您在学习编程的道路上共同进步。 一. 两个主要软件的介绍 1.KeiluVision5软件 Keil uVision5是一款集成开发…...
Android 9.0 任务栏中清除掉播放器的进程,状态栏仍有音乐播放器状态问题的解决
1.概述 在9.0的rom定制化开发中，在点击系统自带的播放器以后，播放音乐的时候，在最近任务栏recents列表中，点击全部清除，发现音乐播放器还在播放音乐，导致出现bug，完整的 解决方法，肯定是需要点击全部清除以后，音乐播放器也被杀掉进程，接下来分析下这个移除任务栏流程…...
【笔记】Helm-5 Chart模板指南-13 调是模版
调试模板 调试模板可能很棘手，因为渲染后的模板发送了kubernetes API server，可能会以格式化以外的原因拒绝YAML文件。 以下命令有助于调试： 1、helm lint 是验证chart是否遵循最佳实践的首选工具。 2、helm template --debug在本地测试渲…...
Gateway反向代理配置
前言 一般而言，反向代理都是在Nginx中来实现的，其实Gateway也可以作为反向代理服务，不过一般不会这么做，只不过最近的项目，在通过Nginx反向代理之后，iPhone手机访问接口代理地址会异常，安卓手机…...
HiveSQL——共同使用ip的用户检测问题【自关联问题】
注：参考文章： SQL 之共同使用ip用户检测问题【自关联问题】-HQL面试题48【拼多多面试题】_hive sql 自关联-CSDN博客文章浏览阅读810次。0 问题描述create table log( uid char(10), ip char(15), time timestamp);insert into log valuesinsert into l…...
猫头虎分享已解决Bug || 修改mongodb3.0副本集用户密码遇到 BeanDefinitionParsingException
博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！ 专栏链接： 🔗 精选专栏： 《面试题大全》 — 面试准备的宝典！《IDEA开发秘籍》 — 提升你的IDEA技能！《100天精通鸿蒙》 …...
如何将ChatGPT升级到4.0版本？如何充值？
如何将ChatGPT升级到4.0版本？ 在人工智能的世界里，每一个升级都可能带来革命性的变革。ChatGPT的4.0版本无疑是当前最炙手可热的话题之一，那么如何进行升级，体验到这一版所带来的全新特性呢？以下是一步一步的指南。 …...
conda 相关命令
创建并激活环境：打开终端，并创建一个新的conda环境，以确保安装的软件与M1芯片兼容。运行以下命令： conda create -n myenv python这将创建一个名为"myenv"的新环境，并安装Python。然后，激活该环境…...
探索现代Web前端开发框架：选择最适合你的工具
在当今快速发展的Web开发领域，前端开发框架的选择显得尤为关键。这些框架可以帮助我们更高效地构建出交互性强、性能卓越的用户界面。本文将带你了解几个当前最受欢迎的Web前端开发框架，并帮助你根据自己的需求选择最合适的工具。 1. React React由Fac…...
记录一下，我使用stm32实现pwm波输入，以及对频率和占空比的计算，同时通过串口输出（实现-重要）
1，首先看下半物理仿真 看下我的配置： 看下计算方法以及matlab的仿真输出的数据： timer3的ch2是选择高电平，计算频率 timer3的ch1是选择的是低电平，用来计算周期 其中TemPIpre表示的是CH2输出的值， TemPI…...
Spring Cloud使用ZooKeeper作为注册中心的示例
简单的Spring Cloud应用程序使用ZooKeeper作为注册中心的示例： 1.新建模块： 2.勾选依赖： 3.在pom.xml文件中做出部分修改及添加Spring Cloud Zookeeper 依赖版本： 完整pom文件 <?xml version"1.0" encoding&q…...
【项目日记(九)】项目整体测试,优化以及缺陷分析
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:项目日记-高并发内存池⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你做项目 🔝🔝 开发环境: Visual Studio 2022 项目日…...
JavaScript 设计模式之外观模式
外观模式 我们为啥要使用外观模式呢，其实我们在使用各种 js 库的时候常常会看到很多的外观者模式，也正是这些库的大量使用，所以使得兼容性更广泛，通过外观者模式来封装多个功能，简化底层操作方法 const A {g: functi…...
一、基础数据结构——2.队列——3.双端队列和单调队列2
参考资料：《算法竞赛》，罗勇军 郭卫斌 著 本博客作为阅读本书的学习笔记，仅供交流学习。 建议关注 罗勇军老师博客 3. 单调队列与最大子序和问题 不限制子序列长度问题——贪心法或动态规划 HDOJ 1003 MAX SUM Max Sum Time Limit: 2000/10…...
Stable Diffusion 模型下载：Samaritan 3d Cartoon（撒玛利亚人 3d 卡通）
本文收录于《AI绘画从入门到精通》专栏，专栏总目录：点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十...
【软件工程导论】实验二——编制数据字典（数字化校园系统案例分析）
数字化校园系统案例分析 问题定义实验内容编制内容1数据项数据流处理逻辑数据存储 2外部实体 问题定义 数字化校园系统期望以数字化信息和网络为基础，在计算机和网络技术上建立起对教学、科研、管理、技术服务、生活服务等校园信息的收集、处理、整合、存储、传输和…...
耳机壳UV树脂制作私模定制耳塞适合什么样的人使用呢？
耳机壳UV树脂制作私模定制耳塞适合以下人群使用： 对音质要求高的人：私模定制耳塞能够完美契合用户的耳朵形状，减少漏音和外部噪音的干扰，提供更好的音质体验。需要长时间佩戴耳机的人：私模定制耳塞能够提高佩戴舒适度…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型（Primitive） 和 对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...
Canal环境搭建并实现和ES数据同步
作者：田超凡 日期：2025年6月7日 Canal安装，启动端口11111、8082： 安装canal-deployer服务端： https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...