各位小伙伴大家好，今天哈士奇要为大家分享的是一个简单的天气小demo，在这段时间的学习中我们逐渐学习到了Vue Router的使用，所以接下来哈士奇希望通过这个项目帮助大家进行复习，并且实际上手完成一个简单的实战项目。
项目要求
今天我们的项目的要求是一个简单的展示界面，达到以下要求： 1.使用vite创建Vue项目 2.实时更新时间 3.实时更新天气信息
实际效果如图展示：
不知道大家是否已经有了想法了？？来和哈士奇一起看看这个代码吧！！！
前期准备
1.使用Vite创建Vue项目
bash
npm create vite@latest weather -- --template vue首先我们在终端中创建名字为weather的Vue项目
代码结构
在这里我们需要创建一个Router文件夹用于存放Router文件，创建一个Home视图，其他的不变，只需要和自动创建的差不多。
2.注册高德地图API
我们需要在控制台中申请创建一个自己的API
进入我的应用，点击创建新应用
新建应用以后，在新建的应用里面添加key
点击web端
最后确认以后就创建好了我们的代码
代码实现
1.index.js
js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/home',
name:'home',
component:()=>import('../views/Home.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router这段代码是使用 Vue Router 4 的方式来创建一个简单的路由器。
-
import { createRouter, createWebHistory } from 'vue-router'：这里使用了 ES6 的模块导入语法，从vue-router中导入了createRouter和createWebHistory。 -
const routes = [...]：这里定义了一个路由配置数组，数组中的每个对象表示一个路由配置。在这个示例中，只有一个路由配置对象，它定义了一个路径为/home的路由，名称为'home'，并指定了组件为'../views/Home.vue'。这意味着当用户访问/home路径时，将加载Home.vue组件。 -
const router = createRouter({ ... })：这里使用createRouter函数创建了一个路由器实例。函数接受一个配置对象作为参数，其中包括路由的history、routes和其他选项。 -
history: createWebHistory()：createWebHistory()创建了一个基于 HTML5 History API 的路由历史模式。这意味着路由将不再使用哈希模式（/#/），而是使用类似于传统 URL 的路径。 -
routes：这里传入了之前定义的路由配置数组。 -
export default router：最后，使用export default将路由器实例导出，以便在应用程序中使用。
综上所述，这段代码的作用是创建一个基本的 Vue Router 实例，配置了一个简单的路由规则，使得当用户访问 /home 路径时，会加载 Home.vue 组件。
2.Home.vue
vue
<template>
<div class="container">
<div class="nav">
<div class="time">{{ localtime }}</div>
<div class="city">切换城市</div>
</div>
<div class="city-info">
<div class="city-name">{{ weatherData.city }}</div>
<div class="wether">{{weatherData.weather}}</div>
<h2 class="temp">
<em>{{ weatherData.temperature }}</em>℃
</h2>
<div class="detail">
<span>风力：{{weatherData.windPower}}级</span> |
<span>风向：{{ weatherData.windDirection }}风</span> |
<span>空气湿度：{{weatherData.humidity}}%</span>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return {
localtime: '00:00',
weatherData:{}
}
},
created() {//钩子函数 生命周期
setInterval(() => {
this.localtime = new Date().toLocaleTimeString();
}, 1000);
this.initAMap();
},
methods: {
initAMap() {
let that = this;
AMapLoader.load({
key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.CitySearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
//加载天气查询插件
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result);
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getLive(result.city, function (err, data) {
console.log(err, data);
that.weatherData = data;//this指向丢失的时候通过指定其他变量改变回来
//err 正确时返回 null
//data 返回实时天气数据，返回数据见下表
});
});
}
});
});
})
}
}
}
</script>
<style lang="css" scoped>
.container {
min-height: 100vh;
background-color: #000;
opacity: 0.6;
color: #fff;
}
.nav {
overflow: auto;
padding: 10px;
}
.time {
float: left;
}
.city {
float: right;
}
.city-info {
text-align: center;
padding: 20px;
}
.temp {
font-size: 26px;
/* margin: 20px 0; */
}
.temp em {
font-style: normal;
font-size: 34px;
}
</style>这段代码是一个基于 Vue.js 的天气查询应用，通过高德地图的 API 查询用户所在城市的实时天气信息，并实时更新页面上显示的时间和天气信息。
-
模板部分（Template）：
- 使用了 Vue.js 的模板语法，包含了页面的结构和数据绑定。
localtime：用于显示当前时间，通过setInterval每秒更新一次。weatherData：用于存储获取的天气信息，包括城市名、天气、温度、风力、风向和空气湿度。
-
脚本部分（Script）：
- 导入了
AMapLoader模块，该模块用于加载高德地图的 JavaScript API。 - 在
created钩子函数中初始化了地图，并通过高德地图的CitySearch插件获取用户所在城市信息，并根据城市信息使用Weather插件获取实时天气数据，并将数据保存在weatherData中。
- 导入了
-
样式部分（Style）：
- 使用了一些简单的 CSS 样式来美化页面，包括设置背景颜色、文字颜色等。
总体来说，这段代码实现了一个简单的天气查询应用，展示了 Vue.js 的数据绑定、生命周期钩子函数的使用，以及如何使用第三方库来实现一些功能。
3.App.vue
vue
<template>
<div>
<!-- 所有配了路由的.vue文件都展示这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {}
}
}
</script>
scoped样式私有化 如果存在的话只会影响所在vue文件
<style lang="css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>这段代码是一个简单的 Vue 组件，包含了一个 <template>、一个 <script> 和一个 <style> 部分。
-
<template>：这里定义了组件的模板部分，包含一个<div>元素和一个<router-view>组件。<router-view>是 Vue Router 提供的组件，用于显示当前路由对应的组件内容。因此，当你在应用中切换路由时，对应路由的组件内容会显示在这里。 -
<script>：这里是组件的 JavaScript 部分，使用了 ES6 的导出语法export default导出一个对象。这个对象包含了组件的配置选项，其中name属性指定了组件的名称为'App'，data方法返回一个空对象，表示组件没有任何数据。 -
<style>：这里是组件的样式部分，使用了<style>标签并指定了lang="css"表示使用 CSS 语言编写样式。scoped属性表示这个样式只会影响当前组件的元素，不会影响到其他组件的样式。在样式中，使用了通配符*来设置所有元素的外边距、内边距和框模型，使得它们都是统一的。
总的来说，这段代码定义了一个简单的 Vue 组件，作为应用的根组件，负责展示当前路由对应的内容，并且包含了一些全局样式设置。
4.main.js
js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')这里主要是挂载了所需的Vue文件并且把相应的所需的router导入到项目
index.html
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "你的安全密匙",
};
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>由于我们需要调用高德地图的api所以需要在相关的html和我们的文件里面导入api，千万不能忘记，否则可能会导致不显示数据。
总结
今天哈士奇为大家介绍了一个天气小demo的写法，大家可以从中加深对于Vue Router的认识，并且有助于大家做出更多模块去为自己的项目增加亮点。