Компонент vue.js не отображается?

Question

Я создал файл EmptyComponent.html для отображения компонента Vue.js (myComponent.vue), оба файла находятся в одной папке.Мой компонент не будет отображаться, и я всегда получаю сообщение об ошибке в консоли инструментов разработчика Chrome, в котором говорится «Uncaught SyntaxError: Неожиданный идентификатор 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>

Answer 1

Чтобы использовать отдельные файловые компоненты .vue, вы должны использовать Vue cli 3, но ваш компонент не содержит сложного кода, вы можете использовать CDN и объявить свой компонент с помощью 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>