NaviveUI框架的使用 ——安装与引入(图标安装与引入)
文章目录
- 概述
- 安装
- 直接引入
- 引入图标样式库
概述
🍉Naive UI 是一个轻量、现代化且易于使用的 Vue 3 UI 组件库,它提供了一组简洁、易用且功能强大的组件,旨在为开发者提供更高效的开发体验,特别是对于构建现代化的 web 应用程序。适合开发者快速构建美观、功能齐全的用户界面。其丰富的组件、良好的定制性和 TypeScript 支持使其成为 Vue 3 项目中常用的 UI 组件库之一。
官网链接:https://ui.naiveadmin.com/zh-CN/light
温馨提示:naive-ui 仅支持 Vue3项目。
安装
💻打开项目根目录终端,输入一下命令:
npm i -D naive-ui

直接引入
🍱官方推荐了直接引入,就是我们用那个组件就引入组件,只有导入的组件才会被打包。
如果全局引入,就会让代码的冗余度太大了,就是需要的不需要的全部引进来。
当我们安装成功naive-ui之后,我们就可以在需要用的地方直接使用它了。
💈使用的步骤:
1️⃣ 注册需要的组件
2️⃣ 使用需要的组件
🍨上面这两个步骤是必须要的,如果你直接使用不注册组件的话也是不会生效的,请看下面的例子:
<template><!-- 使用组件 --><n-space vertical><n-input /><n-date-picker /></n-space><div class="contain"><n-button strong secondary>Default</n-button><n-button strong secondary type="tertiary">Tertiary</n-button><n-button strong secondary type="primary">Primary</n-button><n-button strong secondary type="info">Info</n-button><n-button strong secondary type="success">Success</n-button><n-button strong secondary type="warning">Warning</n-button><n-button strong secondary type="error">Error</n-button><n-button strong secondary round>Default</n-button><n-button strong secondary round type="primary">Primary</n-button></div><div class="contain"><n-space><n-button>Default</n-button><n-button type="tertiary">Tertiary</n-button><n-button type="primary">Primary</n-button><n-button type="info">Info</n-button><n-button type="success">Success</n-button><n-button type="warning">Warning</n-button><n-button type="error">Error</n-button></n-space></div>
</template><script setup lang="ts">// 注册组件
import { NInput, NDatePicker, NSpace, NButton } from 'naive-ui';</script><style lang="scss" scoped>.n-button:focus {outline: none !important;
}.contain{margin: 20px;
}</style>

⚓️可能遇到的问题,大家在第一次引入的时候可能会出现下面的这个问题,就是当我们点击button按钮的时候,他在聚焦的时候出现浏览器默认的聚焦样式,出现一个黑色的边框:

🎣我们只需要把默认样式覆盖掉就可以了:
.n-button:focus {outline: none !important;
}
🎳 加上这段代码,就可以正常使用了:

🌾到这里你就成功的把naive-ui引入并使用了,下面是几个在注册组件时的注意事项:
🌋 我们在注册组件的时候,我们空运根据引入的标签名去写我们引入的组件名字,在标签中都是以
“ n - 组件名”的结构,我们在下面注册的时候就直接按照大驼峰命名法去写就可以了,例如:
使用:
<n-space><n-button>Default</n-button><n-input /><n-date-picker /></n-space>
注册:
// 注册组件
import { NSpace, NButton,NInput, NDatePicker } from 'naive-ui';
🔖我们用到什么组件就引入什么组件、注册什么组件就可以了。
<template><!-- 使用组件 --><n-space vertical><n-input /><n-date-picker /></n-space><div class="contain"><n-button strong secondary>Default</n-button><n-button strong secondary type="tertiary">Tertiary</n-button><n-button strong secondary type="primary">Primary</n-button><n-button strong secondary type="info">Info</n-button><n-button strong secondary type="success">Success</n-button><n-button strong secondary type="warning">Warning</n-button><n-button strong secondary type="error">Error</n-button><n-button strong secondary round>Default</n-button><n-button strong secondary round type="primary">Primary</n-button></div><div class="contain"><n-space><n-button>Default</n-button><n-button type="tertiary">Tertiary</n-button><n-button type="primary">Primary</n-button><n-button type="info">Info</n-button><n-button type="success">Success</n-button><n-button type="warning">Warning</n-button><n-button type="error">Error</n-button></n-space></div><div class="contain"><n-gradient-text type="info">这是引入的字体1</n-gradient-text><br><n-gradient-text type="danger">这是引入的字体2</n-gradient-text><br><n-gradient-text :size="24" type="warning">这是引入的字体3</n-gradient-text><br><n-gradient-text :size="24" type="success">这是引入的字体4</n-gradient-text><br><n-gradient-text:size="24"gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">这是有渐变颜色的字体</n-gradient-text></div>
</template><script setup lang="ts">// 注册组件
import { NInput, NDatePicker, NSpace, NButton,NGradientText } from 'naive-ui';</script><style lang="scss" scoped>.n-button:focus {outline: none !important;
}.contain{margin: 20px;
}</style>

引入图标样式库
🐳在确保以及安装了naiveUI的前提下,我们还需要安装@vicons/ionicons5样式库的包才可以使用图标,
打开根目终端输入命令:
npm install naive-ui @vicons/ionicons5
🎓接下来就是使用与注册了,需要注意的是图标注册的时候需要注册两个地方,直接看例子吧,一看你就明白了:
注册:
// 注册组件
import { NInput, NDatePicker, NSpace, NButton,NGradientText,NIcon } from 'naive-ui';
import { GameController, GameControllerOutline } from '@vicons/ionicons5'
❄️使用:
<!-- 使用组件 --><div class="contain"><n-icon size="40" ><GameControllerOutline /></n-icon><n-icon size="40" color="#ff0f00"><GameController /></n-icon></div>

今天的分享就到这里啦,感谢大家看到这里,小江会一直与大家一起努力,文章中如有不足之处,你的支持是我前进的最大动力,还请多多指教,感谢支持,持续更新中 ……

相关文章:
NaviveUI框架的使用 ——安装与引入(图标安装与引入)
文章目录 概述安装直接引入引入图标样式库 概述 🍉Naive UI 是一个轻量、现代化且易于使用的 Vue 3 UI 组件库,它提供了一组简洁、易用且功能强大的组件,旨在为开发者提供更高效的开发体验,特别是对于构建现代化的 web 应用程序。…...
Cannot resolve symbol ‘ActivityThread‘ | Android 语法
背景 ActivityThread 是 Android 系统内部使用的一个类,它位于 android.app 包中,但在 Android SDK 的公共 API 中并没有公开。 由于 ActivityThread 是隐藏的内部类,因此在编写单元测试或功能开发时,无法直接引用它。可以使用反射来访问内部 API,或者使用依赖注入的方式…...
OpenSSH-9.9p1 OpenSSL-3.4.0 升级步骤详细
前言 收到漏洞扫描通知 OpenSSH 安全漏洞(CVE-2023-38408) OpenSSH 安全漏洞(CVE-2023-51385) OpenSSH 安全漏洞(CVE-2023-51384) OpenSSH 安全漏洞(CVE-2023-51767) OpenSSH 安全漏洞(CVE-2023-48795) OpenSSH(OpenBSD SecureShell)是加拿大OpenBSD计划…...
python 练习题
目录 1,输入三个整数,按升序输出 2,输入年份及1-12月份,判断月份属于大月,小月,闰月,平月,并输出本月天数 3,输入一个整数,显示其所有是素数因子 4&#…...
数学建模——Topsis法
数模评价类(2)——Topsis法 概述 Topsis:Technique for Order Preference by Similarity to Ideal Solution 也称优劣解距离法,该方法的基本思想是,通过计算每个备选方案与理想解和负理想解之间的距离,从而评估每个…...
Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录
前言 我这边一直用的electron-vue框架是基于electron 21版本的,electron 29版本追加了很多新功能,但是这些新功能对开发者不友好,对electron构建出来的软件,使用者更安全,所以,我暂时不想研究electron 29版…...
github仓库自动同步到gitee
Github Actions是Github推出的自动化CI/CD的功能,我们将使用Github Actions让Github仓库同步到Gitee 同步的原理是利用 SSH 公私钥配对的方式拉取 Github 仓库的代码并推送到 Gitee 仓库中,所以我们需要以下几个步骤 生成 SSH 公私钥添加公钥添加私钥配…...
汽车仪表板可识别安全气囊,安全带,ABS,邮箱,灯等多种告警参数,YOLO,VOC,COCO三种方式标记的数据集整理
关于数据集介绍: 汽车仪表板可识别安全气囊,安全带,ABS,邮箱,灯等多种告警参数,YOLO,VOC,COCO三种方式标记的数据集。 可识别常见的: 安全气囊和安全带系统 ,…...
springboot370高校宣讲会管理系统(论文+源码)_kaic
毕 业 设 计(论 文) 高校宣讲会管理系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,…...
GoReplay开源工具使用教程
目录 一、GoReplay环境搭建 1、Mac、Linux安装GoReplay环境 二、GoReplay录制与重播 1、搭建练习接口 2、录制命令 3、重播命令 三、GoReplay单个命令 1、常用命令 2、其他命令 3、命令示例 4、性能测试 5、正则表达式 四、gorepaly组合命令 1、组合命令实例 2、…...
UE4_材质节点_有关距离的_流体模拟
一、材质节点介绍: 特别注意:距离场需要独立显卡支持。 1、什么是距离场? 想象一下空间中只有两个实体, 一个球,一个圆柱. 空间由无数个点组成, 取其中任何一个点, 比如,它跟球面的最近距离是3, 跟圆柱面的最近距离是2, 那么这个点的值就…...
虚拟现实(VR)与增强现实(AR)有什么区别?
虚拟现实(Virtual Reality,VR)与增强现实(Augmented Reality,AR)在多个方面存在显著差异。以下是对这两者的详细比较: 一、概念定义 虚拟现实(VR): 是一种…...
浏览器中输入一个URL后,按下回车后发生了什么
URL ,统一资源定位符, 简单点就是网址 ip 或域名 端口号 资源位置 参数 锚点 大致流程 URL 解析DNS 查询TCP 连接处理请求接受响应渲染页面 1 .输入一个网址之后,首先浏览器通过查询 DNS ,查找这个 URL 的 IP …...
GNOME(GNU Network Object Model Environment)
定义与概述 GNOME(GNU Network Object Model Environment)是一种广泛使用的桌面环境。它是一个自由软件项目,旨在为操作系统提供一个直观、易用且功能强大的图形用户界面(GUI)。GNOME主要运行在类UNIX操作系统上&#…...
源码分析之Openlayers中的Collection类
概述 在Map类中,有一种高频出现的类Collection(即集合),比如Map类中interaction、controls和overlay的定义初始化和一些操作调用都和Collection有关。本文主要介绍 Openlayers 中Collection类的实现以及Collection类的事件机制。 源码剖析 Collection类 Collection类本质…...
Spring AI 框架介绍
Spring AI是一个面向人工智能工程的应用框架。它的目标是将Spring生态系统的设计原则(如可移植性和模块化设计)应用于AI领域,并推广使用pojo作为AI领域应用的构建模块。 概述 Spring AI 现在(2024/12)已经支持语言,图像…...
【Oracle11g SQL详解】UPDATE 和 DELETE 操作的正确使用
UPDATE 和 DELETE 操作的正确使用 UPDATE 和 DELETE 是 Oracle 11g 中用于修改和删除表中数据的重要 SQL 语句。在操作时,需特别注意数据筛选条件的准确性,以避免意外更改或删除数据。本文将详细介绍这两种语句的用法、注意事项及相关案例。 一、UPDATE…...
Advanced Macro Techniques in C/C++: `#`, `##`, and Variadic Macros
Advanced Macro Techniques in C/C: #, ##, and Variadic Macros 文章目录 Advanced Macro Techniques in C/C: #, ##, and Variadic MacrosIllustrative Examples of Macros Using # and ##Stringification ExampleToken Concatenation ExampleNested Macros Example Key Conc…...
Maven、JAVAWeb、Servlet
知识点目标 1、MavenMaven是什么Maven项目的目录结构Maven的Pom文件Maven的命令Maven依赖管理Maven仓库JavaWeb项目 2.网络基础知识 3、ServletMaven Maven是什么 Maven是Java的项目管理工具,可以构建,打包,部署项目,还可以管理…...
分布式资源调度——yarn 概述(资源调度基本架构和高可用的实现)
此文章是学习笔记,图片均来源于B站:哈喽鹏程 yarn详细介绍 1、yarn 简介1.1 yarn的简介1.2 yarn 的基本架构1.3. yarn 的高可用 2、yarn 调度策略、运维、监控2.1 yarn 的调度策略2.1.1 FIFO scheduler(先进先出)2.1.2 容量调度2.1.3 公平调度 2.2 yarn…...
自动化数据标注:OpenClaw+Qwen3.5-9B加速AI模型训练
自动化数据标注:OpenClawQwen3.5-9B加速AI模型训练 1. 数据标注的痛点与自动化机遇 作为一名长期奋战在机器学习一线的开发者,我深知数据标注环节的折磨。去年参与一个图像分类项目时,团队花费了整整三周时间手工标注5万张图片,…...
AnalogPin库:Arduino模拟信号抗噪与平滑处理实战指南
1. AnalogPin 库概述:面向嵌入式系统的模拟信号抗噪与平滑处理框架AnalogPin 是一个专为 Arduino 平台设计的轻量级 C 类库,其核心目标并非简单封装analogRead(),而是构建一套可配置、可扩展、硬件感知的模拟输入信号调理机制。在工业传感、电…...
《QGIS快速入门与应用基础》245:单个元素选择与拖拽
作者:翰墨之道,毕业于国际知名大学空间信息与计算机专业,获硕士学位,现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发,精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架,兼具…...
每天20分钟值不值?淘宝任务自动化的取舍之道
每天20分钟值不值?淘宝任务自动化的取舍之道 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本,包含蚂蚁森林收取能量,芭芭农场全任务,解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 在数字生活时代…...
保姆级教程:在ROS2 Humble和Gazebo 11中配置FAST_LIO_ROS2进行三维SLAM仿真
从零搭建ROS2与Gazebo环境:FAST_LIO_ROS2三维SLAM实战指南 刚接触机器人仿真的开发者常被环境配置的复杂性劝退——依赖冲突、参数配置错误、话题不匹配等问题层出不穷。本文将手把手带您完成ROS2 Humble、Gazebo 11与FAST_LIO_ROS2的完整集成,实现一个可…...
OptiScaler终极配置指南:解锁游戏画质提升的7个关键技术
OptiScaler终极配置指南:解锁游戏画质提升的7个关键技术 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiScaler是一…...
Qwen3-ForcedAligner在开源项目中的贡献指南
Qwen3-ForcedAligner在开源项目中的贡献指南 1. 引言 如果你对语音识别和音频处理感兴趣,想要为开源项目做贡献,Qwen3-ForcedAligner是个绝佳的选择。这个项目专注于语音文本对齐技术,能够精确标注音频中每个词或字符的时间戳,对…...
04.如何在Allegro X中导入机械结构尺寸图纸和注意事项 I Allegro X PCB设计小诀窍系列
大家好!在进行PCB设计时,我们经常需要根据机械结构工程师提供的**DXF图纸**来确定板框形状、定位孔位置、元器件高度限制区域等关键信息。如果手动在PCB中重新绘制这些几何图形,不仅耗时,还容易与结构图纸产生偏差——哪怕零点几毫…...
铜钟音乐:告别广告与社交干扰的纯净听歌工具
铜钟音乐:告别广告与社交干扰的纯净听歌工具 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特!(密码重置功能已回归) 项目地址: https://gitcode.com/GitHub_Trending/to/ton…...
高效转换:Markdown与思维导图的无缝衔接指南
1. 为什么需要Markdown与思维导图的相互转换? 第一次接触Markdown和思维导图时,我就被它们的简洁高效所吸引。Markdown用简单的语法就能写出结构清晰的文档,而思维导图则能直观展示复杂的逻辑关系。但真正让我头疼的是,这两种工具…...
