我正在使用 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实例
答案 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
希望这会有所帮助。