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

已于 2024-12-02 17:03:28 修改
阅读量2.1k 收藏 15
点赞数 30
分类专栏： 前端 文章标签： html5 javascript vue.js 前端框架
于 2024-12-02 17:00:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53752776/article/details/144189603
版权

文章目录

概述

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

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

Naïve UI——一个 Vue 3 组件库
猿小白的博客
03-14 4万+
注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。 官网文档地址：https://www.naiveui.com/zh-CN/light/docs/introduction 一、安装Naive UI npm i -D naive-ui 然后安装Naive UI需要的字体 ： npm i -D vfonts 二、如何使用 （1）局部安装（推荐） 你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。 <templat..
NaiveUI安装及使用
成长的点滴
02-02 2298
在全局或需要使用message的地方使用 ，然后使用 useMessage方法获取对应api，如。则在env.d.ts 或 vire-env.d.ts，添加声明即可。1、安装UI组件库 naive-ui。3、在main.ts中导入可全局使用。6、使用消息提示message。4、具体页面直接通过标签使用。// App.vue中用。然后在具体子页面使用。
Naive UI框架安装和引入使用
一个努力搬砖的前端开发
03-13 1689
一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，注意，naive-ui 仅支持 Vue3。
Naive UI 使用教程
gitblog_00705的博客
08-09 1290
Naive UI 使用教程 naive-uiA Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.项目地址:https://gitcode.com/gh_mirrors/na/naive-ui 项目介绍 Naive UI 是一个基于 Vue 3 的组件库，它提供了丰富的 UI 组...
Naive UI：打造高效、可定制的Vue 3组件库新标杆
最新发布
chenchuang0128的博客
03-22 760
随着Vue 3的崛起，开发者们对于组件库的需求也日益增长。Naive UI，一个专为Vue 3打造的现代化、轻量级且高度可定制的组件库，应运而生。本文将从项目背景、目标客户、平台定位、平台技术、核心功能、独特优势以及应用场景等多个方面，全面剖析Naive UI，并探讨其如何成为Vue 3组件库的新标杆。
Naive UI——一个 Vue 3 组件库(Naive UI的安装和使用)
热门推荐
peachban的博客
01-02 3万+
注意：naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。
Naive UI 使用与安装教程
gitblog_00472的博客
08-09 948
Naive UI 使用与安装教程 项目地址:https://gitcode.com/gh_mirrors/na/naive-ui 1. 项目目录结构及介绍 Naive UI 是一个基于 Vue 3 的组件库，以其简洁的设计和高度的可定制性受到开发者欢迎。以下是其典型的项目目录结构概述： naive-ui/ ├── src # 源代码目录 │ ├── ...
Naive UI组件库的使用-第一部分
Coffee&Code
06-27 3602
Naive UI 通过使用 n-config-provider 调整主题。默认情况下所有组件均为亮色主题，无需任何配置。如果你想使用暗色主题：那么设置变量theme = darkTheme即可。若theme值为undefined则不影响内部组件主题。<template><app /></script>本篇文章讲述了naive ui在vue3下的安装和配置，及图标xicons的使用，及字体的使用。还有就是全局系统主题的设置，及自定义组件主题的设置方式，还有就编辑器的使用，再有就是国际化的实现。
Naive UI：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思。
chenchuang0128的博客
03-24 2682
在当今的前端开发领域，Vue 3已成为中后台应用的首选框架。为了满足开发者的需求，各种组件库如雨后春笋般涌现。其中，Naive UI以其独特的优势，成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。一、Naive UI的特性组件丰富：Naive UI提供了超过80个组件，覆盖了表格、表单、弹窗、图表等多个方面。这些组件不仅功能强大，而且高度可定制化，满足了各种业务需求。主题可调：Naive UI提供了一个先进的类型安全主题系统。
安装Naive UI【包含自动导入常用组件】
qq_22841387的博客
03-16 3934
在Vue3项目中，我们希望能够快速集成一套设计优秀的组件库，Naive UI 正是一个不错的选择。它不仅提供了强大的组件支持，而且设计上具有高度的一致性和易用性，使开发者能够快速构建符合现代Web应用标准的界面。官方安装地址：Naive UI 官方文档Naive UI 允许通过来设置全局的主题样式和配置。例如，可以为组件统一设置主题颜色、语言等。你可以在// 引入中文语言包components: [ /* ...其他组件 */ ],locale: zhCN, // 设置中文语言theme: {
Naive ui：菜单 Menu批量处理图标替换自定义图片
lq099526的专栏
09-30 3259
项目中使用的是自定义的图标，把需要使用的图标保存到本地，使用。2、新建一个js文件，把需要用到的图标引入到项目文件中。2、菜单组件中引入js文件，渲染图标。n-menu自带的图标使用。图标库，使用方法参考官网和。批量处理菜单图标渲染。1、新建一个菜单组件。
Naive UI的安装及使用
m0_52364694的博客
09-12 5807
一、安装 首先安装Naive UI的包 npm i -D naive-ui 再安装字体库 npm i -D vfonts 二、全局引入 main.js中添加代码 import naive from 'naive-ui' app.use(naive) 三、使用（按钮示例） App.vue中 <script setup> import { NButton } from "naive-ui"; </script> <template> <n-space>
Naive UI 全局按需引入
FantasyWeirdo的博客
03-16 3071
安装 npm add naive-ui 全局按需引入组件 新建文件 plugins/naive.js import { // create naive ui create, // component NConfigProvider, NMessageProvider, NButton, NIcon, } from 'naive-ui' const naive = create({ components: [ NConfigP
Naive UI的安装和使用 | 小蚂蚁云
xiaomayios的博客
11-05 600
提供了一套完整的页面模板，包括登录、仪表盘、表格、表单、通知等多个常见的业务场景。该框架采用了 Vue.js 和 Vuex 进行状态管理，结合 Axios 进行数据请求，确保了开发过程的高效和便捷。此外，项目还集成了 Element Plus Icons 和其他实用的前端库，让开发者可以快速上手并自定义设计。技术分析Vue.js：基于 Vue 3 构建，利用 Vue 的响应式特性和强大的生态系统，使得代码组织清晰，易于维护。
Naive UI 安装和配置指南
gitblog_07798的博客
09-13 753
Naive UI 安装和配置指南 naive-ui 项目地址: https://gitcode.com/gh_mirrors/nai/naive-ui 1. 项目基础介绍和...
分享一个适用于 Vue3.x 非常好用的组件库【Naive UI】
程序研博客
05-13 2337
Naive UI 是一种简单易用、不太复杂的用户界面（UI）框架，主要用于Web应用程序的开发。它提供了超过80个组件，覆盖了表格、表单、弹窗、图表等多个方面，这些组件不仅功能强大，而且高度可定制化，满足了各种业务需求。如果你想要使用Naive UI，可以通过yarn或npm等包管理工具进行安装，然后在你的项目中按需引入并使用。具体的安装和使用方法可以在Naive UI的官方文档或相关教程中找到。Naive UI。
naiveUI table 自定义单元格 iconfont 图标
小肉包的博客
11-28 1478
【代码】naiveUI table 自定义单元格 iconfont 图标。
在Vue3中使用NavieUI组件库，美化页面
qq_53679247的博客
04-06 3322
注意，好像只支持按需引用。2 安装NavieUI。3 使用NavieUI。1 创建Vue3项目。
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
那些免费的砖
08-08 1818
非大厂 KPI 项目！开源三天就收获 800 Star，还获得 Vue 作者尤雨溪的官方推荐。 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库，作者来自图森未来公司，一开始内部维护并使用两年，如今在 Github 社区开源了，第一时间体验并推荐给各位喜欢免费开源的伙伴们。 Naive UI 的特点 组件丰富完整，超过70个常用业务组件，支持按需引入 官方提供主题编辑器，不用繁琐的 less、sass、css 变量，也.
NavieUI(一)
baibaibaiya的博客
07-12 1807
navieui问题相关记录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值