使用vuetify2.0的正确姿势

前排提示：这个是1.0版本时候写的博客，现在出了2.0，官方的文档也完善了很多，填了我这篇文章里提到的很多坑，但是这篇博客依旧会不断（随缘）更新。

---

使用vuetify2.0的正确姿势

说在前面的话（一定要看）

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

因为1.0的时候文档很不完善，用起来有很多坑，只能不断看国外大佬或者官方的项目来总结。这个是根据我看的一些国外大佬的视频、文档，以及自己在平时中使用心得总结的用法。不一定是对的，只能说对我来说用的比较顺手，如有不足或建议，请提出指正。

1. 全局结构的组织

关于全局结构，一般如下所示：

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

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

2.0之后，header除了可以用appbar组件外，还提供了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>

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