我在 Vuejs 上使用 React 库时遇到问题。
我试图在我的 Vuejs 项目中使用 Zendesk Garden ( https://www.npmjs.com/package/@zendeskgarden/react-loaders )。
实际上，我设法使用 Vuera 库（https://github.com/akxcv/vuera）显示加载器，但只有在没有打字稿的情况下使用它才有效。
这是对我有用的代码（HelloWorld.vue）：
<template>
<div>
<ThemeProvider>
<Spinner />
</ThemeProvider>
</div>
</template>
<script>
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Spinner } from '@zendeskgarden/react-loaders'
export default {
name: 'HelloWorld',
components: { ThemeProvider, Spinner }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
但是，如果我使用基于类的组件或打字稿，则加载程序不会显示。
这是对我不起作用的代码（HelloWorld.vue）：
<template>
<div>
<ThemeProvider>
<Spinner />
</ThemeProvider>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Spinner } from '@zendeskgarden/react-loaders'
@Component({
components: {
ThemeProvider, Spinner
}
})
export default class HelloWorld extends Vue {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
这是 main.ts：
import Vue from 'vue'
import App from './App.vue'
//@ts-ignore
import { VuePlugin } from 'vuera'
Vue.config.productionTip = false
Vue.use(VuePlugin)
new Vue({
render: h => h(App)
}).$mount('#app')
这是 App.vue：
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from './components/HelloWorld.vue'
@Component({
components: {
HelloWorld
}
})
export default class App extends Vue {}
</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>
如果我使用基于类的组件或打字稿，您知道为什么加载器不起作用吗？
非常感谢！
更新：
这是我尝试构建时的错误：
