构建一个vue3项目,在页面上显示神州十八号3位航天员的图片与名字，并对十八号乘组人员说一句祝福语简单

在Vue3项目中创建一个简单的页面来展示神州十八号三位航天员的信息，你可以按照以下步骤操作：

1. **设置环境**：
- 首先确保已经安装了Node.js和Vue CLI，可以运行`npm install -g @vue/cli`来全局安装Vue CLI。

2. **创建项目**：
- 运行`vue create my-project-name` 创建一个新的Vue项目。
- 进入项目目录：`cd my-project-name`。

3. **配置路由**：
- 如果你的项目还没有配置路由，可以在`src/router/index.js`里添加一个基本的路由，例如访问 `/astronauts` 显示航天员信息。

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/astronauts',
    name: 'Astronauts',
    component: () => import('./views/Astronauts.vue')
  }
]
export default createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

4. **创建组件**：
- 在`src/components`文件夹下创建一个名为`Astronauts.vue`的新组件，结构如下：

<template>
  <div class="astronauts-container">
    <h2>神舟十八号乘组成员</h2>
    <div v-for="(astronaut, index) in astronauts" :key="index">
      <img :src="astronaut.avatar" alt="航天员图片" class="astronaut-avatar" />
      <p>{{ astronaut.name }}</p>
      <button @click.prevent="sayBlessing(astronaut)">对他们说：一路平安！</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      astronauts: [
        // 添加三位航天员的数据，包括名字和图片URL
        { name: '翟志刚', avatar: 'path/to/zhigang.jpg' },
        { name: '王亚平', avatar: 'path/to/yaping.jpg' },
        { name: '叶光富', avatar: 'path/to/yeguangfu.jpg' },
      ],
    };
  },
  methods: {
    sayBlessing(astronaut) {
      alert(`向${astronaut.name}送上祝福：祝你们太空之旅一切顺利！`);
    },
  },
};
</script>

<style scoped>
.astronauts-container {
  display: flex;
  flex-wrap: wrap;
}
.astronaut-avatar {
  width: 150px;
  height: 150px;
  margin-right: 20px;
}
</style>

5. **在App.vue中引入并导航到组件**：
- 在`src/App.vue`中导入并使用`router-view`标签。

现在，当你访问`http://localhost:8080/astronauts`，你会看到神州十八号三位航天员的照片和名字，并能点击按钮给他们发送祝福。