使用vue制作一个漂亮的天气卡片插件

1. 核心框架：Vue

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

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

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

4. 最终效果

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

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>