好用的天气组件：vue3-mini-weather

在逛github时发现一个非常好用的天气组件，可以实时呈现天气状况，可以应用到vue3项目中(gitHub中也有vue2版本的)，只需几行代码就可实现。

一、安装组件

npm i vue3-mini-weather --save

二、在项目中引入

1、全局引入

main.js文件：

import { createApp } from 'vue'
import App from './App.vue'
import weather from 'vue3-mini-weather'
createApp(App).use(weather).mount('#app')

app.vue项目文件：

<template>
  <v-mini-weather>
    <template #default="{weather, icon}">
      <!--插入图标-->
      <v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
      <!--DIY内容-->
      <span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
    </template>
  </v-mini-weather>
</template>

2、局部引入

app.vue 项目文件：

<template>
  <v-mini-weather>
    <template #default="{weather, icon}">
      <!--插入图标-->
      <v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
      <!--DIY内容-->
      <span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
    </template>
  </v-mini-weather>
</template>

<script setup>
import { vMiniWeather, vMiniWeatherIcon } from 'vue3-mini-weather'
</script>

三、如何修改样式：

/*修改存放图标和文本的大盒子的样式*/
.weather-info {
  display: flex;
  align-items: center;
}
/*修改图标样式*/
.weather-icon {
  width: 40px; 
  height: 40px; 
  margin-right: 10px; 
}
/*修改文本样式*/
.weather-text {
  color: #000;
}

效果：

源码地址：GitHub - hjiachuang/vue3-mini-weather: 基于Vue3.x开发的迷你实时天气预报组件