Vuetify - 检测到多个 Vue 实例

【问题标题】：Vuetify - Multiple instances of Vue detectedVuetify - 检测到多个 Vue 实例
【发布时间】：2019-02-26 12:14:58
【问题描述】：

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

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

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

[Vuetify] 检测到多个 Vue 实例

【问题讨论】：

标签： web-component vuetify.js multiple-instances vue-cli-3 unpkg

【解决方案1】：

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

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

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

然后你需要导入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

希望这会有所帮助。

【讨论】：