如何使用Vue和Element-UI快速开发功能丰富的管理后台

如何使用Vue和Element-UI快速开发功能丰富的管理后台

在如今这个互联网时代，管理后台是企业很常用的一种应用程序。它是企业的核心控制中心，可以保障企业的正常运转。而开发管理后台有一个非常好用的前端框架可以使用——Vue.js。通过Vue.js，可以快速地创建丰富的用户界面，并且可以轻松地与第三方组件库——Element-UI集成，从而使管理员可以快速进行管理，提升工作效率。

1. 环境配置

Element-UI是Vue.js的一个组件库，集成了丰富的UI组件，开发出美观、实用的管理后台非常方便。在开发环境中，首先需要使用npm安装Vue.js和Element-UI。

代码：

# 在项目中安装Vue.js

npm install vue
# 安装Element-UI组件库
npm install element-ui

在完成安装后，配置webpack将Element-UI组件库引入项目中：

代码：

{

    test: /\.vue$/,
    loader: 'vue-loader'
},
{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
},
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'file-loader',
    options: {
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'file-loader',
    options: {
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
},
{
    // 注意element-ui的css文件路径
    test: /\.css$/,
    use: [
        "style-loader",
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                plugins: [
                    require("autoprefixer")()
                ]
            }
        },
        {
            loader: "sass-loader",
            options: {
                implementation: require("sass")
            }
        }
    ],
    include: [/node_modules/]
},

2. 创建管理后台

在创建Vue.js的管理后台应用程序时，我们可以使用Vue CLI快速生成一个基础的Vue.js应用。在应用程序目录下，执行下面的命令：

代码：

# 创建管理后台应用程序

vue create my-admin

创建成功后，可以启动应用程序并查看效果：

代码：

# 启动管理后台应用程序

cd my-admin
npm run serve

在浏览器中访问http://localhost:8080，可以看到一个欢迎页面，表示管理后台应用程序启动成功。

3. 集成Element-UI组件库

集成Element-UI组件库非常容易。只需要在main.js文件中引入Element-UI的样式和JavaScript文件即可：

代码：

import Vue from 'vue';

import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
    render: h => h(App)
}).$mount('#app');

4. 创建管理后台页面

有了Element-UI组件库之后，可以开始创建管理后台的页面。在创建之前，可以使用vue-cli生成基本的管理后台页面：

# 创建vue组件

vue create HelloWorld

代码：

<template>

    <div class="hello">
        <el-alert title="Hello World" :closable="false" type="success"></el-alert>
    </div>
</template>
<script>
    import HelloWorld from "@/components/HelloWorld.vue";
    export default {
        name: "App",
        components: {
            HelloWorld
        }
    };
</script>

在代码中，使用了一个el-alert组件。这个组件是Element-UI组件库中的一个控件，用于显示警告信息。可以使用类似的方法创建其他页面。可以使用vue-router和vuex来管理页面和状态。

5. 实现管理后台的功能

实现管理后台的功能需要使用Vue.js和Element-UI组件库提供的功能。可以定义页面组件、创建路由和API连接，然后使用Element-UI组件库中提供的控件和样式来实现各种管理后台功能。

5.1 定义页面组件

定义页面组件可以将功能分割成一个内容单独的组件，这样有利于管理和复用。可以在/src/views目录下创建页面组件。

例如，创建一个Dashboard组件：

代码：

<template>

  <div class="dashboard">
    <el-card class="box-card">
      <div slot="header">
        <span>Dashboard</span>
        <el-dropdown class="dropdown-custom">
          <i class="el-icon-setting"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>Option 1</el-dropdown-item>
            <el-dropdown-item>Option 2</el-dropdown-item>
            <el-dropdown-item>Option 3</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="box-content">
        <div class="box-item">
          Active Users
          <h2>{{ users }}</h2>
        </div>
        <div class="box-item">
          Total Sales
          <h2>{{ sales }}</h2>
        </div>
        <div class="box-item">
          Total Revenue
          <h2>{{ revenue }}</h2>
        </div>
        <div class="box-item">
          New Users Today
          <h2>{{ newUsers }}</h2>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'Dashboard',
  data () {
    return {
      users: 3000,
      sales: 12840,
      revenue: '$92,521.33',
      newUsers: 132
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  .box-card {
    width: 100%;
    .el-card__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26px;
      font-weight: 600;
    }
    .box-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 24px;
      .box-item {
        width: calc(100% / 4 - 16px);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        border-radius: 4px;
        margin-bottom: 16px;
        padding: 16px;
        .el-icon {
          font-size: 36px;
          color: #409EFF;
        }
        h2 {
          margin-top: 8px;
          font-size: 18px;
          font-weight: 500;
          color: #333333;
        }
        p {
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
}
</style>

在这个代码中，使用了Element-UI组件库中的el-card、el-dropdown、el-dropdown-menu、el-dropdown-item和el-icon等组件。

5.2 创建管理后台页面路由

创建路由可以将每个页面组件与对应的URL关联起来。可以在/src/router/index.js文件中定义关联。

例如，创建一个Dashboard页面的路由：

代码：

import Vue from 'vue'

import VueRouter from 'vue-router'
import Dashboard from '@/views/Dashboard'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

在这个代码中，将根路径/与Dashboard组件关联。

5.3 连接API

API是管理后台的重要组成部分。在这个过程中，可以使用Axios来处理API请求。可以在/src/utils/request.js文件中定义Axios实例。

例如，定义API：

代码：

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.BASE_API,
    timeout: 15000
})
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log(error)
    }
)
service.interceptors.response.use(
    response => {
        const res = response.data
        if (res.code !== 20000) {
            console.log('error')
            return Promise.reject(new Error('error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error)
        return Promise.reject(error)
    }
)
export default service

在这个代码中，Axios将使用process.env.BASE_API变量作为API请求的基本路径。拦截器用于处理请求和响应，以确保请求连接通畅。

总结

在本文中，介绍了如何使用Vue.js和Element-UI组件库来快速构建丰富的管理后台。Vue.js和Element-UI组件库可以帮助管理员快速构建UI，并提供API连接、路由控制和状态管理等重要功能。通过实现页面组件，创建路由和连接API，管理员可以轻松地管理企业。这是一个非常适合需要快速构建管理后台的企业的优秀解决方案。