Naïve UI——一个 Vue 3 组件库_native ui

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

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

目录

一、安装Naive UI

二、如何使用

（1）局部安装（推荐）

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

三、支持的平台

四、简单总结

---

一、安装Naive UI

npm i -D naive-ui

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

npm i -D vfonts

二、如何使用

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

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

<template>
  <n-button>naive-ui</n-button>
</template>
 
<script setup>
  import { NButton } from 'naive-ui'
</script>

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

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

import { createApp } from 'vue'
import naive from 'naive-ui'
 
const app = createApp(App)
app.use(naive)

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

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

三、支持的平台

IE 浏览器不支持。

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

四、简单总结

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

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

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

账号：admin        

密码：123456