vue.js 组件没有显示？答案

【问题标题】：vue.js component is not showing?vue.js 组件没有显示？
【发布时间】：2019-02-14 18:15:51
【问题描述】：

我创建了一个文件 EmptyComponent.html 来显示一个 Vue.js 组件 (myComponent.vue) 两个文件都在同一个文件夹中。我的组件不会显示，我总是在 chrome 开发人员工具控制台中收到错误消息“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>

【问题讨论】：

标签： javascript html css vue.js vuejs2

【解决方案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>

【讨论】：