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中的其它部分不会变化，这就实现了布局的共享。

未完.......