如何安装svelte_Svelte Framework入门

如何安装svelte

简而言之 ， 安装 ， 组件 ， 属性 和 DOM事件

嗨，岩石，萨沙在这里。 在本文中，我们将了解Svelte的一些核心机制，因此您可以轻松使用此几乎完美的UI库开始制作自己的Web应用程序。

让我们从设置开始。 打开终端，转到您要创建项目的文件夹，然后执行以下命令：

npx svelte3-app
npmrun  dev

这将创建一个配置了rollup的标准“ Hello World”项目。 该项目的结构非常标准。 入口点在src/main.js 。 它仅在身体上渲染App.svelte并将名称prop传递给它。

不幸的是，您必须在每次导入时添加.svelte ，但是您可以通过更新rollup.config.js轻松修复它：去resolve对象并添加：

extensions: [".svelte" ]

组件结构

如您所见，Svelte组件将所有必需的内容合并到一个.svelte文件中。 基本结构是：

< script > 
    // all js code here
 </ script >

<!-- HTML code here -->

< style > 
    /* all css here */
    /* css is scoped by default */
 </ style >

让我们创建第一个组件。 随意命名（扩展名为.svelte，我称它为Page.svelte ），然后在其中编写上面的代码。 将其导入App.svelte并将其放入模板中。 此时，您的App.svelte必须如下所示：

< script > 
    import Page from "./Page" ;
 </ script >

< main >
    < Page />
</ main >

我从其中删除了样式部分，因为我们不需要它。

占位符

很棒的事情是，尽管Page是一个空组件，但不会崩溃您的应用程序。 当您对应用程序的结构进行原型设计但尚未实现时，它非常有用。 您只需要将此空组件用作占位符，然后将所需的内容放入其中即可。

属性（道具）

为了将变量公开为属性，您只需要像普通javascript中一样将其导出即可。 让我们从页面导出一个名为number的变量并显示它：

< script > 
    export let number;
 </ script >

< h1 > {number} </ h1 >

< style > 
    /* all css here */
    /* css is scoped by default */
 </ style >

Svelte中的道具设置方式与其他库中的设置方式相同：将其添加为模板中的属性：

< Page number = "5" />

现在，该组件将显示5 。

价值约束

在本教程中，我们要做的最后一件事是通过添加按钮以增加App价值来更新Page 。 步骤如下：

1. 创建一个变量来存储值（ let value = 0 ）；
2. 将其作为道具传递给Page（ number={value} ）;
3. 创建增加价值的功能；
4. 添加一个调用增加功能的<button on:click{increaseValue}>Increase</button> （ <button on:click{increaseValue}>Increase</button> ）；

您的App.svelte应该如下所示：

< script > 
    import Page from "./Page" ;

    let value = 0 ;

    const increaseValue = () => {
        value ++;
    }
 </ script >

< main >
    < Page number = {value} />
    < button on:click = {increaseValue} > Increase </ button >
</ main >

唯一的新事物是： on:click={increaseValue} 。 我想你可以自己解决这个问题。 在Svelte中，您可以使用on:<event_name>={<listener>}监听任何DOM事件on:<event_name>={<listener>}

在下一个教程中，我们将创建一个经典的Guess a Number游戏。 因为我们将使用自定义事件与父母进行交流并学习一些生命周期钩子，所以它将变得更加复杂。

外部链接 ：

1. degit
2. npx
3. Svelte
4. Rollup
5. Dom events

翻译自: https://hackernoon.com/getting-started-with-svelte-framework-ut6p33mt

如何安装svelte