在Nuxt项目中使用element-ui组件

处理数据加载的处理 我们网址最重要的自然就是美观 Nuxt项目因为基本就是以vue为骨架 所以 自然是最好配element-ui
这就需要你在创建项目时 一定要选择 element-ui

这样 你的项目就会有这样的一个UI组件工具

nuxt.config.js也会帮我们完成这方面配置

我们访问 element-ui官网去找自己需要的组件
我们就在这搜索

看到喜欢的 直接点击下面去拿代码

我们把代码放到项目上改一改

参考代码如下

<template>
  <div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
  </div>
</template>

<script>
import axios from "axios";
export default {
      
      
  name: 'IndexPage',
  data() {
      
      
    return {
      
      
      activeIndex2: '1'
    }
  },
  methods:{
      
      
    handleSelect(key, keyPath) {
      
      
      console.log(key, keyPath);
    }
  }
}
</script>

效果就是这样的

也是非常的简单