为何两个Vue.js+Vuetify JSFiddle示例中v-card显示不一致？

在基于Vue.js 2.6.11和Vuetify 2.4.0的两个相似JSFiddle示例中，一个的v-card能正常渲染出带样式的卡片，另一个却无法正常显示视觉样式，核心原因在于是否引入了Vuetify的样式文件，具体分析如下：

两个示例的代码差异 #

示例1（v-card正常显示） #

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

这个示例的JSFiddle环境中，已通过配置自动引入了Vuetify的CSS样式文件，所以v-card能正常渲染出带边框、内边距等样式的卡片。

示例2（v-card无法正常显示） #

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.4.0"></script>

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

这个示例仅引入了Vue和Vuetify的JS逻辑文件，缺少Vuetify的CSS样式文件引入。Vuetify的UI组件完全依赖其官方样式文件来呈现视觉效果，没有样式文件时，v-card只会渲染成无样式的HTML结构，看起来就像“无法正常显示”。

修复方案 #

要让示例2的v-card正常显示，只需在<script>标签前添加Vuetify的CSS文件引入：

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.4.0/dist/vuetify.min.css" rel="stylesheet">

内容的提问来源于stack exchange，提问作者Alfred Kaminski