Vuetify-检测到Vue的多个实例

Question

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

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

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

[[Vuetify]检测到多个Vue实例

Answer 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

希望这会有所帮助。