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 文件夹内容上传到服务器。
