安装

# 脚手架方案
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>

颜色