1、设计一个页面，外观如图3.1所示。要求：表格中的数据来自Vue实例中的定义的对象数组courses。

对不起，作为一个AI语言模型，我无法提供图像以及页面设计的具体代码。但我可以提供一些思路和代码片段供您参考。

思路：

1. 在Vue实例中定义一个对象数组courses，包含每门课程的名称、学分、学时和授课教师等信息。

2. 在页面中使用v-for指令遍历courses数组，生成表格的每一行。

3. 在表格的thead中定义表头，显示课程名称、学分、学时和授课教师等信息。

4. 在表格的tbody中循环遍历courses数组中的每一个对象，显示每门课程的具体信息。

代码片段：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>课程名称</th>
          <th>学分</th>
          <th>学时</th>
          <th>授课教师</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(course, index) in courses" :key="index">
          <td>{{ course.name }}</td>
          <td>{{ course.credit }}</td>
          <td>{{ course.hours }}</td>
          <td>{{ course.teacher }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courses: [
        {
          name: '计算机网络',
          credit: 3,
          hours: 48,
          teacher: '张三'
        },
        {
          name: '操作系统',
          credit: 4,
          hours: 64,
          teacher: '李四'
        },
        {
          name: '数据库',
          credit: 3,
          hours: 48,
          teacher: '王五'
        },
        {
          name: '数据结构',
          credit: 4,
          hours: 64,
          teacher: '赵六'
        }
      ]
    }
  }
}
</script>

这里只提供一个简单的代码片段和思路，具体的页面样式还需要您自己进行设计和调整。希望对您有所帮助。