2.Vuetify框架

2.1.为什么要学习UI框架

Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:

  • BootStrap
  • LayUI
  • EasyUI
  • ZUI

然而这些UI组件的基因天生与Vue不合,因为他们更多的是利用DOM操作,借助于jQuery实现,而不是MVVM的思想。

而目前与Vue吻合的UI框架也非常的多,国内比较知名的如:

  • element-ui:饿了么出品
  • i-view:某公司出品

然而我们都不用,我们今天推荐的是一款国外的框架:Vuetify

官方网站:https://vuetifyjs.com/zh-Hans/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HnmFopnH-1577937379826)(assets/1525960652724.png)]

2.2.为什么是Vuetify

有中国的为什么还要用外国的?原因如下:

  • Vuetify几乎不需要任何CSS代码,而element-ui许多布局样式需要我们来编写
  • Vuetify从底层构建起来的语义化组件。简单易学,容易记住。
  • Vuetify基于Material Design(谷歌推出的多平台设计规范),更加美观,动画效果酷炫,且风格统一

这是官网的说明:

在这里插入图片描述

缺陷:

  • 目前官网虽然有中文文档,但因为翻译问题,几乎不太能看。

2.3.怎么用?

基于官方网站的文档进行学习:
在这里插入图片描述

我们重点关注UI components即可,里面有大量的UI组件,我们要用的时候再查看,不用现在学习,先看下有什么:

在这里插入图片描述

在这里插入图片描述

以后用到什么组件,就来查询即可。

Logo

前往低代码交流专区

更多推荐