1、Element UI（目前版本：2.13.2）

ElementUI官网：Element - 网站快速成型工具

GitHub仓库：https://github.com/ElemeFE/element

正如官方介绍所说的，Element UI框架组件具有很强的“一致性”特征，默认情况下为浅蓝色风格配色，组件标签用“el-”开头，通常只需要组合添加几个组件就能生成比较不错的设计布局

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio2" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled ></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" disabled size="mini">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
        return {
            radio1: '上海',        
            radio2: '上海',        
            radio3: '上海',        
            radio4: '上海'
      };
    }
  }</script>

从整体上保持高度一致，很适合快速建站的小伙伴们，代码不多，只需要简单的设定属性以及绑定数据，配合上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 < mobileBreakpoint
  mobile: boolean
  mobileBreakpoint: number

  // Current breakpoint name (e.g. 'md')
  name: string

  // Dimensions
  height: number
  width: number

  // Thresholds
  // Configurable through options
  {
    xs: number
    sm: number
    md: number
    lg: number
  }

  // Scrollbar
  scrollBarWidth: number}

使用实例如下，使用hidden-?-and-down类可以隐藏某类设备及其像素以下的组件

例如

桌面版AppBar：

<v-app-bar
    app
    class="hidden-sm-and-down "
    color="primary"
    dark
    elevate-on-scroll
    shrink-on-scroll
>
......
</v-app-bar>

手机版AppBar:

<v-app-bar
    app
    class="hidden-md-and-up"
    collapse-on-scroll
    color="primary"
    dark
    elevate-on-scroll
    extended
>
......
<v-app-bar>

3、总结

总得来说，两种都是非常优秀的框架，一种是饿了么团队开源的一款统一设计风格快速建站框架，一款是基于MaterialDesign设计理念的一款多分辨率显示适配的框架，两者都有其优势，且侧重点都不一样。ElementUI更侧重创建一组风格统一、高效且易于上手的理念，而Vuetify框架讲究多平台适配，与Google设计MaterialDesign设计风格搭配到一起，代码量会比Element稍微大一些，但对于自己做屏幕分辨率适配还是轻松不少。（啊，对了，最新的Vuetify框架还没有中文文档，这一点上自然比不上ElementUI这种本土框架，后期会慢慢适配的，近日想学习Vuetify框架，但英语水平也不是那么好的话，可以进入官网后点击下图红色划线部分进入旧版文档）