极简构建管理系统，Vue3+TS+ElementUI+MockJs数据表格轻松实现分页！

2024-02-05 19:30:54

前言

在现代开发中，构建一个高效、美观且功能强大的管理系统对于企业运营和团队协作尤为重要。作为前端开发工程师，使用Vue3、TypeScript和ElementUI构建管理系统可以极大地提升开发效率和系统性能。本文将以MockJs数据表格分页为例，详细介绍如何利用这些技术构建一个功能丰富的管理系统。

技术栈介绍

Vue3 ：Vue3是目前最受欢迎的前端框架之一，以其简洁的语法、高效的性能和丰富的功能受到广大开发者的喜爱。

TypeScript ：TypeScript是微软开发的一款强类型语言，在JavaScript基础上增加了类型系统，可以有效避免类型错误，提高代码质量。

ElementUI ：ElementUI是一款流行的前端UI框架，提供了丰富的组件库，可以帮助开发者快速构建美观的界面。

MockJs ：MockJs是一个模拟数据生成库，可以帮助开发者在开发和测试阶段生成模拟数据，非常适合构建数据表格。

项目搭建

1. 项目初始化

首先，使用Vue CLI初始化一个新的Vue3项目。

vue create vue3-elementui-admin

2. 安装依赖

安装Vue3、TypeScript、ElementUI和MockJs：

npm install vue@3.2.35 typescript @element-plus/core @element-plus/components mockjs

3. 配置TypeScript

在tsconfig.json文件中添加如下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "preserve",
    "sourceMap": true,
    "allowJs": true,
    "strict": true
  }
}

4. 创建组件

在src/components目录下创建Table.vue组件，这是用于展示表格数据的组件。

<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue'
import Mock from 'mockjs'

export default {
  setup() {
    const tableData = ref(Mock.mock({
      'list|10': [{
        'id|+1': 1,
        'name': '@cname',
        'age|18-60': 18,
        'address': '@county(true)'
      }]
    }).list)

    return {
      tableData
    }
  }
}
</script>

5. 创建页面

在src/pages目录下创建Index.vue页面，这是用于展示表格数据的页面。

<template>
  <div>
    <h1>表格分页</h1>
    <Table />
  </div>
</template>

<script>
import Table from '@/components/Table.vue'

export default {
  components: { Table }
}
</script>