vue-单文件组件单文件组件的后缀都是 .vue App.vue 管理总的组件例如student.vue scho

单文件组件的后缀都是 .vue

<template>
  <!-- 组件的结构 -->
</template>

<script>
//export default 作用是为了暴露此组件
export default {
  //组件的交互
  //组件名和文件名一致
  name: "schoo",
};
</script>

<style>
/* 组件的样式 */
</style>

App.vue 管理总的组件例如student.vue school.vue

<template>
    <div>
        <School></School>
    </div>
</template>

<script>
    //引入组件
    import School from './school.vue'

    export default {
        name:'App',
        components:{
             school,
        }
    }
</script>

创建vue实例，在js文件，把App.vue引入
最后准备一个容器，el挂载上去

import App from './App.vue'

new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{App},
})