用vue做一个天气预报页面

好的，下面是一个简单的天气预报页面的vue实现。

首先，你需要在你的项目中安装axios和vue-router，以便获取天气数据和进行页面路由。

然后，你需要创建一个组件来显示天气信息。在这个组件中，你可以使用axios来获取天气数据，并将其渲染到页面上。

<template>
  <div>
    <h2>天气预报</h2>
    <div v-if="loading">正在加载中...</div>
    <div v-if="!loading && weather">
      <h3>{{ weather.city }}</h3>
      <p>{{ weather.weather }}</p>
      <p>{{ weather.temp }}°C</p>
      <p>{{ weather.wind }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      weather: null,
      loading: true,
    };
  },
  async mounted() {
    const response = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city=北京');
    this.weather = response.data.data;
    this.loading = false;
  },
};
</script>

在这个组件中，我们使用了一个loading变量来控制当天气数据被加载时显示的文本。我们还使用了async/await来等待axios获取天气数据的响应，然后将响应数据存储在组件的data中，并将loading变量设置为false以显示天气信息。

现在，你可以在你的vue路由器中创建一个路由来显示这个组件。

import Vue from 'vue';
import Router from 'vue-router';
import Weather from '@/components/Weather';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Weather',
      component: Weather,
    },
  ],
});

最后，你需要在你的应用程序中使用这个路由器，并将其挂载到一个DOM元素上。

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

现在，当你访问你的应用程序时，你将看到一个简单的天气预报页面。