文章目录
前言安装naive-ui 组件安装 naive 字体全局引入naive的两种方式引入字体文件组件中使用naive-ui组件库调整主题色和主题变量
前言
2021年6月7日 尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。
Naive UI 是一个基于 Vue 3 的开源 UI 组件库，它提供了一组丰富的UI组件，用于构建现代、美观、易用的Web应用程序。这个组件库专注于性能、可访问性、易用性和可定制性，使开发者能够轻松地创建高质量的用户界面。
以下是一些 Naive UI 的主要特点和亮点：
Vue 3 原生支持：Naive UI 是专为 Vue 3 开发的，充分利用 Vue 3 的 Composition API 和响应性系统。
丰富的组件：它提供了大量的UI组件，包括按钮、输入框、表格、对话框、菜单、标签页、图标等等，涵盖了构建Web应用所需的各种元素。
性能优化：Naive UI 使用虚拟滚动和其他性能优化技术，确保在处理大型数据集时也能保持高性能。
可访问性：这个组件库注重可访问性，它的组件都经过设计和测试，以确保符合Web内容无障碍指南（WCAG）要求。
易用性：Naive UI 的API和文档非常易于理解和使用，使开发人员能够快速上手。
定制主题：它支持主题定制，你可以轻松更改组件的外观以适应你的项目风格。
国际化支持：提供了多语言支持，可以轻松本地化应用程序。
活跃的社区：Naive UI 有一个活跃的开发和用户社区，提供了许多示例、文档和支持。
Naive UI 是一个强大的工具，可用于构建各种类型的Web应用程序，包括管理面板、数据仪表板、电子商务网站等等。如果你使用Vue 3，并正在寻找一个功能丰富、高性能、可访问和易用的UI组件库，Naive UI 可能是一个不错的选择。
naive ui 组件库官网 https://www.naiveui.com/zh-CN/os-theme
安装naive-ui 组件
npm i -D naive-ui
或
yarn add naive-ui
安装 naive 字体
npm i -D vfonts
或
yarn add vfonts
全局引入naive的两种方式
全局安装（不推荐） 失去 tree-shaking 的能力，打包有冗余代码。
import { createApp } from 'vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)
按需全局安装
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
我的项目是这样按需全局安装的
修改项目根目录src文件下的main.ts 因为我在项目中使用了router 和 store
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import { create, NButton } from 'naive-ui'
const naive = create({
components: [NButton]
})
createApp(App)
.use(store)
.use(router)
.use(naive)
.mount('#app')
引入字体文件
只需要在你 App 的入口文件导入字体，即可调整 Naive UI 的字体。
// 你 App 的入口 js 文件
// ...
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
const app = createApp()
app.use(naive)
组件中使用naive-ui组件库
由于我在全局main.ts引入Nbutton了，所以在组件中无需再引入，直接使用。
当然也可以在组件中单独引入
调整主题色和主题变量
官网有很清晰的介绍 https://www.naiveui.com/zh-CN/os-theme/docs/customize-theme
在App.vue进行配置主题变量和主题色
最终的效果
naive 官网给了很多变量可以配置
https://www.naiveui.com/zh-CN/os-theme/docs/theme
官网有更多的组件，大家可以一起来体验
https://www.naiveui.com/zh-CN/os-theme/components/button