vuetify(UI框架)

Vue负责视图的渲染(模型和视图双向绑定),UI框架提供样式(外观显示)

与Vue吻合的UI框架比较知名的:

  1. element-ui:饿了么出品
  2. i-view:某公司出品
  3. 推荐的是一款国外的框架:Vuetify

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

 

Vuetify优点:

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

 

安装: 

npm install vuetify --save

我们重点关注UI components即可,里面有大量的UI组件。

 

用法:

vuetify(UI框架)_第1张图片

我们重点关注UI components即可,里面有大量的UI组件 。需要用到其他再来查即可;

vuetify(UI框架)_第2张图片

vuetify(UI框架)_第3张图片

 

页面布局

Layout组件是我们的整个页面的布局组件:

vuetify(UI框架)_第4张图片

一个典型的三块布局。包含左,上,中三部分:

vuetify(UI框架)_第5张图片

里面使用了Vuetify中的2个组件和一个布局元素:

v-navigation-drawer :导航抽屉,主要用于容纳应用程序中的页面的导航链接。

vuetify(UI框架)_第6张图片

v-toolbar:工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩的侧边栏。

v-content:并不是一个组件,而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小,使得您可以创建高度可定制的组件。

那么问题来了:v-content中的内容来自哪里?

vuetify(UI框架)_第7张图片

Layout映射的路径是/

除了Login以为的所有组件,都是定义在Layout的children属性,并且路径都是/的下面

因此当路由到子组件时,会在Layout中定义的锚点中显示。

并且Layout中的其它部分不会变化,这就实现了布局的共享。

未完.......

你可能感兴趣的:(前端)