如何安装svelte

介绍 (Introduction)

When building applications with JavaScript, high performance and penetrability will always be at the crux of the decisions made by software developers. Svelte is a high-performance component framework for imperative code.

使用JavaScript构建应用程序时，高性能和可穿透性将始终是软件开发人员做出决定的关键。 Svelte是用于命令性代码的高性能组件框架。

Svelte also brings a different way of scaffolding user interfaces to the table. While React and Vue perform most of their work in the browser, Svelte runs during build time by transforming the application’s component into code that updates the DOM.

Svelte还为表提供了一种不同的方式来搭建用户界面。 尽管React和Vue在浏览器中执行其大部分工作，但Svelte会在构建期间通过将应用程序的组件转换为更新DOM的代码来运行。

This tutorial will cover the basics of Svelte and how you can harness its features to build high performance applications.

本教程将介绍Svelte的基础知识，以及如何利用其功能来构建高性能应用程序。

第1步-构建一个精简的应用程序 (Step 1 — Building a Svelte Application)

The first thing to do when building a Svelte application is to integrate Svelte with a project scaffolding tool. This tutorial will use degit.

构建Svelte应用程序时，要做的第一件事是将Svelte与项目脚手架工具集成在一起。 本教程将使用degit 。

Navigate to your terminal and run the following command to create a new directory for your application:

导航到您的终端并运行以下命令为您的应用程序创建一个新目录：

Move into the new directory:

移至新目录：

If you are using NPM, install the dependencies with the following command:

如果使用NPM ，请使用以下命令安装依赖项：

If you are using Yarn, install the dependencies with the following command:

如果使用Yarn ，请使用以下命令安装依赖项：

Run the following command to run a local development server where you can watch your application as you build:

运行以下命令以运行本地开发服务器，您可以在其中监视构建过程中的应用程序：

This starts a server on http://localhost:5000.

这将在http://localhost:5000上启动服务器。

There are a couple of files in the project folder that were created during the scaffolding process. This tutorial will elaborate on the files which are the crux of the application:

在脚手架过程中创建的项目文件夹中有几个文件。 本教程将详细介绍作为应用程序关键的文件：

• package.json: This is where the packages the project will depend on are listed. It is worth noting that unlike React and Vue, Svelte’s package.json file lists only dev dependencies and none of the regular, standard dependencies you may be used to seeing in the two aforementioned frameworks. The reason is that the framework compiles your code to Vanilla JavaScript when building for production.

  package.json ：列出了项目将依赖的软件包。 值得注意的是，与React和Vue不同，Svelte的package.json文件仅列出dev依赖关系，没有列出您可能会在上述两个框架中看到的常规，标准依赖关系。 原因是在为生产而构建时，该框架将您的代码编译为Vanilla JavaScript。

• main.js: This is the entry point for all JavaScript in your application. Components are instantiated here.

  main.js ：这是应用程序中所有JavaScript的入口点。 组件在此处实例化。

• App.svelte: This is your application’s first component. Similar to the way Vue components are created using the .vue extension. It contains all the logic, styling, and markup needed for a component to function.

  App.svelte ：这是应用程序的第一个组件。 与使用.vue扩展名创建Vue组件的方式类似。 它包含组件正常运行所需的所有逻辑，样式和标记。

• index.html: During development, the public folder of your application will contain an unminified version of your application’s bundle. index.html is where that bundle is executed.

  index.html ：在开发过程中，在public应用程序的文件夹将包含应用程序的捆绑的unminified版本。 index.html是执行该包的位置。

步骤2 —创建一个Svelte组件 (Step 2 — Creating a Svelte Component)

Components are a basic of every Svelte application. They are written into .svelte files, using a superset of HTML. A .svelte file has two sections:

组件是每个Svelte应用程序的基础。 使用HTML的超集将它们写入.svelte文件。 .svelte文件包含两个部分：

• <script>: This section contains all the JavaScript and logic that runs the application.

  <script> ：此部分包含运行该应用程序的所有JavaScript和逻辑。

• <style>: This contains the CSS styles for the application. markup: This contains HTML markup, it’s similar to writing JSX in React.

  <style> ：这包含应用程序CSS样式。 标记：包含HTML标记，类似于在React中编写JSX。

The block of code below is an example of what a Svelte component looks like:

下面的代码块是Svelte组件的外观示例：

<script>
  let framework = 'Svelte';
</script>

<style>
  h1 {
       color: blue;
       font-family: 'Open Sans';
       font-size: 2em;
    }
</style>

<h1>This is a {framework} Component.</h1>

Result
// This is a Svelte Component.

第3步-探索React式声明 (Step 3 — Exploring Reactive Declarations)

Svelte has a feature called reactive declaration. Most times when building an application, it gets a bit big. Parts of a component’s state will need to be called from other parts and recomputed if they change. This is exactly what reactive declarations are used for. Check out the code block below:

Svelte具有称为React式声明的功能。 在大多数情况下，构建应用程序时，它会变得有点大。 组件状态的某些部分需要从其他部分中调用，并在它们发生更改时重新计算。 这正是React式声明的用途。 查看以下代码块：

<script>
  let car = 'Mercedes';
$: carMakeSedan = car + ' E350';
$: carMakeSuv = car + ' G500';
</script>

<p> The {car} you want is a {carMakeSedan}.</p>
<p> If you would like something more expensive, go for the {carMakeSuv}.</p>

 Result
// The Mercedes you want is a Mercedes E350.
// If you would like something more expensive, go for the Mercedes G500.

Lines three and four tells Svelte to re-run this code whenever any of the referenced values change. A value should be relative when it needs to be referenced multiple times or if other values exist that depend on it.

第三行和第四行告诉Svelte，只要任何参考值发生变化，就重新运行此代码。 当需要多次引用某个值或存在依赖于该值的其他值时，该值应该是相对的。

第4步-创建和声明属性 (Step 4 — Creating and Declaring Properties)

When building an application, you will eventually need to pass data from component to component (also known as parent to child component). To do that, you need to declare properties with props. Svelte accomplishes this by using the export keyword. Check out the code sample below for an example:

构建应用程序时，最终将需要将数据从一个组件传递到另一个组件(也称为父组件到子组件)。 为此，您需要使用props声明属性。 Svelte通过使用export关键字完成此操作。 查看下面的代码示例作为示例：

// Car.svelte
<script>
  export let carMake;
</script>

<p>You ordered a {carMake}</p>

Navigate to the App.svelte parent component:

导航到App.svelte父组件：

// App.svelte
<script>
  import Mercedes from './Car.svelte';
  import BMW from './Car.svelte';
  import Jaguar from './Car.svelte';
</script>

<Mercedes carMake={' Mercedes'}/>
<BMW carMake={' BMW'}/>
<Jaguar carMake={' Jaguar'}/>

// You ordered a Mercedes
// You ordered a BMW
// You ordered a Jaguar

There is also an option to specify default values. In the Car.svelte example below, you can specify the default value for carMake:

还有一个选项可以指定默认值。 在下面的Car.svelte示例中，您可以指定carMake的默认值：

//Car.svelte
<script>
  export let carMake = 'Mercedes';
</script>

<p>You ordered a {carMake}</p>

Should you then fail to instantiate the component with carMake, it will revert to the default value:

如果随后无法使用carMake实例化该组件，它将恢复为默认值：

//App.svelte
<script>
  import Mercedes from './Car.svelte';
</script>

<Mercedes carMake={' Mercedes'}/>
<Mercedes />

// You ordered a Mercedes
// You ordered a Mercedes

第5步-探索逻辑和绑定 (Step 5 — Exploring Logic and Binding)

One particular trait of JSX in React is its inability to contain conditional statements. Most times where such logic is needed, it is usually substituted with ternary operators or some other workaround. Svelte has the ability to conditionally render markup by wrapping it in an if block. Check out the code sample below:

React中JSX的一个特殊特性是它无法包含条件语句。 在大多数情况下，需要这种逻辑时，通常用三元运算符或其他解决方法代替它。 Svelte可以通过将标记包装在if块中来有条件地呈现标记。 查看以下代码示例：

<script>
  let luggage = { checkedIn: false };

  function toggle() {
    luggage.checkedIn = !luggage.checkedIn;
  }
</script>

{#if luggage.checkedIn}
  <button on:click={toggle}>
    Luggage is Checked Out
  </button>
{/if}

{#if !luggage.checkedIn}
  <button on:click={toggle}>
    Luggage is Checked In
  </button>
{if}

Similar to frameworks like React, data flow in Svelte is top-down. Parent components set properties on child components, but not the other way round. In Svelte, you can work around this by using the bind: value directive. Check out the code sample below:

与React等框架类似，Svelte中的数据流是自上而下的。 父组件在子组件上设置属性，但反之则不行。 在Svelte中，可以使用bind: value指令解决此问题。 查看以下代码示例：

<script>
  let framework = 'Svelte';
</script>

<input bind:value={framework}> 

<p>{framework} is awesome!</p>

With this, not only will changes to the value of framework update the value of input, but changes to input will also update framework.

这样，更改framework的值不仅会更新input的值，而且更改input也会更新framework 。

结论 (Conclusion)

Svelte may still be in its early stages, but it shows a lot of potential and promise. This post is an introduction, so there’s still a lot more that you can accomplish using Svelte. You can learn more about Svelte by reviewing their official documentation

Svelte可能仍处于早期阶段，但它显示出很大的潜力和希望。 这篇文章是介绍，因此使用Svelte还可以完成很多工作。 您可以通过阅读Svelte的官方文档来了解更多信息

翻译自: https://www.digitalocean.com/community/tutorials/getting-started-with-svelte-3

如何安装svelte