使用vuetify2.0的正确姿势

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>
    <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除了可以用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的文档很详细，中文翻译也很全了，我当时看的时候很多部分都是英文的，而且很多坑都没有填，如今都填的七七八八了，我觉得没有必要再更新这篇文章了。