导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

安装

# 脚手架方案
vue add vuetify

安装后自动生成：

src/plugins/vuetify.js

import Vue from "vue";
// 导入 vuetify
import Vuetify from "vuetify/lib/framework";

// 注册 vuetify
Vue.use(Vuetify);

// 导出 vuetify 实例
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      }
    }
  },
  icons: {
    iconfont: 'mdi', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
});

入口文件中引入：

import Vue from "vue";
...
// 引入 vuetify 实例
import vuetify from "./plugins/vuetify";

...

new Vue({
  ...
  // 作为参数引入
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

App.vue 中 <v-app> 取代了 <div id="app"> 根元素：

<template>
  <v-app>
    ...
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

v-app

<v-app> 是 vuetify 所有组件和功能的挂载点：

• 页面布局
• 跨浏览器兼容
  • Edge、Firefox、Chrome（不支持 IE，若想兼容，参考官网）
• 派发事件
• 注入样式

样式

设置阴影

格式：elevation-{n} n取值：0-24

<div class='elevation-5'></div>

颜色

背景色

<div class="red"></div>
<div class="red lighten-3"></div>
<div class="red darken-3"></div>

字体

<div class="red--text"></div>
<div class="red text--lighten-3"></div>
<div class="red text-darken-3"></div>

间距

格式：{property}{direction}-{size}

• size: 增量之间 每个取值相差4px
  • e.g. mt-1 表示 上边距 4px；mt-10 表示 上边距 40px
• n: 代表负值 mt-n1 表示 上边距 -4px

css 重置

基于 ress ，vuetify 已经帮我们做了，跨浏览器保证基础样式一致

flex 布局

响应式：flex-column 默认 竖向排列 flex-sm-row 600px 往上，就横向排列

<div
  class="d-flex justify-space-around align-center flex-column flex-sm-row">
  <div class="item elevation-1 text-h2 font-weight-thin">1</div>
  <div class="item elevation-2 text-h3 font-weight-bold">2</div>
  <div class="item elevation-3">3</div>
</div>

字体

<div class="d-flex justify-space-around align-center">
  <div class="item elevation-1 text-h2 font-weight-thin">1</div>
  <div class="item elevation-2 text-h3 font-weight-bold">2</div>
  <div class="item elevation-3">3</div>
</div>

更多：https://vuetifyjs.com/en/styles/text-and-typography/

修改组件默认样式

在 src 目录下新建 styles/variables.sass 文件

vuetify-loader将自动引导文件的变量进入 Vue CLI的编译过程，覆盖框架的默认值。

阅读更多：SASS variables

v-btn

例如 v-btn 默认英文会全大写字母：

<v-btn>button</v-btn>

我们首先在官网的 API/v-btn 中找到关于 text-transform 的 sass 变量，然后在 src/styles/variables.sass 中覆盖此变量：

$btn-text-transform: none

最后重新编译项目，就改掉了：

自定义 vuetify 覆盖样式的文件名和路径

在 vue.config.js 中设置 webpack 配置

module.exports = {
  transpileDependencies: ["vuetify"],
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/common.scss"',
      },
      scss: {
        additionalData: '@import "@/assets/common.scss";',
      },
    },
  },
};

响应式

移动优先

.text-xs-h1 的影响设备的范围

.text-md-h1 的影响设备的范围

lg 以上，字体就是 h1 大小，lg以下，字体就是 h5 大小

<div class="text-h5 text-lg-h1">响应式文字</div>

网格系统

cols: 设置每行几列 cols="3" 就是三列 cols="auto" 就是自动分配且加上间距

<v-container>
  <v-row>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
    <v-col cols="auto"><div class="box red"></div></v-col>
  </v-row>
</v-container>

$vuetify

breakpoint

利用 breakpoint 根据断点编写 js 逻辑：

<template>
  <v-btn @click="foo">按钮</v-btn>
</template>
<script>
export default {
  methods: {
    foo() {
      this.$vuetify.breakpoint.name !== "xs" && alert("是否发送网络请求");
      console.log("发送");
    },
  }
}
</script>