首页 > 其他分享 >vue3的天气组件vue3-mini-weather为何安装会报错?

vue3的天气组件vue3-mini-weather为何安装会报错?

时间:2024-08-25 09:26:06浏览次数:9  
标签:mini 大暴雨 100px weather 报错 vue3 icon

参考于:https://gitee.com/maocaoying_admin/vue3-mini-weather
安装上述地址的组件报错:


实现的效果图:

实现步骤:
1 将vue3-mini-weather的lib直接拿到自己的项目中来:

2将lib中的组件引入到自己项目中使用


点击查看代码
<template>
  <div class="section-income">
    <div class="container">
      <template v-for="(item, index) in weather" :key="index">
        <v-mini-weather class="v-weather">
          <template #default>
            <v-mini-weather-icon
              :icon="item.icon"
              class="v-weather-icon"
            ></v-mini-weather-icon>
            <span>{{ item.weather }}</span>
          </template>
        </v-mini-weather>
      </template>
    </div>
  </div>
</template>

<script setup>
import vMiniWeather from '@/lib/vMiniWeather.vue'
import vMiniWeatherIcon from '@/lib/vMiniWeatherIcon/vMiniWeatherIcon.vue'
import { ref } from 'vue'
const weather = ref([
  {
    weather: '晴',
    icon: 'd00'
  },
  {
    weather: '晴',
    icon: 'n00'
  },
  {
    weather: '多云',
    icon: 'd01'
  },
  {
    weather: '多云',
    icon: 'n01'
  },
  {
    weather: '阴天',
    icon: '02'
  },
  {
    weather: '阵雨',
    icon: '03'
  },
  {
    weather: '雷阵雨',
    icon: '04'
  },
  {
    weather: '雷阵雨伴有冰雹',
    icon: '05'
  },
  {
    weather: '雨夹雪',
    icon: '06'
  },
  {
    weather: '小雨',
    icon: '07'
  },
  {
    weather: '中雨',
    icon: '08'
  },
  {
    weather: '大雨',
    icon: '09'
  },
  {
    weather: '暴雨',
    icon: '10'
  },
  {
    weather: '大暴雨',
    icon: '11'
  },
  {
    weather: '特大暴雨',
    icon: '12'
  },
  {
    weather: '阵雪',
    icon: '13'
  },
  {
    weather: '小雪',
    icon: '14'
  },
  {
    weather: '中雪',
    icon: '15'
  },
  {
    weather: '大雪',
    icon: '16'
  },
  {
    weather: '暴雪',
    icon: '17'
  },
  {
    weather: '雾',
    icon: '18'
  },
  {
    weather: '冻雨',
    icon: '19'
  },
  {
    weather: '沙尘暴',
    icon: '20'
  },
  {
    weather: '小到中雨',
    icon: '21'
  },
  {
    weather: '中到大雨',
    icon: '22'
  },
  {
    weather: '大到暴雨',
    icon: '23'
  },
  {
    weather: '暴雨到大暴雨',
    icon: '24'
  },
  {
    weather: '大暴雨到特大暴雨',
    icon: '25'
  },
  {
    weather: '小到中雪',
    icon: '26'
  },
  {
    weather: '中到大雪',
    icon: '27'
  },
  {
    weather: '大到暴雪',
    icon: '28'
  },
  {
    weather: '浮尘',
    icon: '29'
  },
  {
    weather: '扬沙',
    icon: '30'
  },
  {
    weather: '强沙尘暴',
    icon: '31'
  },
  {
    weather: '霾',
    icon: '53'
  },
  {
    weather: '无',
    icon: '99'
  },
  {
    weather: '浓雾',
    icon: '32'
  },
  {
    weather: '强浓雾',
    icon: '49'
  },
  {
    weather: '中度霾',
    icon: '54'
  },
  {
    weather: '重度霾',
    icon: '55'
  },
  {
    weather: '严重霾',
    icon: '56'
  },
  {
    weather: '大雾',
    icon: '57'
  },
  {
    weather: '特强浓雾',
    icon: '58'
  },
  {
    weather: '雨',
    icon: 'd301'
  },
  {
    weather: '雪',
    icon: 'd302'
  }
])
</script>

<style lang="less" scoped>
.section-income {
  background-color: #fff;
  padding: 20px;
  .container {
    width: 1300px;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    .v-weather {
      display: flex;
      width: 100px;
      height: 100px;
      .v-weather-icon {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>

vue3-mini-weather 组件的实现依赖于lottie-web
需要安装依赖:npm install --save lottie-web

标签:mini,大暴雨,100px,weather,报错,vue3,icon
From: https://www.cnblogs.com/duocaishijie/p/18378671

相关文章

  • 解决typescript项目报错:找不到模块“xxx”或其相应的类型声明问题
    在TypeScript项目中遇到"找不到模块'xxx'或其相应的类型声明"的错误,通常意味着TypeScript编译器无法找到你尝试导入的模块,或者没有为该模块提供类型定义。以下是一些解决这个问题的方法:检查模块名称:确保你导入的模块名称是正确的,并且与你的文件系统中的模块名称一致。安装类......
  • ABC 368D Minimum Steiner Tree
    题意给你一颗由N个点组成的树,指定K个节点,求包含这K个节点的最小子树的大小思路考虑正难则反,我们从开始的树当中剪掉那些没有任何指定点的子树,剩下来的子树就是最小的、能包含所有指定节点的子树。关于剪去这个操作,就是dfs一旦遇到以当前节点为根的子树没有任何指定点时,就停止df......
  • 057、Vue3+TypeScript基础,页面通讯之父页面使用$refs修改子页面暴露的成员
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • Ros2 Moveit2 编译安装报错解决方案 - By not providing "Findgz_sim_vendor.cmake" i
    moveit_resources---stderr:gz_ros2_controlCMakeErroratCMakeLists.txt:27(find_package):Bynotproviding"Findgz_sim_vendor.cmake"inCMAKE_MODULE_PATHthisprojecthasaskedCMaketofindapackageconfigurationfileprovidedby"gz......
  • 056、Vue3+TypeScript基础,页面通讯之$attrs父类子类孙类互传数据和事件
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 053、Vue3+TypeScript基础,页面通讯之$attrs的使用
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 使用baidu加速镜像来加速pip安装的时候报错
    系统默认配置了百度的python加速镜像,地址是:https://mirror.baidu.com/pypi/simple发现在使用的时候报错:python3-mpipinstallpip-U--userLookinginindexes:https://mirror.baidu.com/pypi/simpleRequirementalreadysatisfied:pipin/usr/local/lib/python3.1......
  • Jenkins报错
    [808]Therewereerrorscheckingtheupdatesites:SSLHandshakeException:sun.secu解决方案(1)插件管理页面提示:Therewereerrorscheckingtheupdatesites:IOException:Unabletotunnelthroughproxy.Proxyreturins“HTTP/1.1400”image(2)插件管理页面提示:Therewer......
  • 精美的Vue3流程插件,欢迎使用。
    dawn-flow插件是博主使用Vue3自主封装的流程插件(持续迭代中)。截图:dawn-flow采用拖拽方式创建流程。dawn-flow,开放了2个属性和2个事件,具体如下:属性NodeBar:节点栏目,默认true,开启显示栏目ToolBar:工具栏目,默认true,开启显示栏目事件  @currentNodeDoubleClick:节......
  • QQ稳定运行秘籍:处理qbcore.dll错误,告别频繁报错
    在使用QQ时,如果遇到因qbcore.dll文件错误而导致的频繁报错问题,不必过于担心。以下是一些有效的处理方法和建议,帮助您恢复QQ的稳定运行:1.重新安装QQ应用程序qbcore.dll是QQ应用程序的一个关键动态链接库文件,负责与操作系统进行交互并支持QQ的运行。如果该文件出现错误或损坏......