如何创建一个Vue应用 修改首页，加上学号与姓名

要在Vue应用程序中创建一个修改首页，并添加学号和姓名的功能，首先你需要安装Vue CLI（命令行工具），然后通过它初始化一个新的项目。以下是简单的步骤：

1. **安装Vue CLI**:
如果你还没有安装，打开终端（Mac/Linux）或命令提示符（Windows），运行：

   npm install -g @vue/cli

2. **创建Vue项目**:
创建一个新的Vue项目，例如命名为"student-info":

   vue create student-info

按照提示选择默认选项即可。

3. **导航到项目目录**:

   cd student-info

4. **进入`src/components`文件夹**:

   cd src/components

5. **创建`Home.vue`组件**:
新建一个名为`Home.vue`的文件，内容如下，用于显示学号和姓名：

   <template>
     <div>
       <h1>学生信息</h1>
       <input type="text" v-model="name" placeholder="请输入姓名">
       <input type="text" v-model="studentNumber" placeholder="请输入学号">
       <button @click="updateInfo">保存信息</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         name: '',
         studentNumber: ''
       };
     },
     methods: {
       updateInfo() {
         // 这里你可以将数据发送给父组件或者API
         console.log('Name:', this.name, 'Student Number:', this.studentNumber);
       }
     }
   }
   </script>

6. **在`App.vue`中引入并使用`Home`组件**:
打开`src/App.vue`，将`<router-view>`标签换成`<home></home>`，并在适当的位置导入和使用`Home`组件：

<template>
  <div id="app">
    <home />
  </div>
</template>

<script>
import Home from './components/Home.vue';

export default {
  components: {
    Home
  }
};
</script>

7. **启动并查看应用**:
回到根目录，运行：

   npm run serve

现在你应该能看到新的首页，可以输入姓名和学号，点击保存。