vue中使用和风天气插件

1.进入和风天气官网，选择合适的插件

2.点击创建

3.根据需求修改样式

最后点击生成代码

4.代码为HTML文件，在vue中使用稍加修改

<template>
  <div id="he-plugin-standard"></div>
</template>

<script>
export default {
  name: "HeFengWeather",
  mounted() {
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "450",
        height: "150",
        background: "1",
        dataColor: "FFFFFF",
        key: "87251e7a703541909a1483f99b99b7a5"  //修改为你自己的key
      }
    };
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
    document.getElementsByTagName('body')[0].appendChild(script);
  }
}
</script>

5.运行结果