在过去的几年里，最主要的JavaScript框架和库包括React、Angular和Vue；然而，自2016年11月发布以来，Svelte越来越受欢迎。
因其反应性而闻名，Svelte是构建高速Web应用程序的强大工具，通过编译代码并将其转换为纯JavaScript来更新DOM。

在本教程中，我们将探讨Svelte Material UI（SMUI），这是一个用于构建自定义和高级UI组件的辅助库，其灵感来自谷歌的Material Design。要跟上本教程，你需要。

• 熟悉HTML、CSS和JavaScript
• 一个代码编辑器，即Visual Studio Code
• 在你的机器上安装Node.js

要跟上进度，你可以在我的GitHubrepo上访问源代码。让我们开始吧!

开始使用Svelte

要开始使用Svelte，首先，我们需要安装一个名为degit 的Svelte包，让我们能够克隆Svelte Material UIGitHubrepo的最新提交。我们将使用degit ，从Svelte的GitHubrepo中获取一个新应用程序的启动模板。在你的终端运行以下命令。

npm install -g degit

要创建一个新的应用程序，在你的应用程序目录的命令行中运行以下命令。请确保为你的项目添加一个独特的名字。

degit sveltejs/template your-project-name

接下来，CD ，进入新的文件目录并运行code . ，这将在VS Code中打开你的应用程序文件夹。

我们从Sveltejs/template资源库中得到了上面截图中的文件。注意，Svelte应用程序的结构与其他JavaScript框架相似。

在你的应用程序目录的终端，运行下面的命令来安装所需的依赖项。

npm install

接下来，我们将得到Node模块和控制依赖性的package-lock.json 文件。要在浏览器上本地打开你的应用程序，在你的终端运行以下命令。

npm run dev

现在，你的Svelte应用程序应该在浏览器的本地服务器上打开，如下图所示。

将Svelte Material UI添加到你的Svelte项目中

要在我们的Svelte项目中使用SMUI，首先，我们必须在终端运行以下命令来安装它。

npm install --save-dev svelte-mui

依赖关系将被安装在我们的package.json 文件中，该文件看起来像下面的图片。

Svelte Material UI是一个轻量级的UI组件集合，我们可以很容易地将其导入我们的Svelte应用程序，包括UI元素的组件，如复选框、菜单、图标、浮动标签、表单字段和单选按钮。

举个例子，假设我们在Svelte应用程序中需要一个滑块组件。我们可以在我们的应用程序终端运行下面的命令。

npm install --save-dev @smui/slider

为了将滑块组件导入我们的应用程序，我们将在我们的script 标签中复制并粘贴下面的代码。

import {MDCSlider} from '@material/slider';

接下来，我们将用下面的代码在我们的HTML中调用一个连续的滑块。

<div class="mdc-slider">
<input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
<div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

滑块将出现在我们的应用程序中，如下图所示。

用Svelte Material UI建立一个简单的待办事项列表

让我们使用Svelte Material UI的预制组件来建立一个简单的待办事项列表。

我们的应用程序将有一个添加新任务的按钮，用户可以用一个文本字段来定义这些任务。我们还将添加一个删除按钮，用于在事件完成后进行删除。为此，我们将从SMUI导入Add 按钮、Text 字段和Delete 按钮组件。

开始使用

首先，让我们在我们的src/components 文件夹中创建一个新的文件，称为Header.svelte ，它将包含我们应用程序的头的用户界面。

<script>

</script>
<style>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        color: #fff;`
        font-weight: bold;
        font-size: 1.5em;
        background: rgba(0, 0, 0, 0.1);
    }
</style>


<div class="header">
    <span>Onome's Todo list</span>
</div>

在你的App.svelte 文件中，运行下面的代码，在你的script 标签中导入该组件。

import Header from "./components/Header.svelte";

现在，在你的HTML中调用页眉，如下所示。

<Header />

导入Add 按钮

接下来，我们将从SMUI中导入Add 按钮，它为用户在待办事项列表中添加新任务创建了一个新的文本字段。要导入button 组件，首先，在你的终端运行以下命令。

npm install @material/button

用下面的代码在你的script 标签中导入button 组件。

import { Button } from 'svelte-mui/src';

现在，在你的script 标签中导入下面的代码，使Add 按钮能够作为文本字段添加新任务。

<script>
import { Button } from 'svelte-mui/src'
    let tasks = [];
    const addTasks = () => {
        tasks = [...tasks, '']
    }
</script>
<div>
<Button on:click={addTasks} raised color="#ff4d14">Add
    </Button>
</div>

如果你在你的终端运行npm run dev ，你的应用程序将看起来像下面的图片。

导入Text 字段

要导入SMUI Text 字段组件，首先，在你的应用程序的终端运行以下命令。

npm install --save-dev @smui/textfield

现在，你可以用以下代码在你的应用程序中导入Text 字段组件。

import {MDCTextField} from '@material/textfield';

为了得到你的Text 字段，复制并粘贴下面的代码到你的HTML中。

<label class="mdc-text-field mdc-text-field--outlined">
                <span class="mdc-notched-outline">
                  <span class="mdc-notched-outline__leading"></span>
                  <span class="mdc-notched-outline__notch">
                        <span class="mdc-floating-label" id="my-label-id"></span>
                  </span>
                  <span class="mdc-notched-outline__trailing"></span>
                </span>
                <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
          </label>

导入Delete 按钮

最后，我们将创建一个Delete 按钮，它使用SMUIbutton 组件包裹的垃圾桶图标。当点击时，该按钮将使用slice() 功能从待办事项列表中删除一项任务。

首先，在你的终端运行下面的命令。

npm install @material/icon-button

现在，用下面的代码把图标和button 组件导入你的应用程序。

import {MDCRipple} from '@material/ripple';

让我们从Google Fonts Material Icons中获取垃圾桶的图标；首先，我们用下面的代码在我们的应用程序中导入Material Icons。

<head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>

要导入你选择的图标，只需在你的应用程序中添加其HTML代码。在这种情况下，我们使用删除图标。接下来，我们将为delete 按钮编写脚本，使其在点击事件被触发时删除任务。

<script>
    import { Button } from 'svelte-mui/src'
    let tasks = [];
    const removeTask = (index) => {
        tasks = [...tasks.slice(0, index), ...tasks.slice(index+1)];
     }
</script>
<div>
{#each tasks as task, index }
<Button on:click={()=>removeTask(index)} > <span class="material-icons" >
        delete
        </span> </Button>
{/each}
</div>

部署你的Svelte应用程序

你可以像部署其他网络应用一样部署你的Svelte应用。然而，在部署到Netlify或其他你选择的网站之前，你必须在终端运行npm run build 。我们最终的应用程序看起来像下面的图片。

你也可以在这里看到已部署的应用程序。

总结

作为一个相对较新的JavaScript前端编译器，Svelte仍然是一个正在进行的工作。然而，它已经证明了自己的有效性和易懂性，这部分要归功于第三方软件包和组件库。这篇文章展示了Svelte Material UI是如何利用Material UI组件的，为创建更快的应用程序提供了实用工具，使其拥有更有吸引力和易懂的用户界面。

如果你有任何问题，欢迎在下面评论

The postSvelte Material UI:高级材料设计组件出现在LogRocket博客上。