前端随心记---------vuejs流行的UI框架

一：Element

　　element ui框架的按钮组件，这款由饿了么前端开源的UI框架，一经面世，就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者，却没用过element UI，那你肯定不是合格的vue开发者。

　　文档地址：http://element-ui.cn

二：iview

　　iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间，由TalkingData开发维护，有很多知名互联网企业都在使用。

　　官网地址：https://www.iviewui.com/

三：vuetify

　　Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件，其中包含一个易于记忆的语义设计，它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 7K 的 star。

　　官网地址：https://vuetifyjs.com/zh-Hans/

四：vue-strap

　　基于 Vue.js 的 Bootstrap 组件 该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件，唯一需要依赖的是: Vue.js Bootstrap CSS ，VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。

　　官网地址：http://yuche.github.io/vue-strap/

五：cube-ui

　　

　　cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

　　官网地址：https://didi.github.io/cube-ui/#/zh-CN/example

六：buefy

　　Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件。虽然组件选择有限，但是值得你去尝试。

　　官网地址：https://buefy.org/#/

七：vue-beauty

　　

　　基于 ant design 的漂亮的 vue 组件库；vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库，旨在帮助开发者提升产品体验和开发效率、降低维护成本。

　　官网地址：https://fe-driver.github.io/vue-beauty/#/components/button

八：at-ui

　　AT-UI 是一个模块化的前端 UI 框架，开发基于Vue.js 的快速和强大的 Web 界面。专门为桌面应用程序构建，AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。全英文的文档对用户来说可能是具有有挑战性的，但它提供了一个体面的干净整洁的 UI 组件。

　　官网地址：https://at-ui.github.io/at-ui/#/zh

九：Vue-Blu

　　Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。全面、灵活且强大的ui组件，API友好。

　　官网地址： https://chenz24.github.io/vue-blu/#/

原文地址：https://www.cnblogs.com/hudunyu/p/11667045.html

时间： 2024-08-02 08:41:51

前端随心记---------vuejs流行的UI框架的相关文章

前端随心记---------vuejs基础学习2.2

过滤器 filter过滤器,说白了就是一个函数. 在vuejs1.版本里面存在很多过滤器,在vuejs2.版本里面被移除 存在两种方式定义过滤器   : 1.全局     2.局部 全局: Vue.filter('filterName1', function(input, ...ret){ return ; }); Vue.filter('filterName2', function(input, ...ret){ return ; }); 局部: new Vue({ el: '', filte

前端随心记---------vuejs基础学习3.0

watch ch 和cpmpute的区别: 1.watch 表示监听某个模型变量的状态变化.watch监视的东西多一些,computed所依赖的东西都写在一个函数里. 2.特殊场景:如果业务出现了异步操作(回调函数)则这个时候computed是存在返回值,不能在使用,但是watch里面的没有返回值的概念,可以进行异步代码的调用. 小案例代码: <script type="text/javascript"> var vm = new Vue({ el: '#box', dat

前端随心记---------React简介（1）

React 简介: React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React诞生的原因 主要是当时市面上的这些框架都无法满足 facebook 公司的业务需求 (1. 数据量很大,数据不好管理

前端随心记---------vue3.0终于来了，作者已公布源码

Vue3.0 何去何从? 就在国庆的第五天,10月5日凌晨,web前端开发框架Vuejs的作者:尤雨溪在微博宣布Vue3.0版本终于要面正式推出了!  其实,在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划.方向进行了详细阐述. 1.更快 Virtual DOM 完全重写,mounting & patching 提速 100% : 更多编译时(compile-time

前端随心记（一）

前端 基础易错题(一) 案例一::介绍js原型链继承原理,以及prototype和--proto--的区别! 1.任何一个构造函数都有一个属性prototype叫做构造函数的原型,是一个对象,并且该对象默认情况下指向Object实例,constructor指向当前构造函数,--proto--指向Object.protopyte. 2.使用构造函数实例化的对象存在一个--proto--属性,指向当前构造函数的prototype. 3.当我们调用实例对象的属性和方法时,先在自身上面进行查找[自己身上

前端随心记---------深拷贝与浅拷贝

深拷贝与浅拷贝 在前端js里面的数据类型分为两大类: 1.基本数据类型(数据传递:值拷贝) var a = 12; var b = a; // 赋值操作,是把 a 地址里面对应的值赋值给了 变量b 所对应的地址空间. b = 24; a; // 不会受到影响 数据传递:值拷贝 2.复合数据类型(引用数据类型) var obj = {id: 1, username: 'andy', todos: ['吃饭', '睡觉']}; // 复合数据类型 var xiaoming = obj; // 复合数

前端随心记---------简单.可扩展的状态管理工具MobX

Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. MobX: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展.Mobx 就是一个集中化管理数据的库,类似之前学习的 vuex 和 redux. 为什么要使用它呢? 在单页项目中,实现组

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.

前端随心记---------webpack管理工具

webpack: 官网:https://www.webpackjs.com/ 由来: 1.开发的时候,我们写的代码是有注释,有空格(文件比较大)在开发环境中注释有意义的,但是在生产环境中,注释是没有意义的.代码应该是尽可能压缩的足够小(网络请求)如果我们没有借助一些其他工具的时候,我们需要手工的把 xxx.js 转换 xxx.mini.js 文件.(文件美化) 2.我们的js在发展的过程中,出现很多的新特性,例如 es6 箭头函数.class 语法糖,Promise等.这些新的特性在不做处理的时