可视化大屏天气显示（和风天气）

1.复制链接，打开下边网址

https://widget.qweather.com/

2.选择需要的天气样式，点击创建，进入该页面，根据需要修改右边参数

3.点击生成代码，得到代码，粘贴复制进自己的项目中

4.完整代码

<template>
  <div class="weather">
    <div id="he-plugin-simple"></div>
    <remote-script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?                        
    v=2.0">
    </remote-script>
  </div>
</template>

<script>
window.WIDGET = {
  CONFIG: {
    modules: "1024",
    background: "5",
    tmpColor: "#ffffff",
    tmpSize: "16",
    cityColor: "#ffffff",
    citySize: "16",
    aqiColor: "#ffffff",
    aqiSize: "16",
    weatherIconSize: "40",
    alertIconSize: "16",
    // "padding": "10px 10px 10px 10px",
    shadow: "0",
    language: "auto",
    fixed: "false",
    vertical: "center",
    horizontal: "center",
    key: "53f8ea2b91f1464d9e8de93217390bf8",
  },
};
import Vue from "vue";
Vue.component("remote-script", {
  render: function (createElement) {
    var self = this;
    return createElement("script", {
      attrs: {
        type: "text/javascript",
        src: this.src,
      },
      on: {
        load: function (event) {
          self.$emit("load", event);
        },
        error: function (event) {
          self.$emit("error", event);
        },
        readystatechange: function (event) {
          if (this.readyState == "complete") {
            self.$emit("load", event);
          }
        },
      },
    });
  },
  props: {
    src: {
      type: String,
      required: true,
    },
  },
});
</script>
<style>
.weather {
   width: 220px;
}
</style>

不用这种方式也行，按自己的需要导入即可。上述代码仅提供参考。