当前位置：首页 > news >正文

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

news 2025/7/7 7:48:41

文章目录

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

概述

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