Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue

最新推荐文章于 2024-03-24 12:47:58 发布
最新推荐文章于 2024-03-24 12:47:58 发布
阅读量9.7k 收藏 16
点赞数 2
文章标签： vue.js ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39497186/article/details/127276926
版权

对比图

\Element PlusNaive uiAnt Design Vue
简介element-ui Vue3版本，国内使用广泛Vue作者推荐的Vue3ui 组件库阿里Ant Design设计规范的Vue实现版
地址https://github.com/element-plus/element-plushttps://github.com/tusen-ai/naive-uihttps://github.com/vueComponent/ant-design-vue
社区活跃度高中高
ui库组件主要实现方式单文件Vuetsxtsx
缺点在一些组件需要自定义渲染时，无法使用slot，只能使用h函数
典型例子，当使用表格组件时，经常需要对后台返回的某一列的数据做自定义渲染，
此时在.vue单文件中只能通过h函数来进行自定义渲染，
当有些操作列，有多个按钮动态显示时，将很不方便，通过jsx的使用方式才会方便一些
开源脚手架https://github.com/lin-xin/vue-manage-system
https://github.com/chuzhixin/vue-admin-better
https://github.com/xiaoxian521/vue-pure-admin
https://github.com/HalseySpicy/Geeker-Admin		https://github.com/jekip/naive-ui-adminhttps://github.com/vbenjs/vue-vben-admin
https://github.com/jeecgboot/jeecgboot-vue3
傲慢二锅头
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库
07-17
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库。具有Fast Reliable Responsive Intuitive Smart 五大特性。Fast : Farris Vue 是一套具有急速用户体验的 UI 套件，Farris Data Grid 在渲染大量数据时具有...
Ant-design-vue 对比Element-plus的优缺点及不同之处
qq_43225508的博客
06-20 4148
Ant-design-vue 对比Element-plus的优缺点
vue3-ui:基于Vue3+TypeScript的UI组件库
04-23
Cloud UI for Vue 3 官方文档 运行步骤 运行 yarn 运行 yarn dev 打开 官网打包步骤 运行 yarn 运行 yarn build 得到的 dist 目录就是官网源代码 编辑并运行 sh deploy.sh 就可以上传到 Github 或码云等支持 Pages 功能的平台 库文件打包步骤 运行 rollup -c 得到的 dist/lib 目录就是编译后的库文件所在目录
Naive UI：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思。
chenchuang0128的博客
03-24 1143
在当今的前端开发领域，Vue 3已成为中后台应用的首选框架。为了满足开发者的需求，各种组件库如雨后春笋般涌现。其中，Naive UI以其独特的优势，成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。一、Naive UI的特性组件丰富：Naive UI提供了超过80个组件，覆盖了表格、表单、弹窗、图表等多个方面。这些组件不仅功能强大，而且高度可定制化，满足了各种业务需求。主题可调：Naive UI提供了一个先进的类型安全主题系统。
Vue3最佳实践 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
zhtbs的博客
09-07 1174
现在常用的前台UI 分别是以下几种，我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。
四款VueUi比较
weixin_43138214的博客
11-19 1201
1：饿了么ElementUI 推荐指数：star:45.2k 适用：PC端 开发快，有成型的api，组件比较丰富，icon数量较少，对外开放友好，推荐人数多问题搜索快，有少许bug，代码数量相对较多 2：vuetify 推荐指数：star:25.4k 适用：移动PC多端支持 页面展示样式精美，倾向于vue.js，国外开发文档，阅读较麻烦，更倾向于手机端 3：iView 推荐指数：star:23.2k 适用：PC 界面的中后台产品 页面比较简洁，更倾向于后台管理界面，icon数量多，组件相对丰富，开发团队较小
vue大数据表格解决方案的比较
热门推荐
草率小猿的博客
02-17 1万+
关于大数据表格的比较，包含了Ant Design、Surley Vue、vxe-table、Ag Grid等框架。
基于 Ant Design 和 Vue 3 的企业级 UI 组件
05-01
基于 Ant Design 和 Vue 3 的企业级 UI 组件。提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 Vue 组件。共享 Ant Design of React 设计工具体系。支持环境。现代浏览器。1.x 版本支持 IE 9+（需要 polyfills）支持服务端渲染。Electron。支持 Vue 2 和 Vue 3
Vue3的几款UI组件库：Naive UI、Element Plus、 Ant Design Vue、Arco Design
u011791126的博客
11-24 2095
vue3系列的三款ui框架简要对比： 框架 Element Plus Naive ui Ant Design Vue Arco Design 简介 element-ui Vue3版本，国内使用广泛 Vue作者推荐的Vue3ui 组件库 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现 社区活跃度 高 中 高 中 组件库主要实现方式 单文件Vue 单文件Vue 单文件Vue
ant-design-vue、element框架选型对比
monkey's的博客
08-25 9016
ant-design-vueelement文档https://www.antdv.com/docs/vue/introduce-cn/https://element.eleme.cn团队蚂蚁金服饿了么简介开发和服务于企业级后台产品 基于vue的桌面端组件库githubhttps://github.com/vueComponent/ant-design-vuehttps://github.com/ElemeFE/element最新版本V2.2.6V2.15.5第一版本2018-04-20(V0.4.0)201
Vue3学习笔记之Vue3全局注册element-plus和native-ui
weixin_46006743的博客
10-28 322
Vue3学习笔记之Vue3全局注册element-plus和native-ui
vue-i18n国际化多语言与多套UI组件库使用（Element Plus、Ant Design Vue、Naive UI）
Cxiaomu的博客
08-08 2060
Vue3+TypeScript+Vite+SCSS+（Element Plus、Ant Design Vue、Naive UI） 因调研需要，需在同一个项目中集成好几种UI组件库的多语言实现，查看各种组件库的表现情况，以便选定组件库。 注意：这只在调研过程中会如此，实际开发项目中极少存在一个项目中集成多个UI组件库的情况。 本demo实际试验阿拉伯语、法语、葡萄牙语、英语、中文五种语言。
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
元素黛咪 一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 // vue2.x + element-ui npm i element-demi element-ui # or yarn add element-demi element-ui // vue3.x + element-plus npm i element-demi element-plus # or yarn add element-demi element-plus :top_hat: 用法 Vue2 import Vue from 'vue' import ElementUI from 'element-demi' Vue . use ( Elemen
基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip
05-26
基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip
naive-ui-vite-ssr:naive-ui vite ssr 的一个例子
08-03
Naive UI Vite SSR npm run dev
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
Ant Design Vue：一个基于Ant Design和Vue的企业级UI组件库
基于Vue和Element UI的聊天室组件库设计源码
最新发布
04-12
本项目基于Vue和Element UI开发，包含336个文件，包括GIF动画、JavaScript脚本、PNG图片、Vue...系统实现了基于Vue和Element UI的聊天室组件库，界面模仿了TIM及微信。在提供基础封装的同时，最大程度的增加扩展性。
基于Vue的图鸟UI组件库设计源码
04-06
本项目是一个基于Vue语言开发的图鸟UI组件库，包含296个文件，主要文件类型包括Vue组件、JavaScript脚本、SCSS样式表、图片、微信小程序的wxs脚本、JSON配置文件、Markdown文档、HTML页面和PNG图片。系统设计旨在为...
使用vue3+element-ui plus 快速构建后台管理模板
10-17
使用vue3+element-ui plus 快速构建后台管理模板
HBuilder如何引入Element Plus UI 组件库到Vue3文件
06-07
可以按照以下步骤引入Element Plus UI组件库到Vue3文件中： 1. 在HBuilder中创建一个Vue3项目。 2. 打开终端，使用npm安装Element Plus UI组件库。命令如下： ``` npm install element-plus --save ``` 3. 在Vue3项目的main.js文件中引入Element Plus UI组件库和样式文件。代码如下： ``` import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 4. 在Vue3组件中使用Element Plus UI组件。例如，在HelloWorld.vue组件中使用ElButton组件，代码如下： ``` <template> <div> <el-button>按钮</el-button> </div> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton } } </script> ``` 这样就可以在Vue3项目中使用Element Plus UI组件库了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值