创建组件示例代码： 创建一个老师发布的组件，例如TeacherPublish.vue，用于编辑课程信息并能保存。 学生端可以有StudentSign.vue组件，显示签到列表。

在Vue中，创建这两个组件的基本结构通常是这样的：

**TeacherPublish.vue** (老师发布组件)

<template>
  <div class="teacher-publish">
    <h2>发布课程</h2>
    <!-- 编辑表单部分 -->
    <form @submit.prevent="onSubmit">
      <input type="text" v-model="courseTitle" placeholder="课程标题">
      <textarea v-model="courseDescription" placeholder="课程描述"></textarea>
      <button type="submit">发布</button>
    </form>
    <p>已发布课程: {{ publishedCourses }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseTitle: '',
      courseDescription: '',
      publishedCourses: [],
    };
  },
  methods: {
    onSubmit(e) {
      e.preventDefault(); // 阻止默认提交
      const newCourse = {
        title: this.courseTitle,
        description: this.courseDescription,
      };
      // 模拟保存到服务器
      this.saveToServer(newCourse);
      this.courseTitle = '';
      this.courseDescription = '';
    },
    saveToServer(course) {
      // 这里需要添加实际的API调用
      // 比如 axios 或者 fetch
      // 例如：this.$http.post('/api/save-course', course).then(response => {
      //         this.publishedCourses.push(response.data);
      //     });
    },
  },
};
</script>

**StudentSign.vue** (学生签到组件)

<template>
  <div class="student-sign">
    <h2>课程签到</h2>
    <ul>
      <li v-for="attendance in attendanceData" :key="attendance.id">
        <span>{{ attendance.title }} - {{ attendance.studentName }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    attendanceData() {
      return this.$store.getters.allAttendances; // 假设这里有获取所有签到数据的方法
    },
  },
};
</script>

这里我们假设存在一个名为`allAttendances`的getter，用于从Vuex store中获取签到数据。请注意，上述代码仅供参考，实际开发中你需要连接到后端服务以获取和保存数据，并根据项目需求调整细节。