xxx.vue以.vue结尾的文件是不能被浏览器直接运行的。需要将.vue文件进行加工处理转换成js文件再交给浏览器运行。
一个组件一般至少包换三个要素：

  1. html
  2. css
  3. js

Vue 提供了与之对应的三个标签：

  1. html：<template></template>组件的结构
  2. js：<script></script>组件交互相关的代码（数据、方法等等）
  3. css：<style></style>组件的样式

    3.1 创建 School.vue 组件

    创建组件要注意要将组件暴露export出去，其他地方才能调取的到自定义的组件
    暴露的方式：
    分别暴露：export const school = Vue.extend({})
    统一暴露：const school = Vue.extend({}); export {school }
    默认暴露：export default{}
    暴露名name:'School'最好跟文件名保持一致 ```vue 

  1. <a name="GaJlh"></a>
  2. # 3.2 创建 Student.vue 组件
  3. ```html
  4. <template>
  5.     <div>
  6.         <h2>学生姓名：{{name}}</h2>
  7.         <h2>学生年龄：{{age}}</h2>
  8.     </div>
  9. </template>
  11. <script>
  12.  export default {
  13.   name: 'Student',
  14.   data(){
  15.     return {
  16.       name: '张三',
  17.       age: 18
  18.     }
  19.   }
  20. }
  21. </script>

3.3 创建 App.vue 组件

App.vue 组件时管理所有组件的组件

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

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

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

3.4 创建 main.js

要创建一个 vm 也就是创建 Vue 实例

import App from './App.vue'

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

3.5 创建 index.html

准备一个容器，引入 vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>练习一下单文件组件的语法</title>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root"></div>
        <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
        <!-- <script type="text/javascript" src="./main.js"></script> -->
    </body>
</html>

以上是 Vue 基本的模块化开发，但这些还办法正常运行使用，因为浏览器识别不了.vue的文件，需要把这个文件放入脚手架中才能正常运行。