如何安装svelte_SVELTE简介

如何安装svelte

A JavaScript framework to build fast, beautiful, and reactive user interfaces

一个JavaScript框架，用于构建快速，美观，React灵敏的用户界面

Svelte is a new hot thing these days in the ecosystem of JavaScript frontend frameworks. Svelte allows developers to create complex frontend applications by providing them with a new and unique way to write user interfaces. With Svelte, you write less code that is compiled out of the box into tiny vanilla JS (thanks to No Virtual DOM) and have the capability to bring reactivity in your code without including any complex state management libraries.

如今，在JavaScript前端框架生态系统中，Svelte成为新的热点。 Svelte通过为开发人员提供一种新颖独特的编写用户界面的方式，使开发人员可以创建复杂的前端应用程序。 使用Svelte，您只需编写很少的代码即可直接将它们编译成微型Vanilla JS(这归功于No Virtual DOM)，并且能够在不包含任何复杂状态管理库的情况下在代码中引入响应性。

Now you must be thinking when there are great frontend frameworks already available such as React or Vue, why one more? How is Svelte different from any of them?

现在，您必须在思考何时有可用的出色前端框架，例如React或Vue，为什么还要再添加一个？ Svelte与它们中的任何一个有何不同？

The answer to this question from their own documentation says that Svelte unlike React or Vue does all the heavy lifting in the compilation step when you are building your application instead of doing it in the browser. In the traditional frontend frameworks, we can write declarative state-driven code that is shipped to the browser, and then the browser converts it into DOM operations.

他们自己的文档中对这个问题的回答是，与构建React或Vue不同，Svelte在构建应用程序而不是在浏览器中时会在编译步骤中完成所有繁重的工作。 在传统的前端框架中，我们可以编写声明性的状态驱动代码，该代码已发送到浏览器，然后浏览器将其转换为DOM操作。

But since Svelte runs at build time, it converts your code (components) into highly efficient plain JavaScript code that surgically updates the DOM providing you with the ability to write highly performant and efficient applications.

但是由于Svelte在构建时运行，因此它将您的代码(组件)转换为高效的纯JavaScript代码，该JavaScript代码通过手术方式更新DOM，从而使您能够编写高性能和高效的应用程序。

Svelte入门 (Get Started with Svelte)

As we have seen so far that Svelte is by design different from the other frameworks we have been using, and therefore we can’t include this in our projects using traditional ways such as by using script tag on the page or by using import or require statements. Instead, Svelte is a compiler that works behind the scenes to convert your code into optimized and beautiful JavaScript.

到目前为止，我们已经看到Svelte在设计上与我们一直在使用的其他框架有所不同，因此，我们不能使用传统方式将其包含在我们的项目中，例如使用页面上的script标签或使用import或require陈述。 相反，Svelte是一个在后台工作的编译器，可将您的代码转换为优化而精美JavaScript。

There are a couple of ways we can start a new Svelte project. But in this blog, we will be using the scaffolding tool called degit to do that. Also, make sure that node and npm are installed on your computer. And, since we are going to use npx during this project, we need to have the version of npm which supports npx.

我们可以通过两种方式启动新的Svelte项目。 但是在此博客中，我们将使用名为degit的脚手架工具 做到这一点。 另外 ，请确保您的计算机上已安装了节点和npm 。 并且，由于我们将在此项目期间使用npx ，因此我们需要具有支持npx的npm版本。

Lets now dive into creating a new Svelte project. We will start with the following command:

现在让我们开始创建一个新的Svelte项目。 我们将从以下命令开始：

npx degit sveltejs/template my-test-project

This command tells the system to go fetch the sveltejs template and create a new project with that template and name it my-test-project. Make sure the format of the project name is in lower case, without spaces, and with hyphens.

该命令告诉系统获取sveltejs模板，并使用该模板创建一个新项目，并将其命名为my-test-project 。 请确保项目名称的格式为小写，无空格和连字符。

Now the next step is to navigate inside this folder and install the npm modules. To do that we will write the following commands:

现在，下一步是在此文件夹中导航并安装npm模块。 为此，我们将编写以下命令：

cd my-test-project
npm install

Once the packages have been installed, we can run the application by running the command:

安装软件包后，我们可以通过运行以下命令来运行应用程序：

npm run dev

This will start the local server at http://localhost:5000

这将在http：// localhost：5000启动本地服务器

http://localhost:5000/ http：//本地主机：5000 /

Let’s now look into the folder structure of the project:

现在让我们看一下项目的文件夹结构：

VS Code

VS代码

As we can see that the project structure doesn’t look very different from others as it contains node_modules, public folder containing public files, and build folder, while src folder containing the source files of the project and then gitignore, package.json, etc.

如我们所见，项目结构看起来与其他结构没有太大不同，因为它包含node_modules ，包含公共文件的公共文件夹和build文件夹，而src文件夹包含项目的源文件，然后包含gitignore ， package.json等。

If you want to create a production-ready build, you simply can do npm run build and README file has all the instructions about how you can deploy your application on the web using the services Now or Surge

如果要创建可用于生产环境的构建，则只需执行npm run build并且README文件包含有关如何使用服务Now或Surge在Web上部署应用程序的所有说明。

Let’s now try to play a little bit with the code and see how that works. A Svelte application consists of one or more components. A component is a reusable self-contained block of code that contains HTML, CSS, and JS that belong together. A Svelte component has an extension of .svelte

现在，让我们尝试一些代码，看看它是如何工作的。 Svelte应用程序由一个或多个组件组成。 组件是一个可重用的独立代码块，其中包含在一起HTML，CSS和JS。 Svelte组件的扩展名为.svelte

让我们写第一个组件 (Let’s write our first component)

In the src folder of the project, please open the App.svelte file and remove all the content inside it. We will now start off with the traditional Hello world component. We will simply write the following code inside our App.svelte file and it will automatically update the result on http://localhost:5000/

在项目的src文件夹中，请打开App.svelte文件并删除其中的所有内容。 现在，我们将从传统的Hello world组件开始。 我们将在App.svelte文件中简单地编写以下代码，它将自动在http：// localhost：5000 /上更新结果。

VS Code

VS代码

http://localhost:5000/ http：//本地主机：5000 /

Now, let's try to add a variable into this component. We will add a script tag, and will declare a new variable.

现在，让我们尝试将一个变量添加到该组件中。 我们将添加一个script标签，并将声明一个新变量。

<script>
 const name = 'Sohaib';
</script>

To use this variable inside our HTML, we will use the following syntax:

要在HTML中使用此变量，我们将使用以下语法：

<h1>Hello {name}!</h1>

This will result in Hello appearing with the value of the name variable which we declared.

这将导致Hello出现，并带有我们声明的name变量的值。

http://localhost:5000/ http：//本地主机：5000 /

Lets now introduce two numbers and print the sum of them on the screen:

现在让我们介绍两个数字并将它们的总和显示在屏幕上：

<script>
 let firstNumber = 5;
 let secondNumber = 10;
</script>
<h3>The sum of the two numbers is {firstNumber + secondNumber}</h3>

And the result is:

结果是：

http://localhost:5000/ http：//本地主机：5000 /

后台会发生什么？ (What happens in the background?)

This all looks pretty straightforward so far and in later tutorials, in this series, we will explore more complex applications and use cases, but let’s pause here for now and see what goes in the background when the compiler runs our code.

到目前为止，这一切看起来都很简单，在本系列的后续教程中，我们将探索更复杂的应用程序和用例，但让我们暂时在这里暂停一下，看看编译器运行我们的代码在后台发生了什么。

As we discussed earlier that Svelte compiles our code into tiny vanilla JS and sends it to the browser which then renders it. If we open the dev tools, we will that the HTML file has bundle.js file included along with some other files as well.

正如我们之前讨论的那样，Svelte将我们的代码编译成微型Vanilla JS，并将其发送到浏览器，然后由浏览器进行渲染。 如果打开开发工具，我们将在HTML文件中bundle.js包含bundle.js文件和其他一些文件。

If we open bundle.js in the browser, we will see some vanilla JS inside it. We don’t have to understand all of it for now but let’s just see where are those two variables which we declared in our component. We can simply search for the text firstNumber and can find out that it is declared inside the function named instance. This function also contains a class declaration by the name of App which extends the class of SvelteComponentDev. This is the main class which actually creates the main component of the application.

如果在浏览器中打开bundle.js ，我们将在其中看到一些普通的JS。 现在我们不必全部了解它，而让我们看看我们在组件中声明的这两个变量在哪里。 我们可以简单地搜索文本firstNumber并发现它在名为instance.的函数中声明instance. 该函数还包含一个名为App的类声明，该类声明扩展了SvelteComponentDev.的类SvelteComponentDev. 这是实际上创建应用程序主要组件的主要类。

We will learn more about how Svelte works under the hood but this is enough for the introductory post for now.

我们将详细了解Svelte的工作原理，但这对于现在的介绍文章已经足够。

结论 (Conclusion)

In this tutorial, we tried to understand the basic philosophy of Svelte and how it is different from other traditional frameworks. We also learned how we can set up a new project and create our first component inside it. In the next tutorial, we will be learning how to build a Realtime Free Image search app using Svelte.

在本教程中，我们试图了解Svelte的基本原理以及它与其他传统框架的不同之处。 我们还学习了如何设置新项目并在其中创建第一个组件。 在下一个教程中，我们将学习如何使用Svelte构建Realtime Free Image搜索应用程序 。

I am Sohaib Nehal. I run a software development consultancy by the name of Loops Digital. You can reach me at sohaib@loopsdigital.com or on Twitter @Sohaib_Nehal. Thank you :-)

我是Sohaib Nehal。 我经营一家名为 Loops Digital 的软件开发咨询公司 。 您可以通过sohaib@loopsdigital.com或通过Twitter @Sohaib_Nehal与我联系。 谢谢 ：-)

翻译自: https://medium.com/swlh/introduction-to-svelte-cdfaba91700

如何安装svelte