假设你是一名前端开发工程师，请你使用vue2和elementUI实现 系统公告页面，该页面默认显示已有公告，并且支持教师管理员新增、删除、编辑公告，学生无权限对公告进行操作，只可以查看公告。每条公告应包含标题、发布者和公告内容

好的，我可以为你提供一个基本的系统公告页面的实现思路。首先，我们需要安装Vue2和ElementUI这两个依赖项。

npm install vue@2.6.12
npm install element-ui@2.14.1

接下来，我们可以创建一个公告页面组件 `NoticeBoard`，并在该组件中使用 ElementUI 的表格组件来展示公告列表。同时，我们还需要使用 ElementUI 的对话框组件来实现新增、编辑、删除公告的功能。

<template>
  <div>
    <el-table :data="notices" style="width: 100%">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="author" label="发布者"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog :visible.sync="dialogVisible" title="新增公告">
      <el-form :model="currentNotice" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="currentNotice.title"></el-input>
        </el-form-item>
        <el-form-item label="发布者">
          <el-input v-model="currentNotice.author"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="currentNotice.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [
        { title: '公告1', author: '管理员1', content: '这是公告1的内容' },
        { title: '公告2', author: '管理员2', content: '这是公告2的内容' },
        { title: '公告3', author: '管理员3', content: '这是公告3的内容' },
      ],
      dialogVisible: false,
      currentNotice: { title: '', author: '', content: '' },
      currentIndex: -1
    }
  },
  methods: {
    handleEdit(index, row) {
      this.currentIndex = index
      this.currentNotice = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleDelete(index, row) {
      this.notices.splice(index, 1)
    },
    handleAdd() {
      if (this.currentIndex === -1) {
        this.notices.push(this.currentNotice)
      } else {
        this.notices.splice(this.currentIndex, 1, this.currentNotice)
      }
      this.currentIndex = -1
      this.currentNotice = { title: '', author: '', content: '' }
      this.dialogVisible = false
    }
  }
}
</script>

在上面的代码中，我们定义了一个 `notices` 数组来保存所有的公告信息。同时，我们还定义了一个 `dialogVisible` 变量来控制新增/编辑公告的对话框的显示和隐藏。`currentNotice` 变量用来保存当前正在编辑或新增的公告信息，`currentIndex` 变量用来保存当前正在编辑的公告的索引。

在 `handleEdit` 方法中，我们首先将当前编辑的公告信息复制一份，然后将对话框的可见性设置为 `true`，以便用户进行编辑。在 `handleDelete` 方法中，我们使用 `splice` 方法从公告列表中删除指定索引的公告。

在对话框中，我们使用一个表单来收集用户输入的公告信息。在点击 "确定" 按钮时，我们会根据 `currentIndex` 变量的值来判断是新增公告还是编辑公告。如果 `currentIndex` 的值是 -1，说明当前是在新增公告，我们就将当前公告信息添加到 `notices` 数组中；否则，我们就使用 `splice` 方法替换指定索引的公告信息。最后，我们清空 `currentIndex` 和 `currentNotice` 变量，并将对话框的可见性设置为 `false`。

最后，我们需要根据当前用户的角色来判断是否显示新增/编辑/删除公告的按钮。我们可以使用 `v-if` 或 `v-show` 指令来控制这些按钮的显示和隐藏。

这样，一个基本的系统公告页面就完成了。当然，这只是一个简单的示例，实际上，我们还需要考虑很多其他的问题，比如数据的存储、权限的控制等等。