当青训营遇上码上掘金——用 Svelte 技术打造个人名片
刚学了一些前端基础，因为听说svelte是最近才新出的前端框架框架，所以先学习了这个框架。
并根据它的语法简单写了一个展示个人信息的组件。我用的是Github对外开放的API，获取我自己的Github个人信息，包括昵称，头像和个人简介，它可以让我们跨域访问，这样我们就不用自己写api了。
GitHub的开放API是 api.github.com/users/{用户名}… 在它返回的结果中，就会有bio，avatar，name几个字段，可以认为他们对应了昵称，头像，个人简介这三个部分。
Svelte 没有看到官方推荐的 UI 库，所以我只使用了浏览器原生提供的组件样式（其实是基本不怎么会自定义样式）。
我的想法比较简单，通过异步 Ajax 请求把我的头像之类的信息从GitHub的接口中获取到，然后让页面更新为我的个人信息。
代码主要部分是这样的，只有一个文件
<script>
import { onMount } from "svelte";
let name = "等待加载...";
let avatar_url = "xxxxxxxxx";
let bio = "等待加载...";
onMount(async () => {
try {
const response = await fetch(
"https://api.github.com/users/我的用户名"
);
const data = await response.json();
console.log(data);
name = data.name;
avatar_url = data.avatar_url;
bio = data.bio;
} catch (err) {
name = "加载失败";
bio = "加载失败";
}
});
</script>
<div>
<img src={avatar_url} alt={name} />
<h1>{name}</h1>
<p>{bio}</p>
</div>
可以看到我展示用的组件就是简单的img标签，h1标签和p标签。svelte我个人觉得很舒服，它使用普普通通的let定义就可以让这个变量具有所谓的响应式功能，我在代码里之后对他的修改都可以被它知道，然后自动修改。 我也看过vue的，貌似他还要特别的指定变量是能够做到这一点才行，而在svelte中，我只要像上面这样就行了。
最终效果：
