您需要对 HTML、CSS 和 JavaScript 有基本的了解，才能使用Coincap.io API使用 Svelte 构建您自己的简单加密价格跟踪器。
入门
继续使用CodeSandbox中的 Svelte 操场初始化我们的新项目，或者使用他们在Github上提供的样板之一。
# Creating a new project npx degit sveltejs/template # Install the dependencies... npm install
…然后启动汇总。
npm run dev
导航到 localhost:8080，您应该会看到您的应用正在运行。在 src 中编辑一个组件文件，保存它，然后重新加载页面以查看您的更改。
设置
我们的项目将使用 Svelte 编写的组件，使用包含 HTML、CSS 和 JavaScript 的.svelte文件。现在让我们通过创建我们的Card.svelte文件来做准备，并使用以下结构修改我们的 App 组件。
<script> <!-- JavaScript Logic --> </script> <style> <!-- CSS Styles --> </style> <!-- HTML Markup -->
我们的代码包含三个可选的主要部分。
- 一个
<script>块，其中包含在创建组件实例时运行的 JavaScript。- 将作用于该组件的
<style>块。 - 一个包含我们应用程序模板的
<main>块。
- 将作用于该组件的
我们的应用组件
我们将首先使用以下导入编辑 App.svelte，同时创建我们的空数组来存储我们的 Crypto 对象。
<script> import Card from "./Card.svelte"; import { onMount } from "svelte"; let cryptoData = []; </script> <style> main { font-family: sans-serif; text-align: center; } </style> <main> <h1>Crypto Price Widget</h1> <Card /> </main>
在这里，我们导入了以下内容：
-
<Card/>从 Card.svelte 中的 Card 组件初始化。 -
{onMount}通过网络处理我们的 api 请求。
接下来，我们将创建我们的 onMount 处理程序，以使用 JavaScript 的 fetch API 从端点发出获取请求，如下所示：
onMount(async () => { const data = await fetch(`https://api.coincap.io/v2/assets/`); const response = await data.json(); console.log(response); cryptoData = response.data; });
拼凑在一起时，您的 App 组件应包含以下内容：
<script> import Card from "./Card.svelte"; import { onMount } from "svelte"; let cryptoData = []; onMount(async () => { const data = await fetch(`https://api.coincap.io/v2/assets/`); const response = await data.json(); console.log(response); cryptoData = response.data; }); </script> <style> main { font-family: sans-serif; text-align: center; } </style> <main> <h1>Crypto Price Widget</h1> {#each cryptoData as crypto} <Card data={crypto}/> {/each} </main>
注意? – 检查控制台并查看我们的获取请求是否正常工作。
我们的卡片组件
我们将打开Card.svelte并创建我们的数据对象，该对象将导出到App.svelte中的卡片组件。接下来，我们将从 sveltestrap 中导入以下组件：
<script> import { Card, CardHeader, CardTitle, CardSubtitle, CardText} from "sveltestrap"; export let data; </script>
现在，如果您之前没有使用过 Sveltstrap 组件，那么我强烈建议您查看他们的文档。下一步是开始使用我们的组件，如下所示：
<Card class="container mb-3"> <CardHeader class="cryptoHeader"> <CardTitle>{data.symbol}</CardTitle> <CardSubtitle>{data.explorer}</CardSubtitle> </CardHeader> <CardText> ${data.priceUsd} </CardText> </Card>
注意? – 即使没有 css，您现在也应该能够从我们的 api 查看实时加密数据。
让我们添加以下样式来完成我们的 Card.Svelte 文件。
<style> :global(.container) { display: flex; justify-content: space-between; text-align: center; width: 100%; height: 20vh; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 20px; margin: 20px auto; transition: 0.2s; font-size: 1.4rem; } :global(.container:hover) { background-color: greenyellow; font-weight: bold; opacity: 0.04px; } :global(.cryptoHeader) { background-color: transparent; border: none; text-transform: uppercase; } @media (min-width: 640px) { :global(.container) { max-width: 1600px; padding: 40px 20px; } } </style>
回顾
如果你跟着，那么你应该已经完成了项目并完成了你的 Svelte Todo 应用程序。
现在，如果您做到了这一点，那么我将代码链接到我的沙箱，供您分叉或克隆，然后工作就完成了。
执照：?
这个项目是在麻省理工学院许可证（MIT）下。有关更多信息，请参阅许可证。
贡献
贡献总是受欢迎的……
- 分叉存储库
- 通过以下方式改进当前程序
- 改进功能
- 添加新功能
- bug修复
- 推送您的工作并创建拉取请求
有用的资源
https://sveltestrap.js.org/
https://svelte.dev/
https://github.com/sveltejs/template