vuetify(UI框架)

2024-04-27 09:38:55

Vue负责视图的渲染（模型和视图双向绑定），UI框架提供样式（外观显示）。

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

element-ui：饿了么出品

i-view：某公司出品

推荐的是一款国外的框架：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中的其它部分不会变化，这就实现了布局的共享。

未完.......

vuetify(UI框架)相关推荐

pyqt 获取 UI 中组件_一起学Vue：UI框架(elementui)
目标使用Vue+ElementUI构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面比如我们要实现这样列表.新增.编辑三个页面: 列表页面新增页面编辑页面安装elem ...
element ui 多个子组件_vue前端UI框架，一点都不圆润，盘它！
面对众多vue前端UI框架,看着它们干干巴巴.麻麻赖赖的样子,一点都不圆润,跟我一起盘它! Vue移动端UI框架 1.Vux(star:15620) VUX(读音 [v'ju:z],同 views)是 ...
semantic ui中文文档_Vuetify-广受欢迎的Material风格的开源UI框架
全世界范围内广受欢迎的 Vue UI 框架,一个非常精致的 Material Design UI 套件. Material Design 风格 UI 框架 Vuetify 是一个基于 Vue.js 精 ...
antvue 有赞布局_UI大全：前端UI框架集合（持续更新，当前32个）
2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semanti ...
2018年流行的vue前端UI框架
2018年九个很受欢迎的vue前端UI框架作者: 祈澈菇凉原文: https://blog.csdn.net/qq_36538012/article/details/82152052 最近在逛各大 ...
ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
总结前端好用的ui框架，做开发非常的奈斯，总有一款你喜欢。
总结好用的UI 框架这是在网上找的,希望对大家有所帮助....哈哈哈哈 Element(vue):http://element-cn.eleme.io/2.0/#/zh-CN Mint UI(vue ...
html如何既能应用于pc端也能用于手机端_如何选择一个 vue ui 框架？
目录 1,比较流行的 UI 框架有哪些? 1.1 适用 PC 端 1.2 适用移动端 1.3 其它 2,vuetify 是什么,为什么选择它? 2.1 Vuetify给出的 vue ui 框架对比图 ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

最新文章

热门文章