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
更多学习
更多实时资讯,前沿技术,生活趣事。尽在【老马啸西风】
交流社群:[交流群信息](https://mp.weixin.qq.com/s/rkSvXxiiLGjl3S-ZOZCr0Q)