关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程教程 > JavaScript > 正文

大前端,这可能是最走心的Vue3组件库——Naive UI

guanshanw 2023-03-30 21:39 4456 浏览 109 评论

介绍

Naive UI是一个基于Typescript开发的针对Vue3开发的UI组件库,由TuSimple(图森未来)公司开发并开源,下面是组件文档针对Naive UI的一句话描述:

一个 Vue 3 组件库 比较完整,主题可调,使用 TypeScript,不算太慢 有点意思!

大前端,这可能是最走心的Vue3组件库——Naive UI

Naive UI的一些特点

  • 组件完整

组件库相对完整,有大约70个组件,能帮你节省不少时间。

它们全都可以 treeshaking。

  • 主题可调

它提供了一个使用 TypeScript 构建的先进的类型安全主题系统。只需要提供一个样式覆盖的对象,即可完成主题的配置。

不用 less、sass、css 变量,也不用 webpack 的 loaders。而且在文档右下角提供了即时的主题编辑器可以快速的构建自己的主题

  • 使用 TypeScript

Naive UI 全量使用 TypeScript 编写,和你的 TypeScript 项目无缝衔接。

不需要导入任何 CSS 就能让组件正常工作。

  • 性能优化

select、tree、transfer、table、cascader 都可以用虚拟列表。

  • 开源协议

基于MIT的开源协议

安装

naive-ui 仅支持 Vue3。如果你在使用 Vue2,可以去看看别的库。

npm i -D naive-ui
npm i -D vfonts

兼容性

  • 浏览器

不支持 IE 浏览器,懂得都懂

Edge、Firefox、Chrome、Safari 等现代浏览器的最新的 2 个版本确保会被支持。

  • Vue

只支持 Vue 3(>3.0.5)。

  • TypeScript

需要版本 > 4.1。

使用

  • 推荐用法(Tree Shaking

可以直接导入组件并使用它。这种情况下,只有导入的组件才会被打包。

<template>
  <n-button>naive-ui</n-button>
</template>

<script>
  import { NButton } from 'naive-ui'

  export default {
    components: {
      NButton
    }
  }
</script>

//如果你可以使用 setup script,你可以用下面的方式使用组件。

<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>

启用 JSX & TSX

关于启用 JSX 和 TSX,请参考你使用的工具链的相关文档。

  • 使用组件

在 JSX 中,推荐以直接引入的形式使用组件。

import { defineComponent } from 'vue'
import { NButton } from 'naive-ui'

export default defineComponent({
  render () {
    return <NButton>{{ default: () => 'Star Kirby' }}</NButton>
  }
})

包括的组件

通用组件 (19)
头像 Avatar
按钮 Button
卡片 Card
折叠面板 Collapse
分割线 Divider
下拉菜单 Dropdown
文本省略 Ellipsis
渐变文字 Gradient Text
图标 Icon
页头 PageHeader
标签 Tag
排印 Typography
数据录入组件 (19)
自动填充 Auto Complete
级联选择 Cascader
颜色选择器 Color Picker
复选框 Checkbox
日期选择器 Date Picker
动态录入 Dynamic Input
动态标签 Dynamic Tags
表单 Form
文本输入 Input
数字输入 Input Number
提及 Mention
单选 Radio
评分 Rate
选择器 Select
滑动选择 Slider
开关 Switch
时间选择器 Time Picker
穿梭框 Transfer
上传 Upload
数据展示组件 (14)
日历 Calendar
代码 Code
数据表格 Data Table
描述 Descriptions
无内容 Empty
图像 Image
列表 List
日志 Log
统计数据 Statistic
表格 Table
东西 Thing
时间 Time
时间线 Timeline
树 Tree
导航组件 (9)
固钉 Affix
侧边导航 Anchor
回到顶部 Back Top
面包屑 Breadcrumb
加载条 Loading Bar
菜单 Menu
分页 Pagination
步骤 Steps
标签页 Tabs
反馈组件 (15)
警告信息 Alert
标记 Badge
对话框 Dialog
抽屉 Drawer
信息 Message
模态框 Modal
通知 Notification
弹出确认 Popconfirm
弹出信息 Popover
弹出选择 Popselect
进度 Progress
结果页 Result
骨架屏 Skeleton
加载 Spin
弹出提示 Tooltip
布局组件 (3)
布局 Layout
栅格 Grid
间距 Space
配置组件 (3)
全局化配置 Config Provider
元素 Element
全局样式 Global Style

部分组件预览

由于组件比较多,以下只是截取部分截图,详细地使用和风格可以到官方文档查看


















总结

Naive UI是一个值得推荐使用的Vue组件库,从项目的走心程度来看,Naive UI绝不会是一个差劲的作品,相反它很优秀!文档中有一个叫做thing(东西)的组件很有意思,如下:


相关推荐

精品基于Uniapp+Springboot实现的Android的学习生活交流APP

《[含文档+PPT+源码等]精品基于Uniapp+Springboot实现的Android的学习生活交流APP[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等软...

精品spring boot+MySQL婚纱影楼管理系统vue

《springboot+MySQL婚纱影楼管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等使用技术:操作系统:Windows10、Windows7、Windows...

从病毒到“基础软件污染”,Linux 真的安全吗?

长久以来,Linux主机曾一直被认为是比Windows更安全的操作系统,已知病毒形势远没有Windows多样和严重。而近年随着云计算的兴起,Linux系统在云主机的高占比形成了联网主机的主要算力,自然...

PHP代码审计入门之路(渗透测试补全篇)

0x01前言虽然市面上的代码审计的文章已经一大把了,但是还是决定重复造轮子,打算作为一个系列来写的,近年越来越多的安全研究人员投入到php应用的漏洞挖掘,相对应的代码安全问题也被大量的暴露出来,身处...

为什么很多人学习PHP编程都喜欢自学成才?推荐几个php自学网站

PHP编程语言是目前编程语言中最热门的编程之一,PHP应用领域最多的是WEB开发,PHP和mysql结合可以做出完美的网站,目前大多WEB网站都会选择PHP开发,开源成本低,高效质量好。学习PHP编程...

uniapp整个diygw-ui-php(thinkphp)跨域访问调试

diygw-ui-php开源地址:https://gitee.com/diygw/diygw-ui-phpNGINX修改配置,增加了跨域https请求保存后导出源码PHP环境支持断点调试。关键配置如下...

精品springboot的二手车管理系统vue

《springboot的二手车管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等使用技术:操作系统:Windows10、Windows7、Windows8开发语言:...

新手小白如何部署服务器,让你的个人电脑成为网站服务器

近期有粉丝问到从服务器部署到网站上线的细节操作流程要怎么办,本文进行相关的说明,由于方法很多,文本着重以小白比较容易入手的方式来进行介绍,同时文末会对如何将自己的电脑变成服务器进行简单的说明,便于小白...

SQL注入小白入门,大佬请绕道

SQL注入小白入门,大佬请绕道什么是SQL结构化查询语言(StructuredQueryLanguage)简称SQLSQL使我们有能力访问数据库什么是SQL注入用户提交的数据可以当作命令被数据库解...

PHP开发环境安装配置:Win10+Docker+Laradock(上篇)

一、关于PHP开发环境的选择1、操作系统的选择?PHP运行环境从操作系统上来说肯定是Linux最好,在生产环境的服务器中都是使用Linux系统。但是Linux日常使用软件不够丰富,只...

yii2-adminlte-asset / yii2-admin 安装配置

1.承接上一篇,安装一个靓的模板(yii2-adminlte-asset)AdminLTE。以及一个user图形化管理界面(yii2-admin)2.首先安装yii2-adminlte-asset...

windows如何实现定时任务?配合脚本使用结局很满意

序言:作为一名程序员,通过定时任务去实现各种所需的功能是必须要掌握的,本文来讲解一下在windows服务器上如何创建定时任务。有需要的小伙伴赶紧收藏转发吧。第一步:打开控制面板-》系统和安全-》管理工...

助你学安全,使用docker快速搭建各大漏洞学习平台

今天给大家分享一个docker安装的漏洞平台批量安装,vulstudy是专门收集当下流行的漏洞学习平台,并将其制作成docker镜像,方便大家快速搭建环境,节省搭建时间,专注于的漏洞学习上。目前vul...

「 靶场环境篇 」 phpstudy 集成环境安装教程(特别详细)

前言最近整理了一些奇安信&华为&深信服大佬的课件资料+大厂面试课题,想要的可以私信自取,无偿赠送给粉丝朋友~想入门渗透行业呢光有理论基础是不够的,更重要的是实践经验。我想着分享一些入门级靶场,从环境搭...

手把手教会你做音乐“网站”(二)

上一节的内容,归纳起来就是:下载软件,安装,启动。为了能让小白看明白,写了很多文字,但愿没把你看糊涂了。这一节我力求简单描述。请私信我,发03272,自动获取音乐网站源码。这是一个压缩包music...

已有109位网友发表了看法:

  • 黑客自学技术

    黑客自学技术  评论于 [2023-05-31 15:03:31]  回复

    naive ui的气泡组件 popconfirm 不能全局挂载吗

  • 编程导航站

    编程导航站  评论于 [2023-06-05 16:48:07]  回复

    vue3中使用naive ui的table设置表头颜色

  • 编程导航站

    编程导航站  评论于 [2023-06-06 13:11:01]  回复

    naiveui的tooltip控制信息的弹出位置

  • 编程导航站

    编程导航站  评论于 [2023-06-11 21:44:22]  回复

    naiveui组件中menu菜单怎么在里面自定义样式

  • 编程导航站

    编程导航站  评论于 [2023-06-14 15:18:25]  回复

    Naive UI中的select如何在option上面添加图片

  • 编程导航站

    编程导航站  评论于 [2023-06-18 17:15:44]  回复

    naive ui drawer根据内容自动撑高高度

  • 编程导航站

    编程导航站  评论于 [2023-06-22 16:59:32]  回复

    naive ui 得选择器 选中的时候传选中的值

  • nginx

    nginx  评论于 [2023-07-23 14:00:57]  回复

    naive-ui有什么特点

取消回复欢迎 发表评论: