在project目录下创建components文件夹，然后将所有子组件放入components文件夹下

1 多组件嵌套使用

(1) Child1.vue

<template>
    <div>子组件1</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>

(2) Child2.vue

<template>
    <div>子组件2</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>

(3) App.vue

<template>
    <div>单文件组件 {{name}}
        <Child1></Child1>
        <Child2></Child2>
    </div>
</template>
<script>
import Child1 from "./compenents/Child1.vue"
import Child2 from "./compenents/Child2.vue"
export default {
    data:function(){
        return {name: "python"}
    },
    components:{
        Child1,
        Child2,
    }
}
</script>
<style>
    div{background-color: aqua;}
</style>

2 多组件路由使用

使用路由形式将多个单文件组件组合在一起

(1) 定义路由目录和路由文件

mkdir router
cd router/
touch router.js

(2) 编写路由文件router.js

import Vue from 'vue'
import Router from 'vue-router'
import Child1 from '../compenents/Child1.vue'
import Child2 from '../compenents/Child2.vue'
// 指定Vue使用路由
Vue.use(Router)
// 指定路由规则
export default new Router({
    routes:[
        {
            path:'/child1',
            component:Child1,
        },
        {
            path:'/child2',
            component:Child2,
        },
    ]
})

(3) 在main.js中使用路由

import Vue from 'vue'
import App from './App.vue'
//导入定义好的路由
import router from './router/router.js'
new Vue({
    el: '#app',
    router,  // 使用路由
    // 渲染单文件组件
    render: function(create){
        return create(App)
    }
})

(4) 在App.vue中指定路由标签

<template>
    <div>单文件组件 {{name}}
        <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>
</template>
<script>
import Child1 from "./compenents/Child1.vue"
import Child2 from "./compenents/Child2.vue"
export default {
    data:function(){
        return {name: 'python'}
    },
    components:{
        Child1,
        Child2,
    }
}
</script>
<style>
    div{background-color: aqua;}
</style>