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>
![Nacos中feign.FeignException$BadGateway: [502 Bad Gateway]](http://pic.xiahunao.cn/Nacos中feign.FeignException$BadGateway: [502 Bad Gateway])
