[vue]实现一个天气预报页面

前言

使用vue3 + element plus + axios。效果：

步骤

1. 创建项目并安装依赖

npm create vue@latestcd vue3-demo1
npm install
npm run devnpm install --save axios vue-axios
npm install element-plus --save

2. main.js全局引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.use(VueAxios, axios)
app.mount('#app')

3. vite.config.js中配置跨域代理

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],server: {proxy: {'/myApi': {target: 'https://apis.juhe.cn/',changeOrigin: true,rewrite: (path) => path.replace(/^\/myApi/, '')}}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

4. 编辑App.Vue。注意替换axios请求中的key。

<script setup>
import WeatherDemo from './components/WeatherDemo.vue'
</script><template><div><WeatherDemo/></div></template>

5. 编辑WeatherDemo.vue

<template><el-container class="container"><el-header><el-input placeholder="Please input" class="input" v-model="city"><template #prepend>城市名:</template></el-input></el-header><el-main class="main"><div class="today">今日:<span>{{ this.todayData.weather ?? this.plc }} {{ this.todayData.temperature ?? this.plc }}</span><span style="margin-left: 20px;">{{ this.todayData.direct ?? this.plc }}</span><span style="margin-left: 100px;">{{ this.todayData.date }}</span></div><div class="real"><span class="temp">{{ this.realtime.temperature ?? this.plc }}°</span><span class="realInfo">{{ this.realtime.info ?? this.plc }}</span><span class="realInfo" style="margin-left: 20px;">{{ this.realtime.direct ?? this.plc }}</span><span class="realInfo" style="margin-left: 20px;">{{ this.realtime.power ?? this.plc }}</span><span></span></div><div class="real"><span class="realInfo">空气质量: {{ this.realtime.aqi ?? this.plc }}</span><span class="realInfo" style="margin-left: 30px;">湿度: {{ this.realtime.humidity ?? this.plc }}</span></div><div class="future"><div class="header">5日天气预报</div><el-table :data="futureData" style="margin-top: 30px;"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="temperature" label="温度"></el-table-column><el-table-column prop="weather" label="天气"></el-table-column><el-table-column prop="direct" label="风向"></el-table-column></el-table></div></el-main></el-container>
</template><script>
export default {mounted() {this.axios.defaults.baseURL = '/myApi'this.requestData()},data() {return {city: "合肥",weatherData: {},todayData: {},plc: "暂无数据",realtime: {},futureData: []}},watch: {city() {this.requestData()}},methods: {requestData() {let city = encodeURI(this.city)let api = `/simpleWeather/query?key=xxx&city=${city}`this.axios.get(api).then((resp) => {console.log(resp.data)this.weatherData = resp.datathis.todayData = this.weatherData.result.future[0]this.realtime = this.weatherData.result.realtimethis.futureData = this.weatherData.result.future})}}
}
</script><style scoped>
.container {background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195));
}.input {width: 300px;margin-top: 20px;
}.today {font-size: 20px;color: white;
}.temp {font-size: 79px;color: white;
}.realInfo {color: white;
}.future {margin-top: 40px;
}.header {color: white;font-size: 27px;
}
</style>

参考

• 《循序渐进Vue.JS前端开发实战》