Vite + Vue

# 浅聊一下最近天气有点冷，给大家用vue做一个简单的天气预报小demo，记得多穿衣服哦各位！ ## 准备 1. 高德地图打开高德地图api([高德开放平台 | 高德地图API (amap.com)](https://lbs.amap.com/))，注册成为开发者点击控制台，左侧应用管理--我的应用中创建一个新应用，名字随意，绑定服务为web端 ![屏幕截图 2023-12-07 101936.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5f4c0308ad74bcabdb07fb4d240efe2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1858&h=848&s=62359&e=png&b=f8f9fa) 创建完之后，你就会拥有一个key，这个key在接下来大有用处 2. vue 来到你想创建文件的地方，打开你的DOS，使用npm命令安装vite - npm create vite@latest weather -- --template vue 安装完以后，你就可以看见你的文件夹里多了一个weather文件夹在vscode中打开，在终端输入 - npm run dev ## 动手 1. 实时天气界面由于我们这个简单的demo只有一个页面，所以我们直接在App.vue中写一个页面 html ```html ``` css样式： ```css ``` js代码： ```js ``` 做完这一步以后，我们的基础页面就打造好啦！不过这里显示的并不是我们填入的数据，在这里，主要看到页面效果就好。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68d0cb6dd2d64d7fa669e2409a9baa0b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=529&h=872&s=17156&e=png&b=666666) 可是，这里的内容是我们在代码中写死的内容，那我们怎么获取到实时天气情况呢？高德地图就派上了用场。 2. 导入高德地图我们先来到首页，在文档与支持中打开 JS api([概述-地图 JS API 2.0 | 高德地图API (amap.com)](https://lbs.amap.com/api/javascript-api-v2/summary)) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/054dbde5bc3b40dba9d193bfc57258e4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1873&h=997&s=280761&e=png&b=fefefe) 向下滚动找到城市定位和天气的服务 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24183d739d1743eea521e58f3d416ccf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1853&h=979&s=272167&e=png&b=ffffff) 你可以在里面看到关于城市定位的调用方法，按照他的提示复制粘贴到你的vscode里去。我们在这里主要使用的是AMapLoader，直接粘贴到vscode（注意，要填自己在一开始申请的key） ```js ``` 在index.html中，我们要添加key的密钥，在head中添加就可以了 ```html Vite + Vue ``` 当我们获取到天气信息和位置信息以后，在template中的内容就不能写死了 ```js ``` 写到这里，我们的小demo就完成了，来看看效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d645eecb76f42b0b6890ca5b525798a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=510&h=503&s=13017&e=png&b=666666) # 结尾本篇文章里向大家介绍了高德地图提供的一个定位服务和天气服务，掘友们要是有类似的需求，可以上高德地图js api上寻找你要的功能组件。

10℃

{{weatherData.temperature}}℃