vue+element-ui通用后台管理系统（适合新手）

**Vue + Element-UI 通用后台管理系统**

作为一个新手，想要快速搭建一个后台管理系统可能会感到困难。然而，使用 Vue 和 Element-UI 可以轻松实现这一目标。本文将指导你如何创建一个通用的后台管理系统。

###项目结构首先，我们需要建立一个基本的项目结构。我们将使用 Vue CLI 来创建一个新项目。

bashnpm install -g @vue/clivue create my-admin-system

选择 "Manually select features"，然后选择 "Babel", "ESLint", "Prettier", "Router", "Vuex" 和 "Linter / Formatter in save".

接下来，我们需要安装 Element-UI。

bashnpm install element-ui --save

### 布局和路由下一步是创建一个基本的布局和路由。我们将使用 Vue Router 来管理我们的路由。

首先，创建 `src/router/index.js` 文件：

javascriptimport Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
 path: '/',
 name: 'index',
 component: Layout,
 redirect: '/dashboard',
 children: [
 {
 path: 'dashboard',
 name: 'Dashboard',
 component: () => import('@/views/dashboard/index')
 },
 {
 path: 'table',
 name: 'Table',
 component: () => import('@/views/table/index')
 }
 ]
 }
 ]
})

接下来，我们需要创建一个基本的布局。我们将使用 Element-UI 的 `Layout` 组件。

在 `src/layout/index.vue` 文件中：

html<template>
 <div class="layout">
 <!-- Header -->
 <el-header height="60px">
 <div class="header-left">
 <img src="@/assets/logo.png" alt="Logo">
 <span>后台管理系统</span>
 </div>
 <div class="header-right">
 <el-dropdown trigger="click" @command="handleCommand">
 <i class="el-icon-user"></i>
 <span slot="title">用户名</span>
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="logout">退出登录</el-dropdown-item>
 </el-dropdown-menu>
 </el-dropdown>
 </div>
 </el-header>

 <!-- Main -->
 <el-main>
 <router-view></router-view>
 </el-main>

 <!-- Footer -->
 <el-footer height="40px">
 <span>Copyright2023</span>
 </el-footer>
 </div>
</template>

<script>
export default {
 methods: {
 handleCommand(command) {
 if (command === 'logout') {
 //退出登录逻辑 }
 }
 }
}
</script>

<style scoped>
.layout {
 height:100vh;
}

.header-left {
 display: flex;
 align-items: center;
 margin-right:20px;
}

.header-right {
 display: flex;
 align-items: center;
 justify-content: flex-end;
}

.el-main {
 padding:0;
}
</style>

### 页面组件接下来，我们需要创建一些页面组件。我们将使用 Element-UI 的 `Table` 组件。

在 `src/views/table/index.vue` 文件中：

html<template>
 <div class="table">
 <!-- Table -->
 <el-table :data="tableData" style="width:100%">
 <el-table-column prop="date" label="日期" width="180"></el-table-column>
 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>

 <!-- Pagination -->
 <div class="pagination">
 <el-pagination @current-change="handleCurrentChange"
 :current-page.sync="currentPage"
 :page-size="pageSize"
 layout="total, prev, pager, next"
 :total="total"
 ></el-pagination>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { date: '2022-01-01', name: 'John Doe', address: 'New York' },
 { date: '2022-01-02', name: 'Jane Doe', address: 'Los Angeles' }
 ],
 currentPage:1,
 pageSize:10,
 total:100 }
 },
 methods: {
 handleCurrentChange(val) {
 console.log(`当前页:${val}`)
 }
 }
}
</script>

<style scoped>
.table {
 padding:20px;
}

.pagination {
 margin-top:20px;
}
</style>

### 总结在本文中，我们创建了一个基本的后台管理系统，使用 Vue 和 Element-UI。我们建立了一个基本的项目结构，布局和路由，然后创建了一些页面组件。

这个系统可以作为一个基础来进行扩展和定制。您可以添加更多的功能和页面组件，以适应您的需求。

希望本文对您有所帮助！