1.建立以下文件：

1.School.vue


<template>
  <div class="demo">
    <h1>学校名称：{{ name }}</h1>
    <h1>学校地址：{{ address }}</h1>
    <button @click="showName">点我显示学校名</button>
  </div>
  <!-- 组件结构 -->
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
 export default {
  name: "School",
  data() {
    return {
      name: "掘金学校",
      address: "中国",
    };
  },
  methods: {
    showName() {
      console.log(this.name);
    },
  },
};
</script>

<style>
/* 组件样式 */
.demo {
  color: aqua;
}
</style>

2.Student.vue


<template>
  <div>
    <h1>学生姓名：{{ name }}</h1>
    <h1>性别{{ sex }}</h1>
    <button @click="showName">点我显示学生姓名</button>
  </div>
  <!-- 组件结构 -->
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  methods: {
    showName() {
      console.log(this.name);
    },
  },
};
</script>

3.App.vue


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

<script>
// 引入组件
import School from "./School";
import Student from "./Student";
export default {
  name: "App",
  components: { School, Student },
};
</script>

4.main.js


import App from './App.vue'

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

5.index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <script src="../JS/vue.js"></script>
    <script src="./main.js"></script>
</body>

</html>

2.初始化脚手架

第一步（仅第一次执行）：全局安装@vue/cli。


npm install -g @vue/cli

如出现下载缓慢请配置npm淘宝镜像


npm config set registry https://registry.npm.taobao.org

第二步：切换到你要创建项目的目录，然后使用命令创建项目


vue create xxxxx

第三步：启动项目


npm run serve

脚手架文件结构

3.将之前创建的School.vue、Student.vue、App.vue放到脚手架

将School.vue、Student.vue放到compunents文件夹，将App.vue放到src文件夹

更改一下App.vue中引入组件的路径

打开终端，执行npm run serve

如果执行npm run serve，出现这样的错误先ctrl C退出，把组件名和里面的name改成驼峰命名法，像我就改成MySchool.vue和MyStudent.vue,再执行npm run serve就可以了

复制链接粘贴到浏览器，就可以看到页面了

19.单文件组件