vue3 实现一个类似于VentuSky气象网站

Vue 3 是一个非常强大的前端框架，可以用来构建各种类型的应用，包括类似于VentuSky气象网站的应用。下面是一个简单的示例，展示如何使用Vue 3来实现一个类似的气象网站：

首先，你需要创建一个Vue 3应用。你可以使用Vue CLI来快速搭建一个初始项目，运行以下命令：

vue create weather-app

接下来，进入项目目录并启动开发服务器：

cd weather-app
npm run serve

然后，打开src/main.js文件，并添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

这段代码将创建一个Vue应用，并将其挂载到id为"app"的DOM元素上。

接下来，在src目录中创建一个名为App.vue的组件文件，并添加以下代码：

<template>
  <div class="weather-app">
    <h1>Weather App</h1>
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else>
      <div class="location">
        <input v-model="city" placeholder="Enter city name" />
        <button @click="search">Search</button>
      </div>
      <div v-if="error" class="error">{{ error }}</div>
      <div v-else class="weather-info">
        <h2>{{ weatherData.location }}</h2>
        <p>{{ weatherData.temperature }}°C</p>
        <p>{{ weatherData.description }}</p>
        <img :src="weatherData.icon" :alt="weatherData.description" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      loading: false,
      error: '',
      weatherData: null,
    };
  },
  methods: {
    async search() {
      if (!this.city) return;
      this.loading = true;
      this.error = '';

      try {
        const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${this.city}`);
        const data = await response.json();

        if (response.ok) {
          this.weatherData = {
            location: data.location.name,
            temperature: data.current.temp_c,
            description: data.current.condition.text,
            icon: data.current.condition.icon,
          };
        } else {
          this.error = data.error.message;
        }
      } catch (error) {
        this.error = 'An error occurred. Please try again later.';
      }

      this.loading = false;
    },
  },
};
</script>

<style scoped>
.weather-app {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.location {
  display: flex;
  margin-bottom: 20px;
}

.error {
  color: red;
}

.weather-info {
  text-align: center;
}

.weather-info h2 {
  margin-bottom: 10px;
}

.weather-info img {
  width: 50px;
}
</style>

这段代码定义了一个名为WeatherApp的Vue组件，用于展示天气信息。它包含一个输入框和一个按钮，用于搜索城市的天气信息。当用户点击搜索按钮时，会触发search方法，该方法会使用fetch函数从WeatherAPI获取天气数据，并将其显示在页面上。

请注意，上述代码中的API密钥需要替换为你自己的密钥。你可以在WeatherAPI网站上注册一个免费账户并获取API密钥。

最后，在App.vue同级目录下创建一个名为.env.local的文件，并添加以下内容：

VUE_APP_API_KEY=YOUR_API_KEY

这样，你就可以在代码中使用`process.env.VUE_APP_API_KEY`来获取API密钥。

这只是一个简单的示例，你可以根据自己的需求对其进行扩展和定制。希望能对你有所帮助！