使用vuetify2.0的正确姿势_vuetify d-flex

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>
1
2
3
4
5
6
7
8
9

即先用v-app包裹起来，之前我一直不知道这个v-content怎么用。将header和footer排除在外，对具体内容用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

常见的逻辑是，当处于小屏幕时，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>
1
2
3
4
5
6
7

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
1
2
3
4
5
6
7
8
9
10
11
12

5.3 大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
1
2
3

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

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