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

美丽的樱桃裙

已于 2024-06-24 19:23:19 修改

阅读量6.1k

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js

于 2023-12-15 21:09:05 首次发布

本文链接：https://blog.csdn.net/G55331337547/article/details/135024730

本文介绍了如何在Vue3项目中集成vue3-mini-weather组件，包括全局和局部引入方式，以及如何修改组件样式，以实现实时天气状况的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在逛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;
}

效果：