vue elementui实现管理后台

使用 Vue 和 Element UI 实现管理后台

初始化项目

使用 Vue CLI 创建一个新项目，确保已安装 Vue CLI。运行以下命令创建项目：

vue create admin-dashboard

进入项目目录后，安装 Element UI：

cd admin-dashboard
npm install element-ui

引入 Element UI

在 main.js 中引入 Element UI 并注册：

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

Vue.use(ElementUI);

设计布局

创建一个基础布局组件，通常包括顶部导航栏、侧边栏和内容区域。在 src/components 下创建 Layout.vue：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="1"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span>Dashboard</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span>Forms</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background: #409EFF; color: white;">
        <span>Admin Dashboard</span>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Layout',
};
</script>

配置路由

在 src/router/index.js 中配置路由，将布局组件作为根路由：

import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/components/Layout';
import Dashboard from '@/views/Dashboard';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Dashboard',
          component: Dashboard,
        },
      ],
    },
  ],
});

创建页面组件

在 src/views 下创建页面组件，例如 Dashboard.vue：

<template>
  <div>
    <h3>Dashboard</h3>
    <el-card>
      <p>Welcome to the admin dashboard.</p>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
};
</script>

表格和表单

Element UI 提供了丰富的表格和表单组件。在 src/views 下创建 Users.vue 展示表格：

<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="email" label="Email"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'John', email: 'john@example.com' },
        { name: 'Jane', email: 'jane@example.com' },
      ],
    };
  },
};
</script>

集成 API 调用

使用 axios 调用后端 API。安装 axios：

npm install axios

在 src/services/api.js 中创建 API 服务：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

export default {
  getUsers() {
    return api.get('/users');
  },
};

响应式设计

Element UI 的布局组件支持响应式设计。通过调整 el-aside 和 el-main 的宽度，可以适配不同屏幕尺寸。结合媒体查询优化移动端体验：

@media (max-width: 768px) {
  .el-aside {
    width: 100px !important;
  }
}

部署项目

构建项目并部署到服务器：

npm run build

将生成的 dist 文件夹内容上传到服务器。