vue UI框架对比
对比维度的数据主要来源于各个框架的官网
element:morden browser and IE10+
element-plus: 官网没有提到兼容性;鉴于element-ui只是为vue3提供的组件库,而vue3目前不支持IE,所以可以理解element plus的浏览器兼容性和vue3一样:不支持IE
ant-design-vue1
ant-design-vue2
viewUI:大部分组件和功能支持 IE9 及以上浏览器,部分组件和功能不支持 IE
组件数量(手动在官网统计)
简单对比下三个框架的组件:
社区有多个(官网提供如下)
社区:官网提供的主要是作者的知乎专栏
Vue UI 了解一下
前端框架百花齐放、争奇斗艳,令人眼花缭乱。大神们一言不合就整一个框架出来,另小白们无所适从。下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀。
(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382)
(2)iview组件库 (Star:10186)
iView 主要服务于 PC 界面的中后台业务,很优秀的组件库,可惜不适合移动端
(3)vux 基于Vue和WeUI的移动UI组件 (Star:9762)
Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
(4)Mint-UI 饿了么移动端组件库 (Star:8062)
由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库
(5)vue-admin 管理面板UI框架 (Star:6289)
(6)vue-material为 Vue.js 打造的 Material 风格的组件 (Star:4550)
(7)vue-strap基于 Vue.js 的 Bootstrap 组件 (Star:4400)
(8)KeenUI 基于Material Design的UI (Star:3041)
(9)vonic (Star:2276)
(10)Radon-ui awe大神最近写的一套UI (Star:791)
(11)N3-components 基于N3ui (Star:781)
(12)vue-carbon (Star:739)
上文转自于
更多 vue 框架参考 应用-框架
优秀的 github demo 推荐
几款实用的VUE移动端UI框架
文档地址:
演示地址:
基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式(下拉刷新上拉加载组件不再维护,其余组件相对丰富)
文档地址:
演示地址:
一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约
文档地址:
演示地址:
滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库;组件效果优;视觉效果很棒
文档地址:
演示地址:
最接近原生APP体验的高性能前端框架
文档地址:
演示地址:
有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件
文档:
演示地址:
一套京东风格的轻量级移动端Vue组件库
特性
跨平台,自动转微信小程序组件(稍后上线,敬请期待)
30+ 京东移动端项目正在使用
基于京东APP 7.0 视觉规范
支持按需加载
详尽的文档和示例
支持定制主题
支持多语言(国际化)
支持 TypeScript
支持服务端渲染(Vue SSR)
单元测试加持
配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程
Vue项目 UI框架介绍(第六天上)
1.什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架
大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面
2.elementUI使用
3.elementUI优化
默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中
这样就导致了我们的项目体积比较大, 用户访问比较慢
4.如何优化
为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中
没有用到的组件不会被打包
1.什么是MintUI?
MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装,让我们能够专注于业务逻辑而不是UI界面
2.mintUI使用
3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用
1.什么是Vant?
在使用MintUI的过程中发现有很多的坑,所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面
Vue.use只能use插件,不能use组件
那么如何将一个组件封装成一个插件呢?
1.Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用
2.什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器
3.如果自定义一个插件?