Naive Ui
特性
比较完整
有超过 90 个组件，希望能帮你少写点代码。
顺便一提，它们全都可以 treeshaking。
主题可调
我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。
顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。
使用 TypeScript
Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。
顺便一提，你不需要导入任何 CSS 就能让组件正常工作。
快
我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。
顺便一提，…，没有顺便了。祝你使用愉快。
安装
npm
使用 npm 安装。
npm i -D naive-ui
字体
npm i -D vfonts
图标
naive-ui 建议使用 xicons 作为图标库。
设计资源
入门测试
vue3
> npm init vue@latest
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称： ... my-vue-app
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 D:\code\front\my-vue-app...
项目初始化完成，可执行以下命令：
cd my-vue-app
npm install
npm run dev
安装特别慢的问题
设置：
npm config set registry https://registry.npmmirror.com
确认：
npm config get registry
naive-ui 入门
-
安装：通过 npm 或 yarn 安装 Naive UI。
npm install naive-ui --save
会自动在 package.json 中添加：
"dependencies": {
"naive-ui": "^2.39.0",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
- 引入 Naive UI：在你的 Vue 3 项目中引入 Naive UI，并全局注册所需的组件。
调整 main.ts 如下：
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import NaiveUi from 'naive-ui';
import 'naive-ui/dist/style.css';
const app = createApp(App)
app.use(router)
app.use(NaiveUi);
app.mount('#app')
-
使用组件：在 Vue 组件中使用 Naive UI 提供的标签来引入 UI 组件。
<template> <n-button>Click Me</n-button> </template>
入门代码
chat
详细介绍一下 naive ui
Naive UI 是一个流行的 Vue 3 组件库，它提供了一套风格一致、功能丰富的 UI 组件，用于构建高质量的 web 用户界面。Naive UI 以其易用性、性能和美观的设计受到开发者的喜爱。
以下是 Naive UI 的一些核心特性：
-
基于 Vue 3：Naive UI 专为 Vue 3 设计，充分利用了 Vue 3 的新特性和性能优势。
-
响应式设计：Naive UI 的组件是响应式的，能够根据屏幕大小自动调整布局。
-
自定义主题：Naive UI 允许开发者自定义组件的主题，包括颜色、字体和其他样式，以适应不同的设计需求。
-
类型安全：Naive UI 与 TypeScript 兼容，提供了类型定义文件，使得开发者可以享受到类型检查带来的优势。
-
无依赖：Naive UI 不依赖于任何其他 UI 库或框架，只依赖 Vue 3。
-
丰富的组件：提供了一套全面的组件，包括按钮、输入框、选择器、对话框、布局工具等。
-
可访问性：Naive UI 的组件考虑了可访问性，支持键盘操作和辅助技术。
-
国际化支持：Naive UI 的组件支持国际化，可以根据不同的语言环境显示相应的文本。
-
文档和社区：Naive UI 有详细的文档和活跃的社区，为开发者提供了丰富的学习资源和问题解答。
-
遵循设计规范：Naive UI 的组件设计遵循了常见的设计规范，易于集成到各种设计系统中。
-
可扩展性：Naive UI 的组件设计考虑了可扩展性，允许开发者根据需要进行扩展和定制。
使用 Naive UI 的基本步骤通常包括：
-
安装：通过 npm 或 yarn 安装 Naive UI。
npm install naive-ui --save -
引入 Naive UI：在你的 Vue 3 项目中引入 Naive UI，并全局注册所需的组件。
import { createApp } from 'vue'; import NaiveUi from 'naive-ui'; import 'naive-ui/dist/style.css'; const app = createApp(); app.use(NaiveUi); app.mount('#app'); -
使用组件：在 Vue 组件中使用 Naive UI 提供的标签来引入 UI 组件。
<template> <n-button>Click Me</n-button> </template> -
自定义主题：如果需要自定义主题，可以创建一个主题文件并按需修改样式。
-
构建和预览：构建你的 Vue 应用并在浏览器中预览，查看 Naive UI 组件的效果。
Naive UI 是构建现代 Vue 3 应用的优秀选择，它提供了高性能和高质量的 UI 组件，帮助开发者快速构建用户界面。
参考资料
https://www.naiveui.com/zh-CN/light/docs/introduction
