处理数据加载的处理 我们网址最重要的自然就是美观 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>
效果就是这样的
也是非常的简单