京东组件移动端库的使用 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树脂制作私模定制耳塞适合以下人群使用： 对音质要求高的人：私模定制耳塞能够完美契合用户的耳朵形状，减少漏音和外部噪音的干扰，提供更好的音质体验。需要长时间佩戴耳机的人：私模定制耳塞能够提高佩戴舒适度…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
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数组即可。 至于每一种情况是否可以达到…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...