1. 核心框架：Vue

Vue 以其轻量、易用、响应式数据绑定的特点，非常适合快速构建这类小型界面组件。即使是直接通过 CDN 引入，也能高效开发，降低项目复杂度，无需搭建完整工程化环境 。

2. 网络请求：Axios

用于发送 HTTP 请求获取天气接口数据，它在浏览器端使用简洁，支持 Promise 语法，能方便地和 Vue 结合处理异步数据获取。

3. CDN 替换

一开始用的 cdn.jsdelivr.net 可能存在访问不稳定情况，替换为 cdnjs.cloudflare.com，保障资源可靠加载 。

4. 最终效果

上代码, 复制保存为HTML直接打开就可以看到效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>天气卡片</title>

  <style>

    .weather-card{margin:50px auto;width:300px;background: rgb(213,243,255);

background: linear-gradient(360deg, rgba(213,243,255,1) 0%, rgba(248,253,255,1) 100%);border-radius:8px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,0.1);font-family:sans-serif}.location{display:flex;align-items:center}.location svg{width:24px;height:24px;margin-right:8px;fill:#fdb813}.temp{font-size:48px;font-weight:bold;margin:8px 0;width:65%}.desc{color:#666;width:35%;text-align:right;margin:15px 0 0}

  </style>

</head>

<body>

  <div id="app">

    <div class="weather-card">

      <div class="location">

        <svg t="1753281034305" style="width:24px;height: 24px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8458" width="32" height="32"><path d="M920.25920987 329.59374532a24.69356705 24.69356705 0 0 0-23.87821341-1.63070726l-79.32226019 36.34147603-46.59163593 21.60687116c-0.75711409 3.61085178-1.45598862 7.16346402-2.3295818 10.77431581-25.21772295 102.44335951-200.16931588 315.77481255-220.02900069 339.76950506-9.14360855 11.00727399-22.59694343 32.84710333-36.92387148 32.84710333s-27.72202338-21.83982933-36.86563193-32.84710333c-19.74320572-23.87821341-192.19049822-234.58888693-219.44660526-337.78936053-19.68496619-10.54135763-32.38118697-17.47186349-32.49766606-17.47186348a24.69356705 24.69356705 0 0 0-31.04167743-3.96028906l-87.35931738 54.51221405a24.69356705 24.69356705 0 0 0-11.64790898 21.02447572v428.17713423a24.7518066 24.7518066 0 0 0 35.29316421 22.36398525l228.47373472-113.45063349L628.77028755 931.3247234a24.6353275 24.6353275 0 0 0 23.29581798 0l266.73711572-143.85167594a24.69356705 24.69356705 0 0 0 13.04565806-21.7815898v-415.24795527a24.81004614 24.81004614 0 0 0-11.58966944-20.84975707z" fill="#8a8a8a" p-id="8459"></path><path d="M511.06816728 101.70240606a231.79338878 231.79338878 0 0 0-231.56043059 231.56043059 234.2976892 234.2976892 0 0 0 6.69754767 55.56052585c23.81997387 96.73588411 205.70207265 317.23080117 213.44793212 326.54912835a14.67636532 14.67636532 0 0 0 11.64790898 5.35803814 14.85108396 14.85108396 0 0 0 11.64790898-5.35803814c7.74585947-9.31832718 189.62795825-229.81324424 213.44793213-326.60736789a231.73514923 231.73514923 0 0 0-225.32879929-287.0627169z m0 311.17388849a79.6134579 79.6134579 0 1 1 79.6134579-79.6134579A79.6134579 79.6134579 0 0 1 511.06816728 412.99277364z" fill="#F8D247" p-id="8460"></path></svg>

        <span>{{ city }}</span>

      </div>

      <div style="display: flex;">

      <div class="temp">

        {{ temperature }}<span style="font-size:16px;vertical-align: text-top;">°C</span>

        <span style="font-size:16px;float:left;">

          <img :src="wea_img" style="width:50px; margin: 6px 5px 0 0;"/>

        </span>

      </div>

      <div class="desc">

        {{ weatherDesc }}<br>

        湿度 {{ humidity }}

      </div>

    </div>

      <div style="margin-top:8px; text-align: center;">

        <a href="javascript:;" @click="viewFull" style="color: #333;text-decoration: none;">查看完整预报</a>

      </div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: {

        city: '',

        temperature: '',

        weatherDesc: '',

        humidity: '',

        isLoading: true

      },

      created() {

        this.fetchWeatherData();

      },

      methods: {

        async fetchWeatherData() {

          try {

            // get接口里使用的appid和key请自行前往天气api注册

            const response = await axios.get('http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=55556666&appsecret=12341234');

            this.city = response.data.city;

            this.temperature = response.data.tem;

            this.weatherDesc = response.data.wea;

            this.wea_img = 'http://dps.tianqiapi.com/static/skin/apple/' + response.data.wea_img + '.png';

            this.humidity = response.data.humidity;

            this.isLoading = false;

            document.title = response.data.city + '天气卡片'

          } catch (error) {

            console.error('获取天气数据失败', error);

            this.isLoading = false;

          }

        },

        viewFull() {

          document.location.href='http://tianqiapi.com'

        }

      }

    });

  </script>

</body>

</html>

使用vue制作一个漂亮的天气卡片插件的更多相关文章

  1. 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

    来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...

  2. 用 Swift 制作一个漂亮的汉堡按钮过渡动画

    汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它.   这是 CreativeDash team 的原型图: 你可能已经注意到了,汉堡顶 ...

  3. IOS制作一个漂亮的登录界面

    上图是Facebook的登录界面,看起来很漂亮,eamil框和passwod框合在一起,那么这种效果是怎么做出来的呢?我们都知道输入框用layer属性是可以做成圆角的形式,那么怎么样才能够仅仅只让上边 ...

  4. css3制作一个漂亮的按钮

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69

  5. Vue实现一个图片懒加载插件（转载）

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  6. 制作一个轻量级的状态管理插件：Vue-data-state

    Vuex 是不是有点繁琐? Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较"复杂". 现 ...

  7. 制作一个功能丰富的Android天气App

    简易天气是一个基于和风天气数据采用MD设计的Android天气App.目前的版本采用传统的MVC模式构建.通过丰富多彩的页面为用户提供日常所需的天气资讯. 项目说明 项目放在github上面 地址是: ...

  8. PS网页设计教程XXIV——从头设计一个漂亮的网站

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  9. 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4

    在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...

  10. 给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

    给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化 标签: ajaxdictionaryjsonobject服务器function 2012-07-25 18:41 2242人阅读  ...

随机推荐

  1. 单服务器高性能模式：Reactor 与Proactor

    极客时间:<从 0 开始学架构>:单服务器高性能模式:Reactor 与Proactor 1.引言 单服务器高性能的 PPC 和 TPC 模式,它们的优点是实现简单,缺点是都无法支撑高并发 ...

  2. 1、Java相关工具下载及准备

    相关准备 oracle jdk8:oracle官网. IDEA:官网 Maven:官网,下第二个 Redis:windows, MySQL:官网归档, RabbitMQ:csdn Java环境配置 变 ...

  3. golang unsafe遇上字符串拼接优化导致的bug

    最近料理老项目的时候被unsafe坑惨了,这里挑一个最不易察觉的错误记录一下. 这个问题几乎影响近几年来所有的go版本,为了方便讨论我就用最新版的1.24.3做例子了. 线上BUG 我们有一个收集集群 ...

  4. C#LINQ去掉数组字符串中的指定元素

    例字符串: string s1 = "111,111,111222111,111333111,111"; string del = "111"; 要删除指定元素 ...

  5. iStore实现 SmartDNS + AdGuard Home IP优选+广告屏蔽

    iStore实现 SmartDNS + AdGuard Home IP优选+广告屏蔽 参考自openwrt 官方版 安装配置 AdGuard Home + smartdns 告别广告烦扰 教程 软路由 ...

  6. CentOS-7 通过 NFS 实现服务器之间的文件（目录）共享

    1.概述 NFS(Network File System):是在 UNIX(Linux)系统中最流行的网络文件系统,其功能是通过网络让不同的机器(或操作系统)可以共享彼此的文件或目录. 2.相关依赖组 ...

  7. ARP服务及欺骗

    ARP协议 定义:ARP(Address Resolution Protocol,地址解析协议)是一种网络协议,用于将网络层的IP地址映射为数据链路层的MAC地址.ARP协议在局域网中非常重要,因为网 ...

  8. 打工人神助攻！2025年最火OKR工具榜单，看板式目标管理必备

    OKR(目标与关键成果)已成为企业目标管理的标准框架,为确保OKR目标可落地,可视化.协作性强的工具需求激增.2025年,哪些OKR工具真正助力团队落地战略?本文盘点当下最火的5款OKR工具,帮助HR ...

  9. 2025盘古石决赛-计算机&手机

    手机取证 分析鸿蒙手机检材,打网球定的日期是?[标准格式:4月5日] 在日历数据中 3月3日 分析鸿蒙手机检材,哪个浏览器搜索过鸿蒙开发教程?[标准格式:百度浏览器] uc数据搜索过 UC浏览器 分析 ...

  10. WDA SEARCH step by step

    之前写了不少的东西,其实大多数都是给自己看的,我的习惯是把资料放到网上,用的时候直接看博客. 之前硬盘轻轻摔了一下,几年的资料没了,然后就再也不用硬盘了. 昨天有人突然问我关于WDA的问题,毕竟奇怪, ...