Vue.js: Element UI 与 Vuetify 比对 |
您所在的位置：网站首页 › vant和element的区别 › Vue.js: Element UI 与 Vuetify 比对 |
Vue.js: Element UI 与 Vuetify 比对
|
1、Element UI（目前版本：2.13.2）
ElementUI官网：Element - 网站快速成型工具 GitHub仓库：https://github.com/ElemeFE/element
正如官方介绍所说的，Element UI框架组件具有很强的“一致性”特征，默认情况下为浅蓝色风格配色，组件标签用“el-”开头，通常只需要组合添加几个组件就能生成比较不错的设计布局 export default { data () { return { radio1: '上海', radio2: '上海', radio3: '上海', radio4: '上海' }; } }
从整体上保持高度一致，很适合快速建站的小伙伴们，代码不多，只需要简单的设定属性以及绑定数据，配合上ElementUI的布局设计，前端实现网站还不分分钟的事情 ，代码实现相对之前辛苦的写样式的确是省事不少。 要说不方便的地方嘛。。。还的确有，某种程度上还有点不好解决，就是屏幕适应的问题。
正常的看这几个图还行，但把窗口大小调整后。。。emmm，有点不忍直视了
是吧，这缩放之后就有点尴尬的。所以开始尝试寻找一款能针对屏幕做适配的Vue框架（大佬可以自己适配，我就是个嫌麻烦的菜鸡~~） 2、Vuetify（目前版本：2.3.15）最新版本v2.3.15官网地址：Vuetify - A Material Design Framework for Vue,js 旧版v2.x官网地址： Vuetify - A Material Design Framework for Vue,js GitHub仓库：https://github.com/vuetifyjs/vuetify Vuetify 是 Vue.js 的头号组件库，自 2016 年以来一直在积极开发。该项目的目标是为用户提供使用 Material Design specification 构建丰富且引人入胜的 web 应用程序所需的一切。它通过一致的更新周期、对以前版本的长期支持 (LTS)、响应式社区参与、丰富的资源生态系统和对高质量组件的贡献来实现这一点。 一个尤雨溪大大推荐的框架，使用时的体会简直就是屏幕适配的最好框架（大概没有之一吧），放一个效果图看看就知道了：
这是模拟三种情况下的视图，分别是PC、平板与手机，三种窗口之间缩放可直接切换
官方制定了五种屏幕适配解决方案 { // Breakpoints xs: boolean sm: boolean md: boolean lg: boolean xl: boolean // Conditionals xsOnly: boolean smOnly: boolean smAndDown: boolean smAndUp: boolean mdOnly: boolean mdAndDown: boolean mdAndUp: boolean lgOnly: boolean lgAndDown: boolean lgAndUp: boolean xlOnly: boolean // true if screen width |
【本文地址】
今日新闻 |
推荐新闻 |