Naive UI的安装及使用

最新推荐文章于 2025-03-22 08:18:46 发布

云风xe

最新推荐文章于 2025-03-22 08:18:46 发布

阅读量5.7k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_52364694/article/details/120250494

版权

本文详细介绍了如何安装并使用NaiveUI库来创建前端应用。首先通过npm安装NaiveUI和字体库，然后在main.js全局引入。接着在App.vue组件中展示了一个按钮的例子，包括不同类型的按钮。按照这些步骤，可以轻松构建具有多种样式的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装
首先安装Naive UI的包

npm i -D naive-ui

再安装字体库

npm i -D vfonts

二、全局引入
main.js中添加代码

import naive from 'naive-ui'
app.use(naive)

三、使用（按钮示例）
App.vue中

<script setup>
import {
		NButton
} from "naive-ui";
</script>
<template>
	<n-space>
		<n-button>Default</n-button>
		<n-button type="primary">Primary</n-button>
		<n-button type="info">Info</n-button>
		<n-button type="success">Success</n-button>
		<n-button type="warning">Warning</n-button>
		<n-button type="error">Error</n-button>
	</n-space>
</template>