Naive UI 快速上手教程：10 分钟构建你的第一个 Vue 3 界面
项目地址: https://gitcode.com/gh_mirrors/na/naive-ui 你还在为 Vue 3 项目寻找合适的组件库吗？还在为主题定制和类型安全烦恼吗？本文将带你 10 分钟上手 Naive UI，从安装到实现一个基础界面，让你快速掌握这个功能完整、主题可调、使用 TypeScript 的 Vue 3 组件库。读完你将学会如何安装 Naive UI、引入组件、使用按钮组件以及构建一个简单的用户界面。
关于 Naive UI
Naive UI 是一个基于 Vue 3 的组件库，具有以下特点：
- 比较完整：提供超过 90 个组件，支持按需引入，可减少代码量。
- 主题可调：拥有先进的类型安全主题系统，无需使用 less、sass、css 变量及 webpack 的 loaders。
- 使用 TypeScript：全量使用 TypeScript 编写，与 TypeScript 项目无缝衔接，且无需导入 CSS 即可让组件正常工作。
- 快：性能优化较好，数据组件支持虚拟列表。
官方文档：README.zh-CN.md
安装 Naive UI
使用 npm 安装
打开终端，在你的 Vue 3 项目根目录下执行以下命令安装 Naive UI：
npm i -D naive-ui
安装字体
Naive UI 建议使用 vfonts 作为字体库，执行以下命令安装：
npm i -D vfonts
安装图标库
Naive UI 建议使用 xicons 作为图标库，你可以根据需要选择合适的图标库进行安装。
引入组件
在 Vue 3 项目中，你可以按需引入 Naive UI 的组件。以下是一个简单的示例，展示如何在组件中引入并使用 Naive UI 的按钮组件。
首先，在你的 Vue 组件文件中，导入 NButton 组件和 NSpace 组件（用于布局）：
<template>
<n-space>
<n-button>Default</n-button>
<n-button type="tertiary">Tertiary</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>
<script setup>
import { NButton, NSpace } from 'naive-ui'
</script>
按钮组件源码示例：src/button/demos/zhCN/basic.demo.vue
构建第一个界面
下面我们来构建一个简单的用户界面，包含标题、按钮组和一个卡片组件。
引入所需组件
除了按钮组件，我们还需要引入卡片组件 NCard 和布局组件 NLayout、NLayoutContent 等。
<template>
<n-layout>
<n-layout-content style="padding: 24px;">
<n-card title="我的第一个 Naive UI 界面" style="max-width: 800px; margin: 0 auto;">
<h2>欢迎使用 Naive UI</h2>
<p>这是一个使用 Naive UI 构建的简单界面示例。</p>
<n-space style="margin-top: 16px;">
<n-button type="primary" @click="handleClick">点击我</n-button>
<n-button type="info">了解更多</n-button>
<n-button type="warning">提示</n-button>
</n-space>
</n-card>
</n-layout-content>
</n-layout>
</template>
<script setup>
import { NLayout, NLayoutContent, NCard, NButton, NSpace } from 'naive-ui'
const handleClick = () => {
alert('按钮被点击了！')
}
</script>
代码解释
NLayout和NLayoutContent：用于页面布局，NLayoutContent是布局的内容区域，设置了内边距。NCard：卡片组件，用于包裹内容，具有标题栏，设置了最大宽度和居中显示。NButton：按钮组件，设置了不同的类型（primary、info、warning），并为 primary 按钮添加了点击事件。NSpace：用于按钮之间的间距控制。
总结与展望
通过本文的介绍，你已经了解了 Naive UI 的基本特点、安装方法以及如何引入和使用组件来构建简单的界面。Naive UI 提供了丰富的组件和强大的主题定制功能，可以满足各种 Vue 3 项目的需求。
接下来，你可以进一步探索 Naive UI 的其他组件，如表格、表单、对话框等，以及主题定制功能，打造属于你的个性化界面。
希望本文对你有所帮助，如果你有任何问题或建议，欢迎加入 Naive UI 的社区进行交流。
社区交流：README.zh-CN.md（可在其中找到钉钉群等社区信息）
如果你觉得本文有用，请点赞、收藏、关注，以便获取更多关于 Naive UI 的教程和技巧。下期我们将介绍 Naive UI 的表单组件使用方法，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
