Typescript 如何使用jsx/tsx render修复错误未知的自定义Vuetify元素？

我是Vue和Vuetify的新手。我正在使用TSX——类型脚本JSX——渲染创建简单的应用程序。浏览器中运行的应用程序在控制台中出现以下错误

[Vue warn]：未知自定义元素：-您是否注册了 组件是否正确？对于递归组件，请确保提供 “名称”选项

发现于

--->在src/App.vue

[Vue warn]：未知自定义元素：-您是否注册了 组件是否正确？对于递归组件，请确保提供 “名称”选项

发现于

--->在src/App.vue

这里是App.vue

<script lang="tsx">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  render() {
    return (
      <div id="app">
        <v-app>
          <v-content>
            <p>Hello World</p>
          </v-content>
        </v-app>
      </div>
    );
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

插件/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

您可以在下面的github链接中找到完整的项目文件

---

在App.vue中，导入所需的Vuetify组件，如下所示：

<script lang="tsx">
import { Component, Vue } from "vue-property-decorator";
import { VApp, VContent } from 'vuetify/lib';

@Component({
  components: {
   'v-app': VApp,
   'v-content': VContent
  }
})
export default class App extends Vue {
  render() {
    return (
      <div id="app">
        <v-app>
          <v-content>
            <p>Hello World</p>
          </v-content>
        </v-app>
      </div>
    );
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

从“Vue属性装饰器”导入{Component，Vue}；
从“vuetify/lib”导入{VApp，VContent}；
@组成部分({
组成部分：{
“v-app”：VApp，
“v-content”：VContent
}
})
导出默认类应用程序扩展Vue{
render（）{
返回(
你好，世界

);
}
}
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

<script lang="tsx">
import { Component, Vue } from "vue-property-decorator";
import { VApp, VContent } from 'vuetify/lib';

@Component({
  components: {
   'v-app': VApp,
   'v-content': VContent
  }
})
export default class App extends Vue {
  render() {
    return (
      <div id="app">
        <v-app>
          <v-content>
            <p>Hello World</p>
          </v-content>
        </v-app>
      </div>
    );
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>