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>