vuetify的安装使用步骤

①安装vuetify

npm install vuetify

②在main.js引入

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

vuetify: new Vuetify(),

③在index.html中引入字体和图标

<!-- Fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,300italic,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

④使用

<template>
  <v-card class="container">
    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">
              Name
            </th>
            <th class="text-left">
              Calories
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in desserts"
            :key="item.name"
          >
            <td>{{ item.name }}</td>
            <td>{{ item.calories }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>

    <v-btn color="#faa" icon>
      <v-icon>icecream</v-icon>
    </v-btn>
    <v-btn color="#faa" icon>
      <v-icon>icecream</v-icon>
    </v-btn>
    <v-spacer></v-spacer>
    <v-icon>nightlife</v-icon>
    <v-icon>nightlife</v-icon>
    <v-icon>nightlife</v-icon>
    <v-spacer></v-spacer>
    <v-btn color="#c81c70" text style="font-weight: bold;">
      ok
    </v-btn>
  </v-card>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159
        },
        {
          name: 'Ice cream sandwich',
          calories: 237
        },
        {
          name: 'Eclair',
          calories: 262
        },
        {
          name: 'Cupcake',
          calories: 305
        },
        {
          name: 'Gingerbread',
          calories: 356
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.container {
  text-align: center;
}
</style>

⑤效果图

标签：name,步骤,calories,icecream,nightlife,Vuetify,安装,vuetify
来源： https://blog.csdn.net/qq_37899622/article/details/120830580