Vuetify2.x学习笔记(壹)：Vuetify的安装、颜色(color)及字体样式、按钮(button)和图标(icon)、不同尺寸设备的适配(xs sm md lg xl)

一、介绍

Vuetify是什么

Vuetify是Vue.js的头号组件库
其通过一致的更新周期 对以前版本的长期支持 响应式社区参与 丰富的资源生态系统和对高质量组件的贡献来为用户提供构建丰富且引人入胜的web应用程序所需的一切

二、安装

Choose - 1：若用vue-cli 则输入vue add vuetify安装

Choose - 2：若用webpack 则输入npm install vuetify安装
安装完还需输入npm install sass sass-loader fibers deepmerge -D安装sass的loader
然后配置webpack.config.js：

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // 若sass-loader版本是^7.0.0 用此套配置
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // 若sass-loader版本是^8.0.0 用此套配置
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

再创建一个Vuetify的配置文件src/plugins/vuetify.js：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

最后 在main.js实例化Vue实例并将Vuetify对象作为选项传递进来：

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' 

new Vue({
  vuetify,
}).$mount('#app')

三、使用

Vuetify 需要使用<v-app>组件包裹着整个应用程序
并用<v-content>包裹着主体内容
若不这么做 则样式会发生错乱

▲颜色

在Vuetify组件里 是没有<style>标签的 因而无法像以往一样在<style>标签中自定义样式

Vuetify提供了内置颜色属性 开箱即用
默认使用的是Sass色彩包 当然 也提供可选的Javascript色彩包

导入：

<style lang="sass">
  $color-pack: false;

  @import '~vuetify/src/styles/main.sass';
</style>

若是使用vue-cli构建的项目 那么已经默认导入完成了 无需手动导入(狂喜)

使用方式很简单 在标签上添加相应的class即可
格式：<div class="颜色">或<span class="颜色--text">

例如：
<div class="red">或者<span class="red--text">

扫描二维码关注公众号，回复： 11188627 查看本文章

还能改变文本的颜色：

text--{lighten|darken}-{n}

n的可选值从1到4 数值越高程度越深

例如：

text--lighten-4

全部可选颜色：

red 红
pink 粉
purple 紫
deep-purple 深紫
indigo 靛蓝
blue 蓝
light-blue 淡青
cyan 青
teal 蓝绿
green 绿
light-green 淡绿
lime 青橙绿
yellow 黄
amber 黄褐
orange 橙
deep-orange 深橙
brown 棕
blue-grey 蓝灰
grey 灰
black 黑
white 白
transparent 透明

例1：

<p class="blue white--text">Lorem<p>

效果是蓝底白字：

例2：

<p class="pink darken-4 red--text text--lighten-4">Lorem<p>

效果是深粉色底浅红色字：

例：

<p class="white--text" dark>Lorem<p>

Vuetify还提供了默认的主题颜色
有绿色的success 红色的error 黄色的warning和蓝色的info

<v-btn class="success">绿色的success</v-btn>
<v-btn class="error">红色的error</v-btn>
<v-btn class="warning">黄色的warning</v-btn>
<v-btn class="info">蓝色的info</v-btn>

▲字体样式

切换字体大小写：

在标签上添加text-uppercase就能将英文文本全部转换为大写
同理 在标签上添加text-lowercase就能将英文文本全部转换为大写

<p class="text-uppercase">Lorem<p>
<p class="text-lowercase">Lorem<p>

设置字体大小：

用display-{n}属性进行设置
n的可选值从1到4 数值越高程度越深
例：

<h1 class="display-4">巨大的</h1>
<h4 class="display-1">更小的</h4>
<p class="headline">头部栏</p>
<p class="title">标题</p>
<p class="subheading">子标题</p>
<p class="caption">说明文字</p>

调整字体粗细：

font-weight-{x}
x填入的是程度词 共有light thin regular medium bold black 程度依次递增

例：

<p class="title font-weight-bold ">标题</p>

字体倾斜：

font-italic

例：

<p class="title font-italic">标题</p>

▲图标

Vuetify能识别Material Design Icons、Material Icons、Font Awesome 4 和 Font Awesome 5这些图标库
默认使用的是Material Design Icons

切换字体库：以Material Icons为例

安装Material Icons字体库：

cnpm install material-design-icons-iconfont -D

在vuetify.js里进行配置：

// 导入
import 'material-design-icons-iconfont/dist/material-design-icons.css'

export default new Vuetify({
  icons: {
    iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

图标的使用：

用<v-icon>标签 里面填写图标的名称即可

例如：

<v-icon>home</v-icon>

全部图标可在我另一篇博客查看：Material icons全部图标截图(共1117个)

▲按钮

用<v-btn>标签在页面上放置一个按钮

例如：

<v-btn class="pink">save me</v-btn>

用color属性给按钮设置背景颜色(效果和class设置的背景颜色是一样的)：

<v-btn color="pink">save me</v-btn>

添加outlined使按钮的样式成为幽灵按钮(幽灵按钮就是只有边框有颜色 填充颜色是透明的按钮)：

<v-btn color="pink" outlined>save me</v-btn>

添加loading使按钮一直转圈圈(通常用于加载的时候)：

<v-btn loading>save me</v-btn>

添加disabled让图标无法被点击：

<v-btn disabled>save me</v-btn>

添加block让图标撑满一整行：

<v-btn block>save me</v-btn>

默认的按钮是自带阴影效果的 可添加depressed去除阴影：

<v-btn color="pink" depressed>save me</v-btn>

加上dark属性可让按钮的字体的颜色相反
按钮的字体默认是黑色的 那么 加上dark属性 按钮的字体将变成白色
若按钮的字体已设为白色 加上dark属性 按钮的字体会变成黑色

<v-btn color="pink" dark>save me</v-btn>

添加text去除背景颜色 同时字体颜色变成背景颜色 鼠标悬浮在案例上时会有淡淡的背景颜色：

<v-btn color="pink" text>save me</v-btn>

在按钮上加图标和文字

文字用<span>标签包裹
值得注意的是：默认图标和文字相距很近 不太好看 可给图标添加left 让图标和文字离远点

<v-btn depressed class="pink white--text">
	<!-- 添加left属性 让图标和文字离远点 -->
	<v-icon left>email</v-icon>
	<span>邮件系统</span>
</v-btn>

按钮和按钮里的图标都能自由调整大小 使用small和large：

<!-- 给按钮和图标添加small属性 让按钮和图标都变小 -->
<v-btn depressed small class="pink white--text">
	<v-icon left small>email</v-icon>
	<span>邮件系统</span>
</v-btn>

<!-- 给按钮和图标添加large属性 让按钮和图标都变大 -->
<v-btn depressed large class="pink white--text">
	<span>邮件系统</span>
	<!-- 在变大状态下 图标要放在文字的右边 -->
	<v-icon right large>email</v-icon>
</v-btn>

添加fab 使按钮变圆：

<v-btn fab depressed small dark color="purple">
	<v-icon>favorite</v-icon>
</v-btn>

▲不同尺寸设备下的状态

Vuetify提供了xs sm md lg xl五个尺寸的断点 用于设定在不同场合下的布局

元素类型

用d-{value}设置元素的display

value可选值：
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

例如：

<span class="v-block">hello<span>

不同尺寸设备下的元素类型

使用d-{breakpoint}-{value}进行设置

breakpoint可选值：xs sm md lg xl

例如：
在sm尺寸的设备上时 该标签的类型变成block

<span class="v-block-sm">hello<span>

不同尺寸设备下的可见性

使用：hidden-{breakpoint}-{condition}来控制

breakpoint可选值：xs sm md lg xl
condition可选值：

• only - 仅通过 xl 断点将元素隐藏在 xs 上
• and-down - 在指定的断点处隐藏元素 并通过lg断点向下隐藏sm上的元素
• and-up - 在指定的断点处隐藏元素 并通过lg断点向上隐藏sm上的元素

其实很好理解
例如：

当设备尺寸在md和md以下(down)的时候隐藏该标签：

<v-btn class="hidden-md-and-down">hidden md and down</v-btn>

当设备尺寸在md和md以上(up)的时候隐藏该标签：

<v-btn class="hidden-md-and-up">hidden md and up</v-btn>

只有(only)当设备尺寸在sm的时候才隐藏该标签：

<v-btn class="hidden-sm-only">hidden sm only</v-btn>

---