注意，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

Naïve UI——一个 Vue 3 组件库相关推荐

如何对第一个Vue.js组件进行单元测试
by Sarah Dayan 通过莎拉·达扬 In Build Your First Vue.js Component we made a star rating component. We've c ...
从零实现Vue的组件库（零）- 基本结构以及构建工具
今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项.尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件.将其沉淀下来,积累一些自己 ...
vite/storybook/rollup搭建一个自己的组件库
构建测试项目首先vite 初始化一个项目 vue create story-book-demo ## 或者 vue create story-book-demo 然后添加storybook ,具体参 ...
Vue|自定义组件库组件“前缀“咋定义？
定义组件"前缀" 自定义组件库组件"前缀",咋定义?假如我自己个写一个组件库,怎么自定义自己的前组件前缀名.如:我自定义一个Button按钮,要让ta带上我自定 ...
从零开始搭建一个私有前端组件库
前言本文的代码部分基于vue2 + ts ,最终的文件目录如下一.让vue能够正确use组件 1.1 准备工作首先用cli,根据自己的需求创建一个项目,然后根据自己习惯或团队的规范可以做一些项目 ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
从零实现Vue的组件库（十二）- Table 实现
基于Table标签的展示数据组件. Table 组件主要特点在于: 组件 data 的解耦,减少重复代码: 良好的扩展性,可以通过自定义列模板来适应不同的业务场景. 1. 实例代码 <fat- ...
构建Vue前端组件库
在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...

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

一、安装Naive UI

二、如何使用

（1）局部安装（推荐）

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

三、支持的平台

四、简单总结

Naïve UI——一个 Vue 3 组件库相关推荐

最新文章

热门文章