vue3学习：查询城市天气预报案例（vite组合式实现）

前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个vite项目来实现，并且使用element-plus组件，把网页效果适当美化了一下，运行效果如图所示。

步骤如下：

一、新建项目

步骤如下：
1.以管理员方式运行VSCode，终端/新建终端，在终端中运行命令npm create vite@latest
2.输入项目名称weather ，选项设置选择Vue、Javascript。
3.依此执行下面命令

cd weather
npm install
npm run dev

（4）打开网址 http://localhost:5173/，看到如下图所示的网页，说明新建项目成功。
在这里插入图片描述
二、安装项目中用到的组件
在该项目中，用到了axios和element-plus，需要进行安装（需保持网络畅通），依次在终端中执行如下命令。
1.安装axios
npm install axios --save
2.安装element-plus
npm install element-plus --save
3.查看是否安装成功。打开package.json文件，如果dependencies出现如下选项，说明安装成功。
在这里插入图片描述

三、在App.vue中输入以下代码

1.template部分

程序初运行时，只显示一个输入框和查询按钮，这一部分使用element-plus制作，element-plus的具体使用可去官网查询。
在这里插入图片描述

<template><div id="container"><div id="search"><el-input v-model="cityName" placeholder="请输入城市名" class="inputText" /><el-button type="primary" @click="handleWeather(cityName)">查询</el-button></div><div class="weather"><div v-if="weatherInfo.city != ''"><h3><span>{{ weatherInfo.city }}</span>天气预报</h3><p><span>日期：</span><span>{{ weatherInfo.date }} {{ weatherInfo.week }}</span> </p><p><span>更新时间：</span><span>{{ weatherInfo.update_time }}</span></p><p><span>天气：</span><span>{{ weatherInfo.wea }}</span></p><p><span>空气质量：</span><span>{{ weatherInfo.air_level }}，</span><span v-if="weatherInfo.air_level == '优'">适宜出行</span><span v-else>不适合出行。</span></p><p><span>现在温度：</span><span>{{ weatherInfo.tem }}&#8451;</span></p><p><span>今日温度：</span><span>{{ weatherInfo.tem2 }}&#8451;～{{ weatherInfo.tem1 }}&#8451;</span></p><p><span>风向风力：</span><span>{{ weatherInfo.win }}，{{ weatherInfo.win_speed }}</span></p><p><span>降雨量：</span><span>{{ weatherInfo.rain_pcpn }}</span></p></div></div></div>
</template>

2.css部分

<style scoped>
.inputText {width: 240px;
}.weather p span:nth-child(1) {width: 100px;text-align: right;display: inline-block;
}
</style>

3.script部分

javascript"><script>
import axios from 'axios'
import { ref } from 'vue'
import { reactive } from 'vue'
import { toRefs } from 'vue'export default {name: 'App',setup() {const cityName = ref('')const infoData = reactive({weatherInfo: {city: '',date: '',week: '',update_time: '',wea: '',tem: '',tem1: '',tem2: '',win: '',win_speed: '',air_level: '',// air_tips:'',rain_pcpn: '',}})//create创建axios实例const instance = axios.create({baseURL: 'http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=？？？？？&appsecret=？？？？？'})//添加请求拦截器instance.interceptors.request.use((config) => {return config;}, (error) => {console.log("请求出错")           //请求出错时的处理return Promise.reject(error);})//添加响应拦截器instance.interceptors.response.use((response) => {if (response.status === 200 && response.data) {//响应成功时的处理console.log("响应成功")}return response}, (error) => {console.log("响应失败")              //响应失败时的处理return Promise.reject(error.response.data)})//async/await写法const handleWeather = async (name) => {cityName.value = nameconst res = await instance.get("/api",{params: {unescape: 1,version: 'v63',appid: '？？？？？',   //自己注册获得appsecret: '？？？？？',  //自己注册获得city: name}})console.log(res)infoData.weatherInfo.city = res.data.cityinfoData.weatherInfo.date = res.data.dateinfoData.weatherInfo.update_time = res.data.update_timeinfoData.weatherInfo.week = res.data.weekinfoData.weatherInfo.wea = res.data.weainfoData.weatherInfo.tem = res.data.teminfoData.weatherInfo.tem1 = res.data.tem1infoData.weatherInfo.tem2 = res.data.tem2infoData.weatherInfo.win = res.data.wininfoData.weatherInfo.win_speed = res.data.win_speedinfoData.weatherInfo.air_level = res.data.air_levelinfoData.weatherInfo.rain_pcpn = res.data.rain_pcpn}return {cityName,infoData,...toRefs(infoData),handleWeather}}
}
</script>