Nave UI——一个 Vue 3 组件库_navui

注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。

官网文档地址：https://www.naiveui.com/zh-CN/light/docs/introduction

目录

一、安装Naive UI

二、如何使用

（1）局部安装（推荐）

（2）全局安装（不推荐）

三、支持的平台

四、简单总结

---

一、安装Naive UI

npm i -D naive-ui
1

然后安装Naive UI需要的字体 ：

npm i -D vfonts
1

二、如何使用

（1）局部安装（推荐）

你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。

<template>
  <n-button>naive-ui</n-button>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NButton } from 'naive-ui'

  export default defineComponent({
    components: {
      NButton
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果你可以使用 setup script，你可以用下面的方式使用组件。

<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>
1
2
3
4
5
6
7

（2）全局安装（不推荐）

安装全部组件，打包会有冗余代码。

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

const app = createApp(App)
app.use(naive)
1
2
3
4
5

安装后，你可以这样使用全部组件。

<template>
  <n-button>naive-ui</n-button>
</template>
1
2
3

三、支持的平台

IE 浏览器不支持。

Edge、Firefox、Chrome、Safari等现代浏览器的最新的 2 个版本确保会被支持。

四、简单总结

更多Nave UI组件使用相关内容，请参考组件使用文档：https://www.naiveui.com/zh-CN/light/components/button

基于naive-ui构建的免费开源的中后台模板

预览地址：https://naive-ui-admin.vercel.app/

账号：admin

密码：123456