Vuetify采用移动优先设计方案，基于Material Design 2规范

安装

  1. Vue UI 安装

  2. Nuxt 安装

npm install @nuxtjs/vuetify -D

1
2
3
4
5
6
7
8
9
10
// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

  1. Webpack 安装

  2. CDN 安装

  3. 结合 Electron、PWA、Cordova、Capacitor

字体图标

Material Icons

常见问题

  1. 背景、文字样式设置
1
2
3
4
<!-- 设置背景 -->
color="grey lighten-5" 
<!-- 设置文字 -->
class="grey--text text--lighten-5"
  1. ‘v-slot’ directive doesn’t support any modifier
1
<template v-slot:[`item.actions`]="{ item }">

  1. 设置负边距

    mt-n3