vue.js組件沒有顯示？

Question

我創建了一個文件EmptyComponent.html來顯示Vue.js組件（myComponent.vue），這兩個文件都位於同一文件夾中。 我的組件無法顯示，並且在chrome開發人員工具控制台中總是出現錯誤，提示“未捕獲的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>