从零开始构建Vue 3 + Element Plus用户管理系统：完整开发指南

2401_85725782

已于 2025-05-25 15:17:06 修改

阅读量1k

点赞数 16

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-05-25 13:55:25 首次发布

本文链接：https://blog.youkuaiyun.com/2401_85725782/article/details/148203718

一、前言

在当今前端开发领域，Vue.js因其简单易用和强大的功能而广受欢迎。本文将手把手教你如何使用Vue 3和Element Plus构建一个完整的用户管理系统，涵盖从环境搭建到功能实现的完整流程。

二、开发环境准备

1. 安装Node.js环境

首先需要安装Node.js（推荐版本22.15.0），这是运行Vue项目的基础环境：

下载地址：https://nodejs.org/
安装包：node-v22.15.0-x64.msi（29.6MB）

安装完成后，在命令行验证安装：

node -v
npm -v

2. 配置Windows执行策略（可选）

如果你在使用Windows系统，可能需要修改执行策略以允许脚本运行：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

三、项目初始化

1. 创建Vue 3项目

使用Vite作为构建工具，它能提供极快的启动和热更新速度：

npm init vite@latest

或使用Vue官方脚手架：

cnpm init vue@latest

在创建过程中，你需要：

输入项目名称（如Vue-basic）
选择包含的功能（按空格选择，回车确认）

2. 配置CNPM镜像

为加速依赖安装，可以使用国内的npm镜像：

npm install -g cnpm --registry=https://registry.npmmirror.com

四、Element Plus集成

1. 安装Element Plus

Element Plus是专为Vue 3设计的UI组件库：

cnpm install element-plus @element-plus/icons-vue

2. 全局配置

在main.ts/main.js中全局引入Element Plus：

五、核心功能实现

1. 用户查询表单

使用Element Plus的表单组件构建查询区域：

2. 用户数据表格展示

使用Element Plus的表格组件展示用户数据：

3. 分页功能实现

集成Element Plus的分页组件：

六、数据交互逻辑

组件脚本部

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

// 响应式数据
const tableData = ref([])
const total = ref(0)
const pageSize = ref(10)
const formInline = reactive({
  address: '',
  minAge: null,
  maxAge: null
})

// 加载数据
const loadData = async (pageNum = 1) => {
  try {
    const { data } = await axios.get('http://113.45.160.83:8080/find', {
      params: {
        pageNum,
        address: formInline.address,
        minAge: formInline.minAge,
        maxAge: formInline.maxAge
      }
    })
    tableData.value = data.records
    total.value = data.total
  } catch (error) {
    console.error('数据加载失败:', error)
  }
}

// 查询提交
const onSubmit = () => {
  loadData()
}

// 重置表单
const reset = () => {
  formInline.address = ''
  formInline.minAge = null
  formInline.maxAge = null
  loadData()
}

// 分页变化
const handlePageChange = (pageNum: number) => {
  loadData(pageNum)
}

// 详情操作
const handleDetail = (row: any) => {
  console.log('查看详情:', row)
  // 实际项目中这里可以跳转到详情页或打开详情对话框
}

// 编辑操作
const handleEdit = (row: any) => {
  console.log('编辑:', row)
  // 实际项目中这里可以跳转到编辑页或打开编辑对话框
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

七、项目运行与调试

1. 安装项目依赖

cnpm i

2. 启动开发服务器

npm run dev

项目将默认运行在`http://localhost:5173`，你将看到一个功能完整的用户管理系统界面。项目运行结束后打开的网页结果：：

八、开发工具推荐

1. Visual Studio Code：微软推出的轻量级代码编辑器

2.Visual Studio Code必备插件：

Vue-official（原Volar） - 官方Vue语言支持
Element Plus Snippets - Element组件代码片段
ESLint - 代码规范检查
Prettier - 代码格式化

3. Element Plus插件：提供组件代码提示

九、总结与扩展

通过本文，我们完成了以下工作：

1. 搭建了Vue 3 + Vite的开发环境
2. 集成了Element Plus UI组件库及其图标
3. 实现了用户数据的查询、展示和分页功能
4. 完成了与后端API的数据交互

Vue 3的Composition API和Element Plus的丰富组件库极大地提高了开发效率，使开发者能够专注于业务逻辑的实现。希望本文能为你的Vue项目开发提供有价值的参考。