vue+vuetify项目

①创建vue项目并安装vuetify

②在index.html中引入图标

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

③使用

<template>
  <v-card style="margin: 20px;">
    <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-card style="text-align: center; margin: 20px;">
      <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>

    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-card>
</template>

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      headers: [
        {
          text: 'Dessert',
          align: 'start',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159
        },
        {
          name: 'Ice cream sandwich',
          calories: 237
        }
      ]
    }),
  }
</script>
<style scoped>
</style>

④效果图

⑤两个网址
vuetify使用文档：vuetify使用文档
vuetify图标库：vuetify图标库