vue cli实现天气预报

Vue CLI是一个用于快速构建基于Vue.js应用的脚手架工具，它可以帮助开发者更方便地初始化、配置和管理Vue项目。要使用Vue CLI实现一个简单的天气预报应用，你可以按照以下步骤操作：

1. **安装Vue CLI**:
使用npm或yarn全局安装Vue CLI：

   npm install -g @vue/cli

2. **创建新项目**:
运行`vue create weather-app` 创建一个新的Vue项目，选择默认选项即可。

3. **选择组件化结构**:
Vue CLI会生成一个基本的文件结构，包括`src/components`目录，这里可以创建一个名为`Weather.vue`的组件来显示天气信息。

4. **编写Weather组件**:
在`Weather.vue`文件中，使用`axios`或`fetch`等库从API获取天气数据，然后展示城市名、温度、天气状况等信息。例如：

   <template>
     <div>
       <h2>{{ city }} 天气</h2>
       <p>当前温度: {{ temperature }}°C</p>
       <p>天气描述: {{ description }}</p>
     </div>
   </template>

   <script>
   import axios from 'axios';

   export default {
     data() {
       return {
         city: '',
         temperature: '',
         description: ''
       };
     },
     async mounted() {
       try {
         const response = await axios.get('https://api.openweathermap.org/data/2.5/weather', {
           params: { q: '北京',appid: 'your_api_key'}
         });
         this.city = response.data.name;
         this.temperature = response.data.main.temp;
         this.description = response.data.weather[0].description;
       } catch (error) {
         console.error(error);
       }
     }
   };
   </script>

确保替换`'your_api_key'`为实际的OpenWeatherMap API密钥。

5. **在App.vue中引入并使用Weather组件**:
将`<Weather>`标签添加到`<main>`标签内，作为App.vue的子组件。

6. **运行项目**:
`cd weather-app`进入项目根目录，然后运行`npm run serve`（或`yarn serve`）启动开发服务器。