步骤1：

文件位置：Saber/src/mock/menu.js

新增菜单模块：

步骤2：

绑定对应模块路由：（与步骤1中的模块菜单名称对应）

在zh.js中添加新增菜单的名称：（与对应路由名称绑定）

新建一个页面，路径与步骤1中页面路径对应 （Saber/src/views/util/test.vue），编写页面：

完成效果图如下：

附上test.vue的完整测试代码：

<template>
  <div>
    <basic-container>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
      <br>
      <el-select v-model="value" clearable placeholder="请选择" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </basic-container>
  </div>
</template>

<script>
  import {getList} from '@/api/system/menu'
  export default {
    name: "wel",
    data() {
      return {
          options: [{
              value: '选项1',
              label: '黄金糕'
          }, {
              value: '选项2',
              label: '双皮奶'
          }, {
              value: '选项3',
              label: '蚵仔煎'
          }, {
              value: '选项4',
              label: '龙须面'
          }, {
              value: '选项5',
              label: '北京烤鸭'
          },{
              value: '选项6',
              label: '东坡肉'
          }],
          value: ''
      };
    },
    computed: {},
    created() {
      // 调用接口
      getList().then(res=>{
        console.log(res.data.data)
      })
    },
    methods: {
      onChange() {
        console.log(this.value)
      }
    }
  };
</script>

<style scoped="scoped" lang="scss">
</style>