一. 安装vuetify

1. vue插件式安装

首先我们使用vue_cli创建一个新的vue项目, 进入项目, 然后:

vue add vuetify

他会问一个git问题, 直接选y

他会问版本问题, 我们直接选default

vuetify就这么装好了

2. 项目目录文件变化

变化1:

我们发现相比vue-cli默认构建的项目, 多了一个plugins/vuetify.js

变化2:

App.Vue中多了一个APP, 这是vuetify的根组件

变化3:

还重写了一些helloworld组件😂😂😂

二. 属性化思想

vuetify中很多设置是通过给标签添加特定属性来实现的

三. 颜色

在某些控件中, 我们在class中添加对应的代码就可以控制颜色, 是直接在class中按照colors的要求直接写就可以哦 https://vuetifyjs.com/zh-Hans/styles/colors/

    <p class="pink">这是一个p</p>
    <p class="pink white--text">这是一个p</p>
    <p class="pink lighten-4 white--text">这是一个p</p>
    <p class="pink dark-6 white--text">这是一个p</p>
    <p class="pink lighten-4 blue--text text--darken-3">这是一个p</p>

2. 标准主题中的颜色

  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107',

    <p class="primary">这是一个p(primary)</p>
    <p class="secondary white--text">这是一个p(secondary)</p>
    <p class="accent">这是一个p(accent)</p>
    <p class="error">这是一个p(error)</p>
    <p class="info">这是一个p(info)</p>
    <p class="success">这是一个p(success)</p>
    <p class="warning">这是一个p(warning)</p>

四. 字体

同样的,在某些控件中, 我们在class中添加对应的代码就可以控制字体
https://vuetifyjs.com/zh-Hans/styles/text-and-typography/

1. 字体大小

我们可以用 text-value 实现响应式字体

• value可选值: h1,h2,h3,h4,h5,h6,subtitle-1,subtitle-2,body-1,body-2,button,caption,overline

    <p class="display-4 lime">这是一个p(display-4)</p>
    <p class="display-3 lime">这是一个p(display-3)</p>
    <p class="display-2 lime">这是一个p(display-2)</p>
    <p class="display-1 lime">这是一个p(display-1)</p>
    <p class="text-h1 lime">这是一个p(h1)</p>
    <p class="text-h2 lime">这是一个p(h2)</p>
    <p class="text-h3 lime">这是一个p(h3)</p>
    <p class="text-h4 lime">这是一个p(h4)</p>
    <p class="text-h5 lime">这是一个p(h5)</p>
    <p class="text-h6 lime">这是一个p(h6)</p>
    <p class="text-subtitle-1 lime">这是一个p(subtitle-1)</p>
    <p class="text-subtitle-2 lime">这是一个p(subtitle-2)</p>
    <p class="text-body-1 lime">这是一个p(body-1)</p>
    <p class="text-body-2 lime">这是一个p(body-2)</p>
    <p class="text-button lime">这是一个p(button)</p>
    <p class="text-caption lime">这是一个p(caption )</p>
    <p class="text-overline lime">这是一个p(overline)</p>

2. 自适应字体大小

vuetify的自适应布局类似bootstrap, 拥有如下布局方式

我们可以用 .text-breakpoint-value 实现响应式字体

• breakpoint可选值: xs, sm, md, lg 和 xl
• value可选值: h1,h2,h3,h4,h5,h6,subtitle-1,subtitle-2,body-1,body-2,button,caption,overline

<p class="text-xs-h6 text-sm-h5 text-md-h4 text-lg-h3 text-xl-h2 lime">这是一个p(响应式显示)</p>

3. 字体粗细

我们可以用 font-weight-value 实现粗细字体

• value可选值:black , bold , medium , regular , light , thin

    <p class="font-weight-black lime">这是一个p(h加黑加粗体)</p>
    <p class="font-weight-bold lime">这是一个p(粗)</p>
    <p class="font-weight-medium lime">这是一个p(中粗)</p>
    <p class="font-weight-regular lime">这是一个p(常规)</p>
    <p class="font-weight-light lime">这是一个p(细)</p>
    <p class="font-weight-thin lime">这是一个p(极细)</p>

4. 字体斜体

我们可以用font-italic 实现斜体字体

<p class="font-italic lime">这是一个p(斜体)</p>

5. 文本对齐

我们可以用text-value 实现文本对齐

• value可选值: left, center, right

    <p class="text-left lime">这是一个p(左对齐)</p>
    <p class="text-right lime">这是一个p(居中)</p>
    <p class="text-center lime">这是一个p(右对齐)</p>

6. 响应式文本对齐

我们可以用text-breakpoint-value 实现响应式文本对齐

• breakpoint可选值: xs, sm, md, lg 和 xl
• value可选值: left, center, right

    <p class="text-xs-left text-sm-center text-md-right text-lg-left text-xl-center lime">这是一个p(响应式对齐)</p>

7. 装饰线

    <p class="text-decoration-none">这是一个p(无装饰)</p>
    <p class="text-decoration-line-through">这是一个p(删除线)</p>
    <p class="text-decoration-overline">这是一个p(上划线)</p>
    <p class="text-decoration-underline">这是一个p(下划线)</p>

8. 透明度

    <p class="text--primary">这是一个p(透明度100%)</p>
    <p class="text--secondary">这是一个p(透明度60%)</p>
    <p class="text--disabled">这是一个p(透明度38%)</p>

9. 大小写转化

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

10. 文本换行和溢出

(1).文本溢出

    <div class="text-no-wrap red" style="width: 8rem">
      这个文本不会换行, 会超出它所在div的宽度
    </div>
    <div class="light-blue" style="width: 8rem">
      这个文本会换行, 不会会超出它所在div的宽度
    </div>
    <div class="text-truncate yellow" style="width: 8rem">
      这个文本会缩略, 不会会超出它所在div的宽度
    </div>

11. 文本对齐

可以通过以下格式的文本对齐辅助类实现: text-{breakpoint}-{direction},

• breakpoint 可以是 sm, md, lg 或 xl,
• direction 可以是 left 或 right, center

  <div class="text-center" style="width: 15rem">
    <p class="text-left">左对齐</p>
    <p class="text-center">居中对齐</p>
    <p class="text-right">右对齐</p>
    <p class="text-md-left">左对齐</p>
    <p class="text-md-center">居中对齐</p>
    <p class="text-md-right">右对齐</p>
    <p>不对齐,继承父对齐</p>
  </div>