持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

一、前言

最近开始学习vue3，那当然得用用尤大推荐的naive ui库，同时听同事说似乎不知道怎么用xicons，这不得卷他们一下。

二、naive ui库

1、简介

Naive UI是一个vue3的组件库，支持ts，有超过80个组件，这些组件都可以treeshaking，句式可以按需引入，不需要全部引入，而且可以直接调用，减轻写作量，同时 select、tree、transfer、table、cascader 都可以用虚拟列表，加载速度杠杠的。

2、支持前提

浏览器：

ie浏览器直接pass

其他浏览器的最新两个版本必定支持，其他版本基本也支持，但可能存在bug

vue

vue3  >3.0.5

ts版本>4.1

3、安装

npm i -D naive-ui

4、引入和使用

(1)直接引入

直接在对应的vue文件里引入需要的部分，比如我引入了一个button组件，引入之后就可以直接使用了

import { NButton } from 'naive-ui'

<script setup lang="ts">
import { NButton } from 'naive-ui'
</script>

<template>
  <div>
    引入naive-ui图标库
  </div>
  <div>
    n-button
    <n-button>naive-ui</n-button>
  </div>
</template>

<style scoped>
</style>

(2) 全局引入

官网有全部引入的做法，但不推荐，会打包了其他没使用的组件

import { createApp } from 'vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)

所以就有了，下面的按需引入的全局做法

官网的标准写法

import { createApp } from 'vue'
import {
 // create naive ui
 create,
 // component
 NButton
} from 'naive-ui'

const naive = create({
 components: [NButton]
})

const app = createApp()
app.use(naive)

但由于我的项目是vite构建过的项目

在挂载这步有些许不同，我引入了NButton和NIcon组件，然后注释了文件里的单独引入代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
  // create naive ui
  create,
  // component
  NButton,
  NIcon
} from 'naive-ui'
const naive = create({
  components: [NButton, NIcon]
})

createApp(App).use(naive).mount('#app')

和单独引入的实现效果一致

5、xicons图标库

前面我们引入了NIcon组件，这里是推荐配合使用xicons图标库的，这是图标库网址,需科学上网，可以预览图标、图标所在库和图标名字。

我们放大一个来看

比如官网提供的例子里用到的手柄图标，它名字是GameControllerOutline，所在的库是ionicons5，这两个名称，我会举例带大家看看是什么地方用到了。

(1) 先下载再引入

想作为组件引入，首先我们需要把文件下载下来，我们已经知道库名是ionicons5，那直接安装一下吧

npm i -D @vicons/ionicons5

下载完之后，我们再引入到文件里，script标签里为 setup，组件即引即用，无需额外注册。

import { GameControllerOutline } from '@vicons/ionicons5'

(2) 当组件使用

n-icon控制大小和颜色，在其中直接用刚刚引入的图标组件

n-icon // 引入的图标组件

效果如下，这个鲜红的手柄就是我们引入的了

(3) 使用component属性

这次我们只用n-icon，在component里写上要使用的图标名

<n-icon size="40" color="green" depth="4" :component="GameControllerOutline" />

这个绿色的手柄就是我们新增加的啦，但是可以看到图标明显淡了许多，是我加了depth深度属性，值是1-5，感觉是和透明度差不多的属性。

NIcon还有一个外包装标签，NIconWrapper，记得去main.ts里引入一下

<n-icon-wrapper color="red" size="60" border-radius="8">
    <n-icon size="40" color="green" depth="4" :component="GameControllerOutline" />
</n-icon-wrapper>

可以实现带背景的图标,如图例的红色背景的手柄

另外附赠下其他库

# 适用于 vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon

三、小结

今天浅浅试了一下naive ui库，整体来说，上手体验感不错，也挺便捷的，整体的思维逻辑也很符合vue3的风格，推荐大家伙都可以去用起来。

ps: 我是地霊殿__三無，vue3不能落下。

vue3使用naive ui库和xicons图标库