vue3获取当地天气

以下是使用Vue3获取当地天气的步骤：

1.安装axios和vue-axios库

npm install axios vue-axios --save

2.在Vue组件中引入axios和vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'

3.在Vue组件中使用vue-axios

export default {
  name: 'Weather',
  data() {
    return {
      local: {
        city: '',
        temperature: '',
        type: ''
      }
    }
  },
  mounted() {
    this.getWeather()
  },
  methods: {
    getWeather() {
      let that = this
      axios.get('https://www.tianqiapi.com/api/', {
        params: {
          version: 'v1',
          city: '成都',
          appid: '123456',
          appsecret: '123456'
        }
      }).then(function (response) {
        that.local.city = response.data.city
        that.local.temperature = response.data.data[0].tem
        that.local.type = response.data.data[0].wea
      }).catch(function (error) {
        console.log(error)
      })
    }
  },
  mixins: [VueAxios]
}

4.在Vue组件中使用获取到的天气数据

<template>
  <div>
    <p>城市：{{ local.city }}</p>
    <p>天气：{{ local.type }}</p>
    <p>平均温度：{{ local.temperature }}</p>
  </div>
</template>