基于 Vue.js 和 ElementUI 快速构建企业管理系统

企业管理系统通常包含大量的表单、表格、图表等元素，使用 Vue.js 配合 ElementUI 组件库可以极大提高开发效率。

项目搭建

首先使用 Vue CLI 创建项目：

vue create admin-system
cd admin-system
npm install element-ui axios nprogress js-cookie

目录结构

一个良好的目录结构有助于项目的维护和扩展：

src/
  api/            # API 请求
  assets/         # 静态资源
  components/     # 公共组件
  layouts/        # 布局组件
  router/         # 路由配置
  store/          # Vuex 状态管理
  styles/         # 全局样式
  utils/          # 工具函数
  views/          # 页面组件
  App.vue         # 根组件
  main.js         # 入口文件

集成 ElementUI

在 main.js 中完成 ElementUI 的引入：

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

Vue.use(ElementUI, { size: 'medium' })

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

构建典型页面

以用户管理页面为例，实现常见的 CRUD 操作：

<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.keyword"
        placeholder="用户名或姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80" />
      <el-table-column label="用户名" prop="username" align="center" />
      <el-table-column label="姓名" prop="name" align="center" />
      <el-table-column label="角色" prop="roleName" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button
            :type="row.status === 1 ? 'warning' : 'success'"
            size="mini"
            @click="handleStatusChange(row)"
          >
            {{ row.status === 1 ? '禁用' : '启用' }}
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 用户表单对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="80px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="temp.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="temp.password" type="password" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="temp.roleId" class="filter-item" style="width: 100%">
            <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

优化技巧

1. 组件拆分: 将复杂页面拆分为多个小组件，提高复用性和可维护性。
2. 按需加载: 配置路由懒加载，减小初始加载体积。
3. 表单验证: 充分利用 ElementUI 的表单验证功能。
4. 权限控制: 基于角色的访问控制，动态加载路由和菜单。
5. 主题定制: 根据企业 VI 定制 ElementUI 主题。

结论

Vue.js 配合 ElementUI 为企业管理系统开发提供了高效、统一的解决方案。合理的项目结构和组件设计能够大幅提升开发效率和系统可维护性。