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组件。

 

用法:

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

 

页面布局

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

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

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

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

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

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

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

Layout映射的路径是/

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

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

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

未完.......

发布了71 篇原创文章 · 获赞 16 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览