I have created a file EmptyComponent.html to show a Vue.js component (myComponent.vue) both files are in the same folder. my component will not show and I am always getting an error in chrome developer tools console saying "Uncaught SyntaxError: Unexpected identifier EmptyComponent.html:8"
EmptyComponent.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<h1> id app div </h1>
<myComponent></myComponent>
</div>
<script>
import myComponent from 'myComponent.vue'
new Vue({
el: '#app',
components: {myComponent}
});
</script>
myComponent.vue
<template>
<div>
<h1> myComponent div</h1>
</div>
</template>
<script>
export default {
name: 'myComponent'
</script>
<style scoped>
</style>
In order to use single file components .vue
you should use Vue cli 3
, but your component does not contain a complex code you could use CDN and declare your component using Vue.component('my-component',{....})
:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> <div id="app"> <h1> id app div </h1> <my-component></my-component> </div> <script> Vue.component('my-component', { template: ` <div> <h1> myComponent div</h1> </div>` }) new Vue({ el: '#app', }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.