Element-UI侧边栏构建美观大方的Vue应用

2022-11-23 03:08:11

构建一个具有侧边栏的Vue应用，提升用户体验

创建一个新的Vue项目
安装Element-UI
创建主页的Header部分
创建主页的左侧部分
添加token，确保数据访问权限
发起请求获取左侧菜单数据
绘制左侧菜单UI
总结
常见问题解答

简介

在现代应用程序开发中，布局至关重要。侧边栏布局是一种流行的方式，可以帮助用户快速访问应用程序的功能和内容。Element-UI是一个受欢迎的Vue UI库，可以帮助您轻松构建美观大方的应用程序。本文将指导您使用Vue和Element-UI创建一个具有侧边栏的Vue应用。

1. 创建一个新的Vue项目

vue create my-app

2. 安装Element-UI

npm install element-ui --save

3. 导入Element-UI

在src/main.js文件中：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

4. 创建主页的Header部分

<template>
  <div class="header">
    <el-menu mode="horizontal">
      <el-menu-item index="1">主页</el-menu-item>
      <el-menu-item index="2">关于我们</el-menu-item>
      <el-menu-item index="3">联系我们</el-menu-item>
    </el-menu>
  </div>
</template>

5. 创建主页的左侧部分

<template>
  <div class="aside">
    <el-menu>
      <el-menu-item index="1">菜单1</el-menu-item>
      <el-menu-item index="2">菜单2</el-menu-item>
      <el-menu-item index="3">菜单3</el-menu-item>
    </el-menu>
  </div>
</template>

6. 添加token，确保数据访问权限

在src/api/index.js文件中：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000
})

instance.interceptors.request.use(config => {
  config.headers['Authorization'] = `Bearer ${token}`
  return config
})

instance.interceptors.response.use(response => {
  return response.data
})

export default instance

7. 发起请求获取左侧菜单数据

在src/components/Aside.vue文件中：

import api from '@/api'

export default {
  name: 'Aside',
  data() {
    return {
      menus: []
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      api.get('/menus').then(res => {
        this.menus = res.data
      })
    }
  }
}

8. 绘制左侧菜单UI

在src/components/Aside.vue文件中：

<template>
  <div class="aside">
    <el-menu>
      <el-menu-item v-for="menu in menus" :key="menu.id" :index="menu.id">{{ menu.name }}</el-menu-item>
    </el-menu>
  </div>
</template>