Oruga UI 无法正常工作。我无法使用任何元素，我做错了什么吗？ （图3）

Question

每当我使用 oruga UI 组件时，即使它是一个非常简单的东西，它也会在我的 vue 应用程序中导致错误。

例如以下代码：

`<template>
  <o-field label="Name">
    <o-input v-model="name" />
  </o-field>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>`

导致此错误：

useComputedClass-T7fME1R-.mjs:43 Uncaught (in promise) Error: useComputedClass must be called within a component setup function.     at useComputedClass (useComputedClass-T7fME1R-.mjs:43:18)     at eval (Field.vue_vue_type_script_setup_true_lang-01NbaSBk.mjs:267:143)     at ReactiveEffect.eval [as fn] (reactivity.esm-bundler.js:946:44)     at ReactiveEffect.run (reactivity.esm-bundler.js:210:19)     at get value [as value] (reactivity.esm-bundler.js:955:106)     at triggerComputed (reactivity.esm-bundler.js:229:19)     at get dirty [as dirty] (reactivity.esm-bundler.js:184:11)     at instance.update (runtime-core.esm-bundler.js:5415:18)     at callWithErrorHandling (runtime-core.esm-bundler.js:321:32)     at flushJobs (runtime-core.esm-bundler.js:512:9)

不知道为什么。这就是我的 main.js 文件的样子：

import { createApp } from 'vue';
import App from './App.vue';
import Oruga from '@oruga-ui/oruga-next';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
import axios from 'axios';
import 'bulma/css/bulma.css';

const globalOptions = {
    mode: 'auto',
  };

const app = createApp(App);


// Set axios to $http for global use
app.config.globalProperties.$http = axios;

// Enable Vue Devtools
if (process.env.NODE_ENV === 'development') {
    app.config.devtools = true;
  }
app.use(VueTelInput, globalOptions);
app.use(Oruga);
app.mount("#app");

Answer 1

当我将应用程序升级到 vue.js 版本 3.4 时，我也看到此错误，而使用版本 3.3.13 时，不会发生该错误。

我在 GitHub 中打开了一个问题：https://github.com/vuejs/core/issues/10001

您可以密切关注该问题，以便了解何时可以解决该问题。同时，我建议使用 vue 3.3.13

npm install --save [email protected]