hbuilderx使用vue写学生管理页面

下面是使用 HBuilderX 和 Vue 编写一个学生管理页面的简单示例。

1. 创建 Vue 项目

在 HBuilderX 中创建一个新的 Vue 项目，选择 `Manually select features`，勾选 `Router` 和 `Vuex`，其余选项可以根据需要选择或不选择。创建完成后，在浏览器中运行项目，确保项目能够正常运行。

2. 创建学生管理页面

在 `src/views` 目录下创建一个名为 `StudentManage.vue` 的 Vue 组件，编写学生管理页面的代码，例如：

<template>
  <div>
    <h1>学生管理</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.age }}</td>
          <td>
            <button @click="edit(student)">编辑</button>
            <button @click="delete(student)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="add">添加学生</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', gender: '男', age: 18 },
        { id: 2, name: '李四', gender: '女', age: 19 },
        { id: 3, name: '王五', gender: '男', age: 20 },
      ],
    };
  },
  methods: {
    add() {
      // TODO: 添加学生
    },
    edit(student) {
      // TODO: 编辑学生
    },
    delete(student) {
      // TODO: 删除学生
    },
  },
};
</script>

该组件包含一个表格，用于显示学生的信息，以及添加、编辑和删除学生的功能。

3. 配置路由

在 `src/router/index.js` 中配置路由，将 `/student-manage` 路径指向 `StudentManage` 组件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import StudentManage from '@/views/StudentManage.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/student-manage',
    name: 'StudentManage',
    component: StudentManage,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

4. 添加菜单

在 `src/App.vue` 中添加一个菜单，用于导航到学生管理页面：

<template>
  <div id="app">
    <nav>
      <router-link to="/student-manage">学生管理</router-link>
    </nav>
    <router-view />
  </div>
</template>

5. 运行项目

在浏览器中运行项目，点击菜单中的 `学生管理`，进入学生管理页面，即可看到刚才编写的学生管理页面的效果。