如何在 Vue 组件中导入和使用 Vuetify

Question

如何在我的 Vue 组件中导入和使用 Vuetify？

这是一些示例代码，但在呈现时无法正常工作。在我的示例中，v-switch 不呈现。

Vue.component('editable-text', {
  data: function () {
    return {
      switch1: false,
    }
  },
  template: `<h1>Message is: {{ switch1 }}</h1>
    <v-app>
      <v-template>
        <v-switch
          v-model="switch1"
        ></v-switch>
      </v-template>
    </v-app>`,
  mounted() {
  },
})

Answer 1

像下面的片段一样尝试：

Vue.component('editable-text', {
  vuetify: new Vuetify(),
  data: function () {
    return {
      switch1: false,
    }
  },
  template: 
  `<div>
     <v-app>
       <h1>Message is: {{ switch1 }}</h1>
       <v-switch v-model="switch1"></v-switch>
     </v-app>
  </div>`,
})

new Vue({
  el: '#app',
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <editable-text></editable-text>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

如何在 Vue 组件中导入和使用 Vuetify

How to import and use Vuetify in a Vue Component

vue.js

vuetify.js