京东组件移动端库的使用 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;…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
工业安全零事故的智能守护者：一体化AI智能安防平台
前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...