和风天气api使用vue+html+js写一个天气预报

好的，我可以为您提供一个基于和风天气API的Vue天气预报示例。

首先，您需要在和风天气官网注册并创建一个应用，以获取访问API的key。

然后，您可以创建一个Vue项目，并安装axios和vue-axios插件来进行API请求。

接下来，您可以在Vue组件中编写代码来获取天气数据并渲染到页面上。以下是示例代码：

<template>
  <div class="weather">
    <h1>{{ city }}天气预报</h1>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div>当前温度：{{ temperature }}℃</div>
      <div>天气状况：{{ weather }}</div>
      <div>风向：{{ windDirection }}</div>
      <div>风力：{{ windLevel }}</div>
      <div>湿度：{{ humidity }}%</div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import VueAxios from 'vue-axios';

  export default {
    data() {
      return {
        city: '北京',
        loading: true,
        temperature: null,
        weather: null,
        windDirection: null,
        windLevel: null,
        humidity: null
      }
    },
    mounted() {
      this.getWeather();
    },
    methods: {
      getWeather() {
        const key = 'YOUR_API_KEY';
        const url = `https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=${key}`;
        this.$http.get(url).then(response => {
          const data = response.data.HeWeather6[0].now;
          this.temperature = data.tmp;
          this.weather = data.cond_txt;
          this.windDirection = data.wind_dir;
          this.windLevel = data.wind_sc;
          this.humidity = data.hum;
          this.loading = false;
        }).catch(error => {
          console.log(error);
        });
      }
    },
    plugins: [
      VueAxios,
      axios
    ]
  }
</script>

<style>
  .weather {
    text-align: center;
  }
</style>

在上面的代码中，您需要将`YOUR_API_KEY`替换为您的和风天气API key，并将`city`设置为您想要获取天气的城市名称。

最后，您可以在Vue根实例中引入该组件并将其渲染到页面上。

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

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

  export default {
    components: {
      Weather
    }
  }
</script>

这样，您就可以在Vue中使用和风天气API来获取天气预报了。