Vue3 + Element Plus + Pinia 学生管理系统（完整步骤）

最新推荐文章于 2025-03-06 11:20:10 发布

原创最新推荐文章于 2025-03-06 11:20:10 发布 · 431 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

定制开发承接各种代码任务

📌 Vue3 + Element Plus + Pinia 学生管理系统（完整步骤）

🎯 1. 创建 Vue3 + Vite 项目

首先，使用 Vite 初始化 Vue3 项目。

# 创建 Vue 3 + Vite 项目
npm create vite@latest student-management --template vue

# 进入项目目录
cd student-management

# 安装依赖
npm install

# 安装 Vue Router、Pinia 和 Element Plus
npm install vue-router@4 pinia element-plus axios

# 启动开发服务器
npm run dev

📌 2. 配置 `main.js`

路径：src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import './style.css'; // 全局样式

const app = createApp(App);
app.use(router);
app.use(createPinia());
app.use(ElementPlus);
app.mount('#app');

📌 3. 配置 Vue Router

路径：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import StudentList from '../views/StudentList.vue';
import StudentAdd from '../views/StudentAdd.vue';

const routes = [
    { path: '/', component: HomeView },
    { path: '/students', component: StudentList },
    { path: '/add-student', component: StudentAdd }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

📌 4. 配置 Pinia 全局状态管理

路径：src/store/studentStore.js

import { defineStore } from 'pinia';

export const useStudentStore = defineStore('studentStore', {
    state: () => ({
        students: [
            { id: 1, name: '张三', age: 18, class: '高一(1)班' },
            { id: 2, name: '李四', age: 17, class: '高一(2)班' }
        ]
    }),
    actions: {
        addStudent(student) {
            this.students.push({ id: Date.now(), ...student });
        },
        deleteStudent(id) {
            this.students = this.students.filter(student => student.id !== id);
        }
    }
});

📌 5. 创建组件

5.1 轮播图组件

路径：src/components/Carousel.vue

<template>
  <el-carousel height="300px">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item" alt="轮播图" class="carousel-image" />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
const images = [
  '图片url',
  '图片url',
  '图片url',
];
</script>

<style scoped>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

5.2 侧边栏组件

路径：src/components/Sidebar.vue

<template>
  <el-menu router>
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/students">学生列表</el-menu-item>
    <el-menu-item index="/add-student">添加学生</el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu {
  width: 200px;
  height: 100vh;
  position: fixed;
}
</style>

5.3 学生表单组件

路径：src/components/StudentForm.vue

<template>
  <el-form :model="student" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="student.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input type="number" v-model="student.age" placeholder="请输入年龄"></el-input>
    </el-form-item>
    <el-form-item label="班级">
      <el-input v-model="student.class" placeholder="请输入班级"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const student = ref({ name: '', age: '', class: '' });

const emit = defineEmits(['submit']);

const submitForm = () => {
  emit('submit', student.value);
  student.value = { name: '', age: '', class: '' }; // 清空表单
};
</script>

📌 6. 创建页面

6.1 首页

路径：src/views/HomeView.vue

<template>
  <div>
    <h2>学生管理系统</h2>
    <Carousel />
    <el-button type="primary" @click="$router.push('/students')">查看学生列表</el-button>
    <el-button type="success" @click="$router.push('/add-student')">添加学生</el-button>
  </div>
</template>

<script setup>
import Carousel from '../components/Carousel.vue';
</script>

6.2 学生列表页

路径：src/views/StudentList.vue

<template>
  <div>
    <h2>学生列表</h2>
    <el-table :data="students" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></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="class" label="班级"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleteStudent(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useStudentStore } from '../store/studentStore';

const studentStore = useStudentStore();
const { students } = storeToRefs(studentStore);
const deleteStudent = (id) => studentStore.deleteStudent(id);
</script>

6.3 学生添加页

路径：src/views/StudentAdd.vue

<template>
  <div>
    <h2>添加学生</h2>
    <StudentForm @submit="addStudent" />
  </div>
</template>

<script setup>
import { useStudentStore } from '../store/studentStore';
import StudentForm from '../components/StudentForm.vue';
import { useRouter } from 'vue-router';

const studentStore = useStudentStore();
const router = useRouter();

const addStudent = (student) => {
  studentStore.addStudent(student);
  router.push('/students');
};
</script>