心知天气API官方网站
心知天气API官方网站
点击产品,选择天气数据,选择免费版的即可
![在这里插入图片描述](https://img-blog.csdnimg.cn/f99e003c2c554f2ca78263d419c406f8.png#pic_center)
如何使用?
点击控制台,手动选择要添加的天气插件,即可自动生成代码,非常方便好用。
![在这里插入图片描述](https://img-blog.csdnimg.cn/1f5d07f8132c474eb8a9dcdee8364fea.png#pic_center)
生成代码,可直接复制使用。
![在这里插入图片描述](https://img-blog.csdnimg.cn/a655d2cb8cf741908d69d2e24750dff0.png#pic_center)
效果预览
![在这里插入图片描述](https://img-blog.csdnimg.cn/d674327375e043d4ae802fff665b4b23.png#pic_center)
整合到Vue中
代码示例,这里将天气插件封装成一个组件weather,要在使用的地方进行调用即可。本示例仅供参考。
<template>
<div id="tp-weather-widget"></div>
</template>
<script>
export default {
name: "weather",
mounted() {
(