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

素颜马尾好姑娘i 2023-09-30 09:23 4阅读 0赞

> 注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。
> 
> 官网文档地址：[https://www.naiveui.com/zh-CN/light/docs/introduction][https_www.naiveui.com_zh-CN_light_docs_introduction]

## ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16][] ##

**目录**

一、安装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][https_www.naiveui.com_zh-CN_light_components_button]
> 
> 基于naive-ui构建的免费开源的中后台模板
> 
> 预览地址：[https://naive-ui-admin.vercel.app/][https_naive-ui-admin.vercel.app]
> 
> 账号：admin
> 
> 密码：123456

[https_www.naiveui.com_zh-CN_light_docs_introduction]: https://www.naiveui.com/zh-CN/light/docs/introduction
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9a8e2a8801a7456487303f6e51762025.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16
[https_www.naiveui.com_zh-CN_light_components_button]: https://www.naiveui.com/zh-CN/light/components/button
[https_naive-ui-admin.vercel.app]: https://naive-ui-admin.vercel.app/