当前位置：首页 > news >正文

【2025】使用vue构建一个漂亮的天气卡片

news 2025/7/26 15:17:51

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>