web-component - 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://v2.vuejs.org/v2/guide/components-registration.html

希望这对您有所帮助。