前置学习：模块化
单文件组件：整个文件就是一个组件(.vue)，将组件导出
整体项目结构
school.vue
<template><div>{{name}}</div>
</template><script>
export default {name:"school",data(){return{name:'school'}}
}
</script><style></style>
App.vue:所有组件导入App此父组件
<template>
<div><school></school><student></student>
</div></template><script>
import school from './school.vue'
import student from "./student.vue"
export default {components: { school, student},name:'App'}
</script><style></style>
main.js:导入App组件。挂载dom
import App from "./App"new Vue({el:"#root",template:`<div><App></App></div>`,component:{App},})
index.html
<!DOCTYPE html>
<html><head></head><body><div id="root"></div></body><script src="js/vue.js"></script><script src="js/main.js"></script><script></script>
</html>
