前端用vue调后端返回hello world！

前端使用Vue.js调用后端并获取“Hello World”通常涉及以下几个步骤：

1. **设置基础环境**：首先需要在项目中引入Vue，可以使用脚手架如Vue CLI创建新项目。

2. **路由配置**：在`src/router/index.js`文件中，创建一个简单的路由规则，指向后端API，例如：

   import Vue from 'vue';
   import Router from 'vue-router';

   const router = new Router({
     routes: [
       { path: '/hello', component: HelloWorld }
     ]
   });

   export default router;

3. **创建组件**：创建一个名为`HelloWorld.vue`的组件，用于显示后端返回的信息：

   <template>
     <div v-if="message">{{ message }}</div>
   </template>

   <script>
   export default {
     name: 'HelloWorld',
     data() {
       return {
         message: ''
       };
     },
     created() {
       this.fetchData();
     },
     methods: {
       fetchData() {
         axios.get('/api/hello') // 使用axios或其他HTTP库请求后端
           .then(response => (this.message = response.data))
           .catch(error => console.error('Error fetching hello:', error));
       }
     }
   };
   </script>

4. **后端接口**：在后端服务器（如Node.js、Express等），创建一个处理`GET /api/hello`请求的路由，返回"Hello World"：

   app.get('/api/hello', (req, res) => {
     res.send('Hello World');
   });

当运行Vue应用并访问`http://localhost:8080/hello`时，如果后端正常工作，将会显示“Hello World”。