在 Svelte 中构建仪表板

介绍：

当今市场上争夺最佳 JavaScript 框架的竞争中，最新的佼佼者是 Svelte。它是一个类似于 React、Vue 和 Angular 的全新 JavaScript 框架，但又略有不同。

Svelte 之所以如此新颖和有前景，是因为它提供了以下功能： 

• 没有虚拟 DOM
• 无需样板的代码
• 更像是一个编译器
• 非常简单的语法
• 内置商店

它提供了一种构建用户界面的全新方法。Svelte 不使用虚拟 DOM 差异之类的技术，而是编写代码，在应用状态发生变化时精准地更新 DOM。

不仅如此，Svelte 还有许多其他令人惊叹的功能供您使用 - 出色的性能、小型捆绑包、可访问性、内置样式封装、声明式转换、易于使用、编译器的事实等等，只是其中的一部分。

起源：

对我来说，每当听到新东西，我都想深入研究。当我听说 Svelte 时，我就知道我必须用它做点什么。所以，首先，我从 Svelte 的基础知识入手。我阅读了如何声明变量来处理事件，很快就学会了一切。

这是否意味着我学得很快？我不知道？但真正的原因是 Svelte 让学习变得简单。事实上，任何懂 JavaScript、HTML 和 CSS 基础的人都能轻松理解 Svelte。真的就是这么简单。

仪表板背后的想法：

我已经学习了 Svelte 的基础知识，现在想用这些概念构建一个小型项目。我一直在寻找参考资料，但一直找不到合适的。直到我找到了sb-admin-dashboard，这是一个非常著名的入门仪表盘，之前还没有人在 Svelte 中做过。我庆幸自己很幸运，决定从头开始创建一个。我的项目就在眼前。接下来我只需要开始动手。在我的脑海里，仪表盘看起来像这样（最终效果也确实如此）：

我遇到的问题： 

在我决定做什么并开始编码之后，我逐渐意识到有一些问题需要解决。首先，我需要弄清楚如何管理 CSS。在学习 Svelte 的过程中，花大部分时间编写 CSS 对我来说是一种不公平。因此，我需要一个 UI 组件库来帮助我轻松上手。经过一番搜索，我找到了一个名为SvelteStrap的库。

SvelteStrap：

它是 Svelte 的 UI 组件库。更确切地说，它是一个专为 Svelte 构建的 Bootstrap 库。如果您想详细了解它，可以点击此链接了解更多信息。

接下来遇到的问题是路由和文件夹结构。我该如何处理路由？Svelte 没有内置路由服务，而我需要一个来让我的仪表盘正常工作。在网上搜索了一下，我找到了一个解决方案，那就是Sapper。没错，又一个带有服务器端渲染、路由、高效文件夹结构管理等功能的框架。

工兵：

Sapper 是“( S )velte( App )Mak( er )”的缩写。根据英语词典，Sapper 指的是战争期间负责修桥、修路、处理爆破的士兵。这很有道理，因为从某种程度上来说，这正是 Sapper 为 Svelte 所做的工作。Sapper
不仅包含 Svelte 的所有功能，还额外添加了其他功能，这些功能补充了 Svelte 现有的优势，因此 Svelte 团队官方推荐使用路由来构建服务器端渲染应用。
你可能会问，如何使用？Sapper 提供以下功能：

路由

• 服务器端渲染
• 自动代码分割
• 离线支持（使用 Service Worker）
• 高层项目结构管理

Sapper 如何工作？

Sapper 基于两个基本概念：

• Sapper 将应用程序的每个页面视为一个 Svelte 组件，并且
• 我们通过将文件添加到项目的src/routes目录来创建页面。这些页面随后将进行服务器渲染，以便用户在客户端应用接管之前尽快首次访问您的应用。

Sapper 如何管理文件夹结构：

每个 Sapper 项目都有三个入口点以及一个src/template.html文件：
src/client.js：客户端呈现应用程序的入口点
。src/server.js：为应用程序提供服务的服务器入口点
src/service-worker.js（可选）：提供对离线支持、推送通知、后台同步等功能的访问。

Sapper 如何处理路线：

页面间的导航可以通过基本的 HTML 锚标签来实现。只需在 href 属性中输入页面名称，就搞定了！就是这么简单，相信我！

布局：

到目前为止，我们已经将页面视为完全独立的组件，那么导航呢？我们都知道，在应用内导航时，现有组件会被销毁，并由新组件取而代之。但在许多应用中，有些元素应该在每个页面上都可见，例如顶级导航、侧边栏或页脚。与其在每个页面中重复显示这些元素，不如使用布局组件，这样就不必反复使用那些常用的组件了。

要创建适用于每个页面的布局组件，只需创建一个名为src/routes/_layout.svelte的文件。 

谈到我正在构建的仪表板，它实际上有两种布局：一种带有侧边栏和顶部导航栏，另一种则没有这些。

我使用简单的 if-else 语句将这些布局拆分开来，但 Sapper 提供了更好的方法，即创建嵌套布局。目前我还没有实现它，但不久的将来肯定会实现。

以上就是我使用过的工具以及如何使用它们来构建这个仪表板的全部内容。由于这项工作仍在进行中，我会不时添加更多内容。此外，它是完全开源的，所以如果有人愿意贡献，我将不胜感激。最终目标是让它能够供任何想要在 Svelte 中开始使用简单仪表板的人使用。

点击此处查看仪表板的现场演示

仪表板的 GitHub 仓库在这里

使用新兴且前景光明的技术来构建新事物，是一种奇妙的体验。随着 Svelte 的发展，我相信它很快就会成为开发和使用应用程序的理想框架。

怀疑吗？那你为什么不去看看呢。

也感谢您抽出时间阅读我的文章。非常感谢。