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

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

article 2024/12/4 4:53:01

文章目录

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

概述

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