Vuetify-检测到多个Vue实例

时间:2019-02-26 12:14:59

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

我正在使用 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实例

1 个答案:

答案 0 :(得分:0)

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

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

如果您还没有创建<!DOCTYPE html> <htlm> <head> <title>test</title> <mata charaset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="cv.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://kit.fontawesome.com/a54d2cbf95.js"></script> </head> <style> </style> <body> <audio controls autoplay> <!-- <source src="horse.ogg" type="audio/ogg"> --> <source src="backsound.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </body> </htlm>目录,并将您的components放在这里。

然后,您需要导入my-component.vue,然后才能在要使用它的组件中本地注册它。

假设以下组件名为App.vue

my-component.vue

现在<template> <MyComponent /> </template> <script> import MyComponent from './components/my-component' export default { components: { MyComponent }, // ... } </script> 可以在App.vue的模板中使用。

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

希望这会有所帮助。