效果预览
创建流程
1. 创建项目目录
mkdir test2
2. 进入目录
cd test2
3. 引入vue
引入vue， 一路敲回车就行了
npm init vue@latest
4. 启动项目
创建成功，启动项目
cd vue-project
npm install
npm run dev
执行run 后的访问结果
> vue-project@0.0.0 dev
> vite
VITE v4.0.1 ready in 401 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
访问 http://localhost:5173/ 可以看到这个界面，就说明vue启动成功
5. 引入axios
先按control + c 退出运行界面， 然后引入axios
npm i axios
6. 粘贴axios请求天气代码
打开这个页面 /vue-project/src/components/HelloWorld.vue 把下面代码全部覆盖进去， 之前的删掉就行
<script>
import axios from 'axios';
export default {
data() {
return {
img: '',
weather: ''
}
},
mounted() {
let appid = '';//43656176
let appsecret = '';//I42og6Lm
console.log('mounted')
axios({
method: 'get',
url: 'https://v0.yiketianqi.com/api/worldchina?appid=' + appid + '&appsecret=' + appsecret
}).then(res => {
console.log(res.data);
this.weather = res.data
this.img = 'https://xintai.xianguomall.com/skin/peach/' + res.data.day.phrase_img + '.png';
});
},
}
</script>
<template>
<div v-if="weather" style="text-align: center;">
<img alt="Vue logo" class="logo" src="/src/assets/logo.svg" width="125" height="125" />
<h3>{{weather.city}} 今日天气</h3>
<h3>{{weather.month[0].night.temperature}}℃ ~ {{weather.month[0].day.temperature}}℃
<img v-bind:src="img" width="20" style="vertical-align: sub;" /> {{weather.day.phrase}}
</h3>
<p>空气质量：<a>{{weather.day.air_level}}</a> 气压：<a>{{weather.day.altimeter}}mb</a> 湿度：<a>{{weather.day.humidity}}%</a></p>
<p>白天：{{weather.month[0].day.narrative}}</p>
<p>夜间：{{weather.month[0].night.narrative}}</p>
<p style="padding: 30px 0; color:#999999;">数据来源：<a href="https://tianqiapi.com/index/doc?version=worldchina" target="_blank">Tianqiapi.com</a></p>
</div>
</template>
7. 重新启动项目
然后在执行 npm run dev 刷新下浏览器， 就可以看到天气接口请求成功了！
附天气api传参文档
| 参数名 | 必选 | 类型 | 说明 | 备注（示例） |
|---|---|---|---|---|
| appid | 是 | string | 用户appid | |
| appsecret | 是 | string | 用户appsecret | |
| cityid | 否 | string | 城市ID | 请参考 城市ID列表 |
| city | 否 | string | 城市名称 | 不要带市、区、县; 如: 青岛、铁西、梁山 |
| province | 否 | string | 所在省 | 防止city重名, 不要带省; 如: 山东、上海、广西 |
| ip | 否 | string | IP地址 | 查询IP所在城市天气 |
| lng | 否 | String | 经度 | 如: 119.545023 (需额外开通lbs权限) |
| lat | 否 | String | 纬度 | 如: 36.044254 |
| point | 否 | String | 坐标体系 | 默认百度坐标, 如使用高德坐标, 请传参: gaode |
| callback | 否 | string | jsonp参数 | 如: jQuery.Callbacks |
| vue | 否 | string | 跨域参数 | 如果您使用的是react、vue、angular请填写值: 1 |
