<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../js/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
import App from './App.vue';
 
new Vue({
    el : "#root",
    template : `
        <app></app>
    `,
    components : {App}
});
<template>
    <div>
        <h3>X1组件</h3>
    </div>
</template>
<script>
    export default {
 
    }
</script>
<style>
 
</style>
<template>
   <div>
        <h1>X组件</h1>
        <x-1></x-1>
   </div>
</template>
<script>
    import X1 from './X1.vue';
    export default {
        components : {X1}
    }
</script>
<style>
 
</style>
<template>
    <div>
        <h1>{{msg}}</h1>
        <x></x>
        <y></y>
    </div>
</template>
<script>
    import X from './X.vue';
    import Y from './Y.vue';
    export default {
        components : {X,Y},
        data(){
            return {
                msg : "App"
            };
        }
    }
</script>
 
<style>
 
</style>
<template>
    <div>
        <h1>Y组件</h1>
        <y-1></y-1>
    </div>
</template>
<script>
    import Y1 from './Y1.vue';
    export default {
        // 注册组件
        components : {Y1}
    }
</script>
<style>
 
</style>