最近想起来之前买的域名 huli.li 一直没有加内容，想至少要加一些内容，于是就去Codepen上面找灵感，碰巧就找到了一个白天黑夜切换的CSS小狐狸，就想到判断当前位置是否日落来切换小狐狸的白天黑夜状态，说干就干。

在网上搜了一些API，最终使用腾讯地图的API来通过IP获取经纬度位置（没有通过浏览器自带的Geolocation首先是支持度的问题，其次还需要用户同意和一段时间的定位，会比较麻烦），日出日落的API使用的是和风天气的API。项目使用的是Vite.js创建的Vue-ts项目。

以上为项目仓库，后面将不时引用一下，具体引用版本为v0.2.2

Vue 3 Setup 标签的使用

官方文档

一般默认的Vue项目的script标签都是这样的：

<script>
export default{
// ...
}
</script>

Vue 3 的setup标签可以直接不适用export default，直接在script标签里写内容并暴露给组件，而且不像之前的写法，数据在data()里、方法在methods里、钩子在另外的地方，写一个功能就要改三个地方，setup标签就可以很好的解决这个问题。

setup标签就是简单的把script标签上加上setup属性<script setup></script>

在setup标签中定义组件props

普通情况下需要使用props: string[] | object来定义Props，在setup标签中只需要用defineProps

const props = defineProps({ foo: String });

const props = defineProps<{foo: string}>(); // TS专用写法，尖括号里是interface

在项目仓库里查看：/src/components/Fox.vue Line 44-49（带默认值的方法），/src/components/Clock.vue L19,L21（不带默认值的方法）

在setup标签中使用响应式变量

以前要想创建响应式变量，需要找到data然后去加或者修改，现在可以在setup标签的任意地方使用ref来添加响应式变量：

import { ref } from 'vue'

const num = ref(0) // 函数参数为默认值，不传递则为undefined
const weather = ref<IWeather>(); // TS写法，尖括号传入变量类型

在项目仓库中查看：/src/App.vue L13-L15

在setup标签中使用生命周期的钩子

以往使用生命周期钩子就是直接在对应的生命周期函数的地方进行重写，而现在则是使用组合式API生命周期函数，例如beforeUnmounted：

import { onMounted } from 'vue';

onMounted(() => console.log('Mounted'));

在项目仓库中查看案例：/src/App.vue L59-L63

值得一提的是，在setup标签中的内容将会在组件创建时运行，也就是说组合式API生命周期函数没有beforeCreate和created的对应API，因为在setup标签中的语句的执行时期和它们一样（setup围绕beforeCreated和created运行）。setup中生命周期钩子对应表请看：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

使用TypeScript的原因

首先肯定TS是之后的趋势，多学习一下肯定是好的；然后就是……之前写项目TS用太多了导致面对返回体那么大的和风API不敢写了，就比如res.now.obsTime，如果不写好interface的话，写下一个”.”后面IDE是不会有提示和文档的，这样让我不太敢继续”点“下去，不知道对象到底会不会有这个属性，有了TS的话各种格式都非常的清晰，并且IDE也会有代码提示和文档，还有可能是空对象的报错，写起来也更放心。

项目中写的一个weather的interface：/src/data/interfaces/weather.ts，IDE效果：

使用Github Action自动构建并发布

之前就总想试试Github Action的自动构建，这次在网上查了一些资料，自己写了一个脚本，可以在仓库的这个文件看到。

不过还是遇到了一点问题，本地安装jQuery和和风天气图标的时候只给保存到了node_modules但是没保存到package.json里，导致在运行 npm install 之后总是缺少依赖导致构建失败，索性在安装依赖的时候同时执行安装命令一并安装了。/.github/workflows/main.yml L22-L24

 - name: Installing dependencies packages
        run: |
          npm install
          npm install jquery
          npm i qweather-icons

最终成果

在一些小的版本迭代后，最终有了现在的版本，这个版本有以下特性

• 获取当前的IP位置、天气和日出日落
• 每小时更新一次天气
• 小狐狸会在日出时醒来，日落后睡觉
• 日出日落如果跨天会自动更新

还加了一些控制台信息，主要是一些版权，如下

如果想要体验的话可以直接访问：https://huli.li/，也可以顺手给咱的仓库点个Star~