3.引入自定义的组件

0.在src/components/left.vue，添加所需要的内容

<template>
  <div class="hello">
    left-content
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

1.在src/components/HelloWorld.vue中顶部引入(记住，引入不存在的组件，会直接报错)

<script>
import left from './left';
//...
</script>

2.在组件中使用

export default {
  name: 'HelloWorld',
  components: {
    left,
  },
}

3.在页面中使用

<template>
<div>
     <left></left>
</div>
</template>