web-component - Vuetify - 检测到多个 Vue 实例

Question

我正在使用vue-cli-3.4.1。创建项目后，我使用命令将 vuetify 添加到我的项目中vue add vuetify。还有另一个 vue web-component，我正试图在我的应用程序中使用它。我已将脚本添加到index.html文件中，如下所示

<script src="https://unpkg.com/vue"></script>
<script src="path/my-component.min.js"></script>

但是，运行 command 后npm run serve，在控制台中收到此错误并显示空白页。

[Vuetify] 检测到多个 Vue 实例

Answer 1

你的 index.html 文件应该只有一个 vue 实例。

vue-cli 使用模块系统构建您的应用程序。

如果您还没有，请创建一个components目录并将您的目录放在my-component.vue那里。

然后你需要 import my-component.vue，然后在你想要使用它的组件中本地注册它。

假设以下组件名为 App.vue

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './components/my-component'

export default {
  components: {
    MyComponent
  },
  // ...
}
</script>

现在MyComponent可以在 App.vue 的模板中使用。

https://vuejs.org/v2/guide/components-registration.html

希望这可以帮助。