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

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...

Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ) 缓存工作原理分析 在了解了本地缓存和远程缓存之后,我们来探究缓存是如何工作的。以计算文件的哈希串为例,若后续运行任务时文件哈希串未变,系统会直接使用对应的输出和制品文件。 2 …...

VSCode 使用CMake 构建 Qt 5 窗口程序
首先,目录结构如下图: 运行效果: cmake -B build cmake --build build 运行: windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...