NaviveUI框架的使用 ——安装与引入（图标安装与引入）

news2024/12/23 17:22:15

文章目录

    • 概述
    • 安装
    • 直接引入
    • 引入图标样式库

概述

🍉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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2252441.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPF DataGrid 列隐藏

WPF DataGrid 列隐藏

Window节点加上下面的 <Window.Resources><FrameworkElement x:Key"ProxyElement" DataContext"{Binding}" /></Window.Resources>然后随便加一个隐藏控件 <ContentControl Content"{StaticResource ProxyElement}" Visi…
阅读更多...
【Gitlab】CICD使用minio作为分布式缓存

【Gitlab】CICD使用minio作为分布式缓存

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…
阅读更多...
用到动态库的程序运行过程

用到动态库的程序运行过程

当我们写好了一段代码然后编译运行后会生成可执行文件&#xff0c;该文件会存在磁盘的当前目录下&#xff0c;而当我们开始运行这段程序时&#xff0c;操作系统&#xff08;加载器&#xff09;需要将其从磁盘加载进内存然后执行相关操作&#xff0c;而对于用到动态库的程序&…
阅读更多...
ansible自动化运维（一）配置主机清单

ansible自动化运维（一）配置主机清单

目录 一、介绍 1.1了解自动化运维 1.2 ansible简介 1.3 ansible自动化运维的优势 1.4 ansible架构图 二、部署ansible 2.1 基本参数 2.2 Ansible帮助命令 2.3 配置主机清单 2.3.1 查看ansible的所有配置文件 2.3.2 /etc/ansible/ansible.cfg常用配置选项 2.3.3 ssh密…
阅读更多...
高效集成：将聚水潭数据导入MySQL的实战案例

高效集成：将聚水潭数据导入MySQL的实战案例

聚水潭数据集成到MySQL&#xff1a;店铺信息查询案例分享 在数据驱动的业务环境中&#xff0c;如何高效、准确地实现跨平台的数据集成是每个企业面临的重要挑战。本文将聚焦于一个具体的系统对接集成案例——将聚水潭的店铺信息查询结果集成到MySQL数据库中&#xff0c;以供BI…
阅读更多...
Spark基本命令详解

Spark基本命令详解

文章目录 Spark基本命令详解一、引言二、Spark Core 基本命令1、Transformations&#xff08;转换操作&#xff09;1.1、groupBy(func)1.2、filter(func) 2、Actions&#xff08;动作操作&#xff09;2.1、distinct([numTasks])2.2、sortBy(func, [ascending], [numTasks]) 三、…
阅读更多...
[在线实验]-ActiveMQ Docker镜像的下载与部署

[在线实验]-ActiveMQ Docker镜像的下载与部署

镜像下载 下载ActiveMQ的Docker镜像文件。通常&#xff0c;这些文件会以.tar格式提供&#xff0c;例如activemq.tar。 docker的activemq镜像资源-CSDN文库 加载镜像 下载完成后&#xff0c;您可以使用以下命令将镜像文件加载到Docker中&#xff1a; docker load --input a…
阅读更多...
CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CloudQuery 社区 11 月新版本来啦&#xff01;本月版本依旧是 CUG&#xff08;CloudQuery 用户组&#xff09;尝鲜版的更新。 针对审计模块增加了 SQL 模式自定义审计图表&#xff1b;在流程模块引入了“审批人组”概念。此外&#xff0c;在 SQL 编辑器、连接管理等模块都涉及…
阅读更多...
mac终端自定义命令打开vscode

mac终端自定义命令打开vscode

1.打开终端配置文件 open -e ~/.bash_profile终端安装了zsh&#xff0c;那么配置文件是.zshrc&#xff08;打开zsh配置&#xff0c;这里举&#x1f330;使用zsh&#xff09; sudo open -e ~/.zshrc 2.在zshrc配置文件中添加新的脚本&#xff08;这里的code就是快捷命令可以进…
阅读更多...
关于单片机的原理与应用！

关于单片机的原理与应用！

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///目前正在学习C&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于单片…
阅读更多...
深入解析 MySQL 启动方式：`systemctl` 与 `mysqld` 的对比与应用

深入解析 MySQL 启动方式：`systemctl` 与 `mysqld` 的对比与应用

目录 前言1. 使用 systemctl 启动 MySQL1.1 什么是 systemctl1.2 systemctl 启动 MySQL 的方法1.3 应用场景1.4 优缺点优点缺点 2. 使用 mysqld 命令直接启动 MySQL2.1 什么是 mysqld2.2 mysqld 启动 MySQL 的方法2.3 应用场景2.4 优缺点优点缺点 3. 对比分析结语 前言 MySQL …
阅读更多...
简单介绍下 VitePress 中的 vp-doc 和 vp-raw

简单介绍下 VitePress 中的 vp-doc 和 vp-raw

VitePress 是一个轻量级的静态网站生成器&#xff0c;专为快速构建文档网站而设计。它是基于 Vite 和 Vue 3 构建的&#xff0c;旨在提供快速的开发体验和高效的构建过程。 存在两个需要注意的点&#xff1a;vp-doc 和 vp-raw&#xff0c;它们代表了不同的 CSS 样式类和用途&a…
阅读更多...
HTML前端开发-- Flex布局详解及实战

HTML前端开发-- Flex布局详解及实战

引言 Flex布局&#xff0c;全称为Flexible Box Layout&#xff0c;是一种现代CSS布局技术&#xff0c;它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。 一、基本概念 Flex布局的核心是Flex容器&#xff08;…
阅读更多...
【前端】理解 JavaScript 中 typeof 操作符的独特行为

【前端】理解 JavaScript 中 typeof 操作符的独特行为

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;typeof 操作符的基本使用&#x1f4af;为什么 typeof 数组是 "object"&#xff1f;&#x1f4af;为什么 typeof {} 返回 "object"&#xff1f;&…
阅读更多...
一键解析RAW文件，GPS定位展示，摄影师专用照片管理软件

一键解析RAW文件，GPS定位展示，摄影师专用照片管理软件

作为一款精心打造的数码影像管理工具&#xff0c;bkViewer以其轻量化设计和强大的功能特性脱颖而出。这款软件不仅能够完美处理各类主流图片格式&#xff0c;更整合了专业级的图像信息处理系统&#xff0c;包含完整的EXIF、XMP、IPTC、GPS、ICC等元数据解析能力&#xff0c;并通…
阅读更多...
import.meta.glob动态加载图片

import.meta.glob动态加载图片

import.meta.glob 基于Vite&#xff08;Vue 3 默认构建工具&#xff09;&#xff0c;用于动态导入模块&#xff0c;特别是当你需要批量导入文件或模块时. const modules import.meta.glob(/path/to/files/**/*.js);注意&#xff1a;import.meta.glob 是针对 源代码&#xff…
阅读更多...
[高阶数据结构六]最短路径算法

[高阶数据结构六]最短路径算法

1.前言 最短路径算法是在图论的基础上讲解的&#xff0c;如果你还不知道图论的相关知识的话&#xff0c;可以阅读下面几篇文章。 [高阶数据结构四] 初始图论_初始图结构-CSDN博客 [高阶数据结构五] 图的遍历和最小生成树_图的遍历和生成树求解-CSDN博客 本章重点&#xff1a;…
阅读更多...
开源的跨平台SQL 编辑器Beekeeper Studio

开源的跨平台SQL 编辑器Beekeeper Studio

一款开源的跨平台 SQL 编辑器&#xff0c;提供 SQL 语法高亮、自动补全、数据表内容筛选与过滤、连接 Web 数据库、存储历史查询记录等功能。该编辑器支持 SQLite、MySQL、MariaDB、Postgres 等主流数据库&#xff0c;并兼容 Windows、macOS、Linux 等桌面操作系统。 项目地址…
阅读更多...
mysql 5.7安装及安装后无法启动问题处理

mysql 5.7安装及安装后无法启动问题处理

下载安装包&#xff0c;直接解压 配置环境变量 创建my.ini文件 [mysqld] #端口号 port 3306 #mysql-5.7.27-winx64的路径 basedirD:/soft/mysql57 #mysql-5.7.27-winx64的路径\data datadirD:/soft/mysql57/data #最大连接数 max_connections200 #编码 character-set-server…
阅读更多...
spine 动画层 动态权重

spine 动画层 动态权重

前奏.业务背景 这边想实现一个功能&#xff0c;项目中有 一只猫 猫的头会盯着逗猫棒移动。因为素材还没到所以这里使用了 spine 自带的猫头鹰。他的动画 刚好挺有针对性&#xff1a;&#xff08;关联上篇&#xff09;https://blog.csdn.net/nicepainkiller/article/details/144…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023