组件（Component）是 Vue.js 最强大的功能之一。
非单文件组件：一个文件中有n个组件
单文件组件：一个文件只有1个组件 后缀为.vue 一个文件就是一个组件
单文件组件代码清晰 复用性长。
<body>
<div id="box">
<ss></ss>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//写组件，组件中含有自己的数据自己的格式
const school = Vue.extend({
// 组件结构
template: `
<div><p>学校：{{schoolName}}</p>
<p>学生·：{{stu.stuName}}</p></div>
`,
// 函数式传值
data() {
return {
schoolName: "春苗",
stuName: "李佳琪",
stu: {
stuName: "李琪"
}
}
}
})
// 全局注册组件
// 传入两个参数，一个是组件用的时候名，一个是定义时的组件名
Vue.component("ss",school)
var demo = new Vue({
el: "#box",
// 局部将定义好的组件注册到vue中
components: {
school: school
}
})
</script>
</body>单文件组件文件结构：
文件为.vue结尾的文件
<template>
<!-- 这里是html-->
<div>
主页
</div>
</template>
<script>
//这里是js
export default {
name: "IndexPage"
}
</script>
<style scoped>
/*这里是css*/
</style>
