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…...

接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...

Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...

Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...