使用vuetify2.0的正确姿势

4 篇文章 2 订阅

2019年7月14日补充

因为1.0的时候文档很不完善,用起来有很多坑,只能不断看国外大佬或者官方的项目来总结。这个是根据我看的一些国外大佬的视频、文档,以及自己在平时中使用心得总结的用法。现在出了2.0,官方的文档也完善了很多,填了我这篇文章里提到的很多坑,但是这篇博客依旧会不断(随缘)更新。

我还想说,这个框架的文档真的超级详细,我觉得比antd的文档还要细,如果你看着吃力,或者觉得文档写得不好,说明你的英文水平需要提高了。


说在前面的话

我从来不屑于讲解乱七八糟的组件用法,文档上能找到的为什么要拿出来再找一遍?我总结的都是一些容易出坑、文档上没有提到过、难以理解的部分、或是常用语法的总结这样可以提高使用效率。

Vuetify使用步骤(一定要看)

  1. vuetify是一个比较庞大的库,它的用法也略显复杂,你首先应该看文档中的入门指南,来找到适合于你的安装方法,它还有很多配置选项,不过对于初学者的建议是先不要动这些配置,默认的就好了。

  2. 我建议你在使用组件之间先浏览一遍样式和动画这个部分(下图),甚至可以多看几遍熟读或牢记他们,根据我的经验,你最后是会经常来访问这个部分的。这是一些定义在全局上的样式,你可以把他们用在任何一个组件、原生HTML元素上面,十分方便,且十分强大。
    在这里插入图片描述

  3. Vuetify的栅格很强大,在响应式布局的处理上十分猛,因此,我觉得你最好使用它的原生布局,比如v-content、v-container、v-col、v-row等,而不是自己写,因为只有它自己的布局组件他才能识别出来,并进行响应式布局处理。

    因此你应该熟读Grid部分,并尝试自己用这些东西完成一些复杂的布局实现,牢记v-col,v-row的各种属性,因为他们都很常用,不然你会来回翻,严重影响编程效率。
    在这里插入图片描述

  4. 好了,现在我觉得你可以尽情使用各种组件了,如果你对我上面提到的东西都做了预习,那么我觉得你在编写代码的时候会很轻松,不然你会十分头疼,你来回找你想要的东西时,切换网页的时间会占到60%以上。

我怎么感觉我说话的语气像是翻译过来的一样…其实这是我自己总结的…可能最近看英翻中的文档看多了吧。


1. 全局结构的组织——v-app,v-content的正确用法

关于全局结构,一般如下所示:

<v-app>
    <headbar />
    <v-content id="main-content">
        <v-container fill-height>
            <intro />
        </v-container>
    </v-content>
    <footer />
</v-app>

即先用v-app包裹起来,之前我一直不知道这个v-content怎么用。将headerfooter排除在外,对具体内容用content包裹。

2.0之后,header除了可以用v-toolbar组件外,还提供了appbar,其实没有什么区别,注意看文档就好了。


2. 关于可控制关闭的侧边栏(drawer)

这里先给出一个常见的header

<v-toolbar flat dark app>
        <v-btn icon @click="drawer = !drawer">
            <img src="../public/icon/menu.svg" alt="=" class="sidebar-btn">
        </v-btn>
        <v-toolbar-title>
            title
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-xs-only white--text">
            <v-btn flat to="/">
                Home
            </v-btn>
        </v-toolbar-items>
</v-toolbar>

常见的逻辑是,当处于小屏幕时,v-toolbar-items应该被隐藏,因此,给它一个hidden-xs-only类。给title旁边的btutton一个逻辑,当点击时,切换drawer的值。

这里要注意的是,drawer的初值为null和false是有区别的,如果drawer的初值是null,那么当处于大页面时,drawer是默认显示的,请类比youtube的首页(如下图)。
在这里插入图片描述如果你想使用纯粹的手动切换,请将drawer的初值设为false

3. v-layout的用法(已废弃,改为v-row,v-col,但具体用法没变)

在把vuetify当工具用之前,请先尝试用v-layout、v-flex实现文档中较为复杂的布局。
在这里插入图片描述
这样在你使用的时候,会更加快速、得心应手。

  1. 注意layout的wrap属性,和各种居中
  2. 注意flex的shrink和grow属性,一个是尽量缩小自己,一个是尽量扩展自己。
  3. 有的时候d-flex是要自己添加的
  4. 和常用的断点xs、sm、md

4. 常用的类名

1 背景颜色

class="red\white\black\#xxx\rgba()"

2 字体颜色

class="white--text"
class="black--text"

3 内外边距

pt pb pl pr px py pa-{0-12}

4 display显示

hidden-xs-only
hidden-sm-and-up

5 文字

5.1 粗细
<p class="font-weight-black">Black text.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-medium">Medium weight text.</p>
<p class="font-weight-regular">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-thin">Thin weight text.</p>
<p class="font-italic">Italic text.</p>
5.2 大小
.display-4	Light 96sp
.display-3	Light 60sp
.display-2	Regular 48sp
.display-1	Regular 34sp
.headline	Regular 24sp
.title	Medium 20sp
.subtitle-1	Regular 16sp
.subtitle-2	Medium 14sp
.body-1	Regular 16sp
.body-2	Regular 14sp
.caption	Regular 12sp
.overline Regular 10sp
5.3 大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

暂时先更新到这里,后来有什么常用的手法再更新

我觉得已经没什么可说的了吧,2.0的文档很详细,中文翻译也很全了,我当时看的时候很多部分都是英文的,而且很多坑都没有填,如今都填的七七八八了,我觉得没有必要再更新这篇文章了。

  • 8
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值