vue下拉菜单不现实下拉框及内容

使用了element-ui的el-dropdown组件，但是不显示任何内容，只显示span内的字段和符号。换了点击触发也没用，重新换过element-ui的版本，也无效果。求指点一下。

img

main.js里面引用了dropdown。若直接复制对应版本（2.15.7）的dropdown组件过来也没有反应。同时浏览器会报错。

img

img


（重新引入dropdown组件后不会显示第一类错误了，但是依旧没有反应）

img

img

<template>
  <div>
    <el-menu
      :default-active="currentPath"
      router
      mode="horizontal"
      background-color="white"
      text-color="#222"
      active-text-color="red"
      style="min-width: 1300px">
      <span style="padding-top: 14px;float:left;font-size: 25px;font-weight: bold;width:180px;">CSL - Sales</span>
      <el-menu-item style="text-align:center;" v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
      <div v-if="showUsername">
        <el-dropdown style="padding-top: 12px;float:right;" trigger="click">
          <span style="padding-top: 5px;font-size: 20px;width:90px;">{{showUsername}}</span>
          <i class="el-icon-arrow-down"></i>
          <el-dropdown-menu slot-scope="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
  export default {
    name: 'NavMenu',
    data () {
      return {
        navList: [...],
        keywords: ''
      }
    },
    computed: {
      hoverBackground () {
        return '#ffd04b'
      },
      currentPath () {
        var x = this.$route.path.indexOf('/', 1)
        if (x !== -1) {
          return this.$route.path.substring(0, x)
        } else {
          return this.$route.path
        }
      },
      showUsername () {
        return Cookies.get('name')
      }
    },
    methods: {
    }
  }
</script>

1.没有 引入 这些组件吧
el-dropdown-menu
el-dropdown-item
https://element.eleme.cn/#/zh-CN/component/menu