原文：
towardsdatascience.com/how-to-leverage-sveltekit-skeleton-and-chart-js-for-rapid-prototyping-and-efficient-execution-8173f7356ce1
Svelte和SvelteKit是 React/Next 和 Vue/Nuxt 生态系统中快速增长的 Web 开发替代方案，对于注重快速原型设计、数据可视化和运行时高效执行的 Web 开发者和数据科学家来说，这是一套“必须了解”的技术。
https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/2bc00332559b0f9c17362eacb9daf148.png
由 DALL·E 生成 – 作者提示
Svelte的最大优势是其构建 Web 界面的独特方法 – 它在构建时将组件编译成高度高效的命令式代码，而不是依赖于运行时的虚拟 DOM。这导致了更快的运行时性能和更小的包大小。
React vs. Svelte vs. Vue: 2023 年商业中哪个更好？
而**Svelte是一种语言、编译器和*组件框架，**SvelteKit**是一个应用框架（或元框架），它解决了构建生产级应用的问题，包括路由、SSR、数据获取、Service Workers、预渲染、SPAs 等。
本文展示了 Svelte 和 SvelteKit 在示例服务器端渲染（SSR）Web 应用中的优势，包括Skeleton UI 工具包和Chart.js的高级图表功能。
这是一个 100%免费的设置，是学习并实验 SvelteKit、Skeleton 和 Chart.js 的绝佳起点。
我们最终的演示应用将基于一个 App Shell 中的三个网页，包括头部和 LeadSpace 组件，并展示两个可点击的响应式卡片，这些卡片将包含 Chart.js 图表示例：
https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/1908bafce052e12c2ef86eee0a4a9183.png
模板应用的着陆页 – 作者图片
在本文中，我将带您完成从零开始构建应用的必要步骤。对于急于求成的人，我建议从其 GitHub 仓库克隆，并直接跳到下面的部署到 Vercel章节。
GitHub – thomasreinecke/sveltekit-skeleton-chartjs: 代码仓库，用于 Medium 文章 "Svelte &…
一个运行中的演示已部署在此。
启蒙
我们将不直接使用 SvelteKit，而是使用 Skeleton CLI 来引导项目，这将为我们提供一个无缝集成的开发环境，包括 Svelte、SvelteKit、Tailwind 和 Skeleton，只需简单的一步：
>npm create skeleton-app@latest svelte-skeleton-boilerplate-step1*select Bare Bones starter*select the theme(I personally love Crimson)*add Tailwind forms,Tailwind topography,Add popups*add Type checkingwithTypescript*add Eslint,Prettier,Playwright,Vitest,Svelte Inspectorhttps://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/c15282f36e2160b38e01eac7012a7353.png
sveltekit 项目的配置——图片由作者提供
您现在可以安装项目依赖并本地启动应用：
>cd svelte-skeleton-boilerplate-step1# with yarn>yarn>yarn dev--open# with npm>npm install>npm run dev----open将您的浏览器指向其本地部署点，并期待看到以下内容：
https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/d7f5a4d7b935575cfafdf1f93264da77.png
sveltekit 项目欢迎页面——图片由作者提供
我们现在有一个使用 Svelte、SvelteKit、Skeleton 和 Tailwind CSS 的运行模板。现在让我们进入并使用基本头部和 Leadspace 组件来定制应用布局。我们还将添加一个更美观的着陆页和两个带有占位文本元素的公共路由：
添加基本布局、组件和路由
在我们开始布局之前，我们需要添加一些图标支持——在这个例子中，我们将包括 Iconify Svelte 图标和 FontAwesome icons 的免费版本。
我们还添加了对 svelte-chartjs 和 Chart.js 的依赖，用于图表绘制：
# with yarn>yarn add @iconify/svelte>yarn add @fortawesome/fontawesome-free>yarn add svelte-chartjs>yarn add chart.js# with npm>npm install @iconify/svelten>npm install @fortawesome/fontawesome-free>npm install svelte-chartjs>npm install chart.js让我们现在专注于应用布局：
应用布局 是一个伟大的 SvelteKit 概念，它允许在单个位置和全局范围内定义应在每个页面上可见的元素——例如顶级导航或页脚——而不是在每个页面的代码中重复它们。
应用布局适用于特定路由文件夹下的所有子页面，并且可以通过在路由层次结构的更深层级添加更多特定布局来扩展，从而有效地创建丰富的体验。
以下代码创建了一个 Skeleton AppShell，在页面顶部有一个 AppBar，包含页面名称和图标以及几个操作。SvelteKit 将使用<slot/>指令在用户导航时引入实际的页面内容。
https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/7a42ed814d1d2c7da12d31a4ef74f90d.png
Sveltekit 应用外壳布局——图片由作者提供
在src/routes/+layout.svelte下修改现有的应用布局，并用以下代码替换它。
