实现一个最简单最基本的指定城市查询天气功能

1. 首先，你需要注册一个 OpenWeatherMap 账号，获取一个 API 密钥

1. 安装 axios 来处理 HTTP 请求。

2. ​
   npm install axios
   pnpm install axios
   yarn axios
   
   ​

   2. 在 Vue 组件中使用 axios 发送请求并获取天气数据

3. 1. 
                  
      
                     城市: {{weatherData.name}}, {{weatherData.sys.country}}
      
                     温度: {{Math.round(weatherData.main.temp) }}°C
      
                     气压: {{weatherData.main.pressure}} hPa
      
                     湿度: {{weatherData.main.humidity}} %
      
                     天气: {{weatherData.weather[0].description }}
                  
                  
      
                    加载中...
                  
                

   ts 代码

4. import {onMounted, ref} from 'vue'
   import axios from 'axios'
   
   const weatherData = ref(null)
   onMounted(async () => {
     try {
       const apiKey = 'APIKEY' // 替换为你的 API 密钥
       const url = `http://api.openweathermap.org/data/2.5/weather?q= 安康 &appid=${apiKey}&units=metric`
       const response = await axios.get(url)
       weatherData.value = response.data
     }
     catch (error) {console.error('Error fetching weather:', error)
     }
   })