写一个人员基本信息的添加、修改、删除的Vue3脚手架项目，该项目一个是信息添加页，另一个是数据管理页。使用Vuex进行数据存储，使用Router作为两个页面的路由

好的，我会为你提供一个Vue3脚手架项目的基本框架，让你进行人员基本信息的添加、修改、删除操作。

首先，我们需要安装Vue3脚手架工具。在命令行中执行以下命令：

npm install -g @vue/cli

安装完成后，我们可以使用以下命令创建项目：

vue create personnel-management-system

然后，我们需要安装一些必要的依赖：

cd personnel-management-system
npm install vuex vue-router --save

在项目的src文件夹下，创建两个文件夹pages和components，分别用于存放页面和组件。

在pages文件夹下，我们创建两个Vue页面组件：Add.vue和List.vue。Add.vue用于添加人员基本信息，List.vue用于展示已添加的人员基本信息。

Add.vue代码如下：

<template>
  <div>
    <h2>添加人员基本信息</h2>
    <<form>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <div>
        <label for="gender">性别：</label>
        <select id="gender" v-model="gender">
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model="age" />
      </div>
      <div>
        <label for="address">地址：</label>
        <input type="text" id="address" v-model="address" />
      </div>
      <button type="button" @click="addPersonnel">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      gender: 'male',
      age: '',
      address: '',
    };
  },
  methods: {
    addPersonnel() {
      // TODO: 调用Vuex store中的addPersonnel方法添加人员基本信息
    },
  },
};
</script>

List.vue代码如下：

<template>
  <div>
    <h2>人员基本信息列表</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(personnel, index) in personnelList" :key="index">
          <td>{{ personnel.name }}</td>
          <td>{{ personnel.gender }}</td>
          <td>{{ personnel.age }}</td>
          <td>{{ personnel.address }}</td>
          <td>
            <button type="button" @click="editPersonnel(index)">编辑</button>
            <button type="button" @click="deletePersonnel(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    personnelList() {
      // TODO: 从Vuex store中获取人员基本信息列表
      return [];
    },
  },
  methods: {
    editPersonnel(index) {
      // TODO: 跳转到编辑人员基本信息页面
    },
    deletePersonnel(index) {
      // TODO: 调用Vuex store中的deletePersonnel方法删除人员基本信息
    },
  },
};
</script>

接下来，我们需要在src文件夹下创建一个store.js文件，用于管理Vuex store中的数据。

store.js代码如下：

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      personnelList: [],
    };
  },
  mutations: {
    addPersonnel(state, payload) {
      state.personnelList.push(payload);
    },
    deletePersonnel(state, payload) {
      state.personnelList.splice(payload, 1);
    },
  },
  actions: {
    addPersonnel({ commit }, payload) {
      commit('addPersonnel', payload);
    },
    deletePersonnel({ commit }, payload) {
      commit('deletePersonnel', payload);
    },
  },
});

export default store;

最后，在src文件夹下的main.js中，我们需要引入Vue Router和Vuex store，并且将两个页面组件添加到路由中。

main.js代码如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App).use(router).use(store).mount('#app');

现在，我们已经完成了Vue3脚手架项目的基本框架，可以开始进行人员基本信息的添加、修改、删除操作了。