在vue.js中导入组件时出错

Question

It could be a simple mistake. But I'm a newbie in this area. I get a Syntax Error on Unexpected Token here:

component: () => import('@/layouts/default.vue'),

What would be the issue?

Answer 1

If you want to import a component into another module/component then use this at the top of your file:

import MyComponent from '@/layouts/default.vue'

...assuming you have exported MyComponent as the default export in your default.vue file.

You can change MyComponent to whatever you want.

Answer 2

I'm assuming you're using stand alone components. In that case, include export default in your default.vue file and then import DefaultComponent from '@/layouts/default.vue at the top of the file. Then, include the DefaultComponent in the Components section.

Default.vue

<template>
  <p>{{hi}}</p>
</template>
<script>
  export default{
    data: function(){
      hi: 'Hello World'
    }
  }
</script>
<style
</style>

Main.vue

<template>
  <default-component></default-component>
</template>
<script>
  import DefaultComponent from '@layouts/default.vue';

  export default{
    components: {
      'default-component': DefaultComponent
    }
  }
</script>
<style
</style>