精华内容
下载资源
问答
  • vue2的时代,PC端的ui框架可以说elementUI独步天下,至少我在面试及工作过程中遇到的都是使用elementUI的,但是该开源项目随着核心成员的离职,更新进度似乎越来越缓慢,似乎印证了那句“开源工作一旦功成身退,...

    在vue2的时代,PC端的ui框架可以说elementUI独步天下,至少我在面试及工作过程中遇到的都是使用elementUI的,但是该开源项目随着核心成员的离职,更新进度似乎越来越缓慢,似乎印证了那句“开源工作一旦功成身退,再也没有动力和精力去持续维护下去”的言论了。

    随着vue3的时代的到来,未来前端框架翻云覆雨,走势如何还不知道,但是各大UI框架已经开始卯足了劲开发适配vue3的版本,这其中当属的便是阿里系的蚂蚁金服提供的Ant Design了,据说已经完成了70%的工作。

    由此产生了横向总结一下各个UI框架的想法,主要挑选世面上比较火热的几款,持续修改补充。

    Element  /  Ant Design of Vue  /  Vuetify  /  iView

     

    Element —— 网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

    element无疑是近年来国内最成功的开源项目之一了,其扁平化的UI风格已经逐渐深入国内前端开发者的心中,逐渐被这种蓝色调的审美熏陶,可能会认为这才是规范的交互方式。相信绝大多数前端开发者对其功能已了然于胸,目前最大的问题就是已经停止更新了,代码仓库中业务代码的最近一次更新还是5个月前的事情了,issues中提了大量的问题也得不到及时的响应,vue3的时代,不知其何去何从。

    Ant Design of Vue —— 开发和服务于企业级中后台产品

    从antd的目标:开发和服务于企业级中后台产品,可以看出,antd追求的就是快速、标准,而且更是推崇自己的一套设计语言,用来规范项目的视觉效果。

    目前ant design of vue的vue3版本已经出了测试版,Ant Design of Vue 2.0.0 (测试版),未来可期!

    亮点:

    • Space 间距组件:可以控制<a-space>标签内的元素相同的间距
    • Mentions 提及:相当于微信群的@,快速选中@某人
    • TreeSelect 树选择:这个功能挺适用于我们项目中选取树状结构的部门的,我们是通过element弹窗实现的,操作不够轻量
    • skeleton 骨架屏:预加载文档结构
    • 表格头部可配置筛选按钮用于过滤数据
    • 表格可设置行编辑和单元格编辑 

    Vuetify —— Material Design Framework

    相较于前两个ui框架,Vuetify是Material Design风格的,交互行为很丰富,MD是微软前几年推出的一种页面布局交互设计规范,这种风格的产品简洁、鲜明、高效,适用于移动端及PC端,在国外很受欢迎,国内还是因为受element的iOS扁平风格影响较多,并且其纯英文的文档,可能也会阻挡一大部分国内的开发者。

    亮点: 

    • 包括颜色、阴影大小、大小在内的丰富的可配置项
    <v-btn x-small color="secondary" dark elevation="15"> Extra small Button </v-btn>
    • Chips:类似于tag标签,可以插入图标和事件

    • 输入框交互很自然,获取焦点后,提示信息过渡到左上角

    • Windows:适用于全屏翻页的效果
    • Parallax:页面滚动引起背景图片偏移,早些年apple官网常用的手段
    • Skeleton-loaders:带加载动效的骨架屏
    • Sparkline:简单的折线图展示

    iView —— 一套基于 Vue.js 的高质量 UI 组件库

    iView 是一套开源免费的 UI 组件库,但同时也可能是目前国内变现能力最好的UI库项目,iView免费提供一套基础的组件,除此之外,还提供包括 View UI Pro 和 Admin Pro 在内的多种收费产品,收费产品基本都是基于 iView 开发的一些拥有更完善的功能的组件,其中Admin Pro更是一个拥有鉴权、路由系统的完整的vue架构项目,省去了很多项目初始化工作。不过目前来看,适配也仅仅适配到vue2阶段,作为一个商业项目,其后面的发展可能就完全取决于市场的接受度了。

    亮点:

    • Cell 单元格:一种布局方式,用于固定的菜单列表
    • LoadingBar 加载进度条:类似于 NProgress 插件
    • 表格动态列配置,并且可以直接给行数据上添加一个className,用来控制样式
    columns9: [
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age',
                            className: 'demo-table-info-column'
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        }
                    ]
    • 表格头部可配置筛选按钮用于过滤数据
    • 表格可以开启右键菜单功能快捷操作
    • 表格本地导出为 csv 格式的文件
    • Time 相对时间:相当月一个时间过滤器,但是有一个倒计时挺好用的,不用自己写setInterval了
    • Circle 进度环:可用于简单地展示统计数据
    展开全文
  • Vue常用Ui框架App端和Web端

    千次阅读 2019-08-16 17:08:22
    Vue常用UI框架,包含Web端和App端

    Vue常用框架总结

    1.Web端框架

    1. D2 Admin官网
    2. Vue-element-Admin官网
    @掘金手把手撸后台系列教程
    @潘嘉晨博客
    @简书博客
    3. VueAdmin
    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统
    @简书博客
    @码云博客
    @fly前端网博客

    2. App端

    1. Muse-UI
    2.Vue Material
    3.VUE YDUI
    适配于Vue2.x版本的移动端UI,有TabBar导航,商品展示卡片,表单验证,倒计时,数字动画,公告栏,模态框等各种组件十分丰富。
    4. VantUI 是Vue配套UI
    还包含商城小程序的业务组件,例如省市区选择、商品卡片、商品导航,有赞团队维护。
    5.Iview Webapp
    与Iview风格类似,不过这个是专门的微信小程序端的配套UI
    6 ColorUI
    高亮度饱和色彩UI库,可以当作CSS库,它不包含拿取数据处理业务组件,但是样式十分丰富,官方文档未发布,可以直接下载所有代码本地查看,开箱即用。

    3.电梯

    @ Weex
    Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持
    @ Vue相关组件UI地址集合

    展开全文
  • Vue常用UI框架

    千次阅读 2018-04-28 14:35:36
  • 2020年最常用vueUI框架

    千次阅读 2020-09-07 12:57:09
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...

    在做vue项目开发的时候遇到了一个问题,如何选择自己的技术栈?随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。

    1:饿了么ElementUI

    推荐指数:star:45.2k
    适用:PC端

    官网地址:http://element-cn.eleme.io/#/zh-CN
    GitHub地址:https://github.com/ElemeFE/element

    介绍:
    element-ui中规中矩,上手挺快,大多数vue开发应该都是选择element,因为社区做的比较完整,不懂的可以在网上找到很多解答,PC端开发,请选择ElementUI,是真的好用!各种组件功能考虑的很周到且便于扩展。最重要的一点,引入方便!可以快速成型,对后端工程师比较友好。

     
     

    2:vuetify

    推荐指数:star:25.4k
    适用:移动PC多端支持

    GitHub地址:https://github.com/vuetifyjs/vuetify
    官网地址:https://vuetifyjs.com/zh-Hans/

    Vuetify确实是一款非常精致的UI框架,它提供了很多常用的组件,依靠Material Design的设计优势,让你无需编写一行css代码就可以得到非常美观的界面功能。响应式做的不错,移动PC多端支持,配置灵活,组件也挺多的,足够现代,功能全面vuetify,一直用一直爽,强烈推荐vuetify。

     
     

    3:iView

    推荐指数:star:23.2k
    适用:PC 界面的中后台产品。

    官网地址:http://v1.iviewui.com/
    GitHub地址:https://github.com/iview/iview

    描述:iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。功能丰富,友好的 API ,自由灵活地使用空间细致、漂亮的 UI,最主要的是文档特别详细,强烈安利哟~

     

     
     

    4:vux

    推荐指数:star:17k
    适用:移动端
    官网地址:https://vux.li/
    GitHub地址:https://github.com/airyland/vux

    介绍:VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。

     
    图片.png

    5:mintui

    星星指数:star:15.7k
    适用:移动端

    官网地址:http://mint-ui.github.io/#!/zh-cn
    GitHub地址:https://github.com/ElemeFE/mint-ui

    mintui两三年没更新了。个人感觉还是不用吧,因为星星有15.7k,就先记录一下

     
     

    6:有赞vant

    推荐指数:star:13.7k
    适用:移动端

    网站地址:https://youzan.github.io/vant
    GitHub地址::https://github.com/youzan/vant

    Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

     
     

    7: ant-design-vue

    推荐指数:star:10.3k
    适用:PC端

    文档地址:https://antdv.com/docs/vue/getting-started-cn/
    GitHub地址:https://github.com/vueComponent/ant-design-vue
    介绍:
    一个网友维护的ant design vue版本, 致力于提供给程序员愉悦的开发体验。

     
     

    8:滴滴cube-ui

    推荐指数:star:8k
    适用:移动端
    网站地址:https://didi.github.io/cube-ui/
    GitHub:https://github.com/didi/cube-ui
    介绍:基于 Vue.js 实现的精致移动端组件库

     
     

    以上仅代表个人观点,还有没总结到的vue的UI框架框架,大家可以在评论区留言补充哦。

    展开全文
  • UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美...
  • 前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,项目工期比较紧,页面要美观好看,如果自己封装组件的话用时比较长,使用第三方框架成了不错的选择,在这里我总结了一下常用vue UI框架,希望对大家...
  • vue 移动端常用ui框架

    千次阅读 2019-07-31 15:53:07
    1.mint-ui https://mint-ui.github.io/#!/zh-cn 2.muse-ui https://muse-ui.org/#/zh-CN/transitions 3.vonic-ui https://wangdahoo.github.io/vonic/docs/#/ 4.vux-ui https://vux.li/demos/v2/#/demo 5.vu...
  • 自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择。1.Vux中文文档:...
  • 常见VueUI框架

    2021-10-27 16:09:47
    1.1 移动端常用UI组件库 VantVant - Mobile UI Components built on Vue Cube UIcube-ui Document Mint UIhttp://mint-ui.github.io nut UINutUI - 移动端 Vue2、Vue3 组件库 1.2 PC常用UI组件...
  • VUE主流UI框架

    2020-11-06 10:10:04
    以下主要介绍三个框架,分别是Element-UI,Bootstrap-Vue,Vuetify。 Element-UI https://element.eleme.io/ https://github.com/ElemeFE/element 国内人用的较多。 但是,近两年迭代频率越来越低了,有图为证。 ...
  • 基于Vue前端UI框架比较 Vue3相对于vue2的优缺点 优点: 性能提升,主要体现在打包体积(减少了40%左右),渲染速度(快了55%),更新速度(100%)及内存使用(减少了50%)几方面。 由于增加了composition api,...
  • Vue常用UI框架-elementUI和vant的对比

    万次阅读 2020-03-04 15:09:13
    一、vant 1、引入与使用 直接通过 CDN 引入到html页面中 <!-- 引入样式文件 --> <link rel="stylesheet" href=...-- 引入 Vue 和 Vant 的 JS 文件 --> <script src...
  • vue项目常用ui框架

    千次阅读 2019-09-16 09:44:18
    基于vue的移动端UI框架 1.vonic >>>>>>>>>基于 vue.js 和 ionic 样式的 UI 框架 2.vux >>>>>>>>>基于WeUI和Vue(2.x)开发的移动端UI组件库 3.Mint UI >>...
  • Vue移动端UI框架

    2019-09-26 20:01:55
    自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择。 1.Vux 中文文档:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,636
精华内容 4,654
关键字:

vue常用ui框架

vue 订阅