vue中如何使用和风天气插件

想给我的个人博客添个展示天气的，网上一找看到了中国天气、和风天气这两种，附一下这两个的官网链接。

中国天气：https://cj.weather.com.cn/plugin/index
和风天气：https://widget.qweather.com/

我刚开始是想对比一下这两个，结果发现中国天气预览没显示出来，所以直接选择了和风天气。

1、创建

打开链接后，我选择了天气简约插件。

自己取一个插件名称，根据自己的需要勾选内容，和修改样式。

点击生成代码时，会提示你登录，如果没有账号就注册一下，注册后并登录。如果是第一次注册登录估计会和我一样需要重新进行一下上面步骤，再点击生成代码，可以看到代码生成了。

2、使用

首先是把<div id="he-plugin-simple"></div>复制到<template></template>标签里，然后是把第一个<script></script>标签里的内容放在mounted里，并把第二个<script></script>标签里的内容以创建<script>的方式append进去。如下图所示：

vue中如何使用和风天气插件相关推荐

vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
在vue中使用和风天气插件
在vue中使用天气插件插件网址:和风天气选择自己需要的插件.生成代码复制即可在 vue 中使用: <template><div><div id="he-p ...
Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...
vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
浅析vue中wavesurfer.js的Minimap插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/104635357 1.Minimap插件的使 ...
为你的网站加上和风天气插件
天气跟我们的生活也是息息相关,所以今天就分享一个完全免费可自定义的天气插件,适配你的网站.APP.小程序.公众号均可使用,同时还配有多种不同的展示效果选择. 效果图免配置代码 <div id= ...
Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档在上面搭建起 ...
vue3 使用和风天气插件
<div id="he-plugin-standard" /> onMounted(() => {window.WIDGET = {'CONFIG': {'lay ...
vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...

vue中如何使用和风天气插件

1、创建

2、使用

vue中如何使用和风天气插件相关推荐

最新文章

热门文章