Svelte 介绍和安装

Svelte是创建Web应用程序的新方法，它可以从一小部分代码到完整的页面Web应用程序都可以使用。Svelte不是一个框架，它是一个编译器，与Angular JS、Vue.js和React JS等其他JavaScript库相比，它的速度更快。Svelte的主要目的是创建反应式网络应用程序，并提供这样的功能：如果数据有任何变化，将迅速反映在页面上，不会花费很多时间。

Svelte简介

正如我们在开篇所看到的，Svelte是创建Web应用程序的新方法，它可以从一小部分代码到整个页面的Web应用程序，这使得它很容易用于RAD（快速应用开发）。RAD指的是快速制作小编码的软件应用，并用于网络优化。区别于其他技术和svelte的主要一点是，它不使用虚拟DOM，而且是免费使用的。

用于生产的代码在执行时被svelte编译成一个香草的JavaScript捆绑包。与其他库不同，用户不需要在互联网上部署Svlete，就可以在互联网上部署他们的应用程序。这些都使得在使用Svelte的时候可以快速执行。

先决条件

在用户在本地机器上使用Svelte之前，有一些技术需要存在于系统或计算机中。这些先决条件是–

一个文本编辑器，例如atom、sublime text 3等。
在本地电脑上安装Node.js，因为node.js是运行Svelte的构建块。

Svelte的安装

在获得先决条件后，现在我们准备去安装Svelte。我们将按步骤进行，以获得更好的理解。

第1步 - 在命令提示符或终端中输入以下命令

npm install -g degit

Degit是一个软件包，允许用户简单地从GitHub仓库克隆之前的提交。

第2步- 下一步是在本地电脑上创建一个新目录，然后运行下面的命令

degit sveltejs/template project_name

通过这个命令，degit将进入sveltejs(repository)，并找到模板，将其下载到用户的本地电脑中，项目名为project_name。

第3步 - 现在我们已经完成了基础工作，下一步我们必须打开我们的文本编辑器，在project_name文件夹下，我们有src文件夹，其中将包含main.js文件，该文件主要用于执行用户的svelte应用程序。这里还有两个文件，即App.svelte和package.json，package.json文件包含所有需要安装的依赖项，另一个文件是App.svelte是一个应用程序的根组件。

第4步- 在这一步中，用户必须安装所有的依赖项，这里需要注意的是将所有的依赖项安装在当前项目的文件夹中，即project_name文件夹。

npm install

在终端运行上述命令。

通过所有这些命令，用户可以启动基于Svelte的应用程序。

Svelte的用途

Svelte可以用来构建独立的程序和特定的界面组件。使用Svelte，你可以从一开始就创建你的用户界面，也可以逐步将其整合到当前存在的应用程序中。

不过，Svelte最适合处理以下情况 −

Svelte构建的应用程序具有较小的捆绑尺寸，使其成为网络连接缓慢和处理能力差的装备的理想选择。为低功率硬件制作的网络应用。更少的代码意味着更少的内存密集型KBs来下载、解析和执行。
高度互动的网站或复杂的可视化。如果你正在创建需要显示大量DOM元素的数据可视化，那么一个运行时开销小的框架所带来的性能提升将确保用户互动的迅速和响应。
由于Svelte的快速学习曲线，没有任何网络开发知识的用户可以轻松上手。对HTML、CSS和JavaScript有基本了解的网络开发人员很容易理解Svelte的复杂之处。

Svelte的基本工作

因为Svelte是一个编译器，它可以扩展HTML、CSS和JavaScript，并生成最佳的JavaScript代码，而且没有运行时间成本。为了做到这一点，Svelte以下列方式扩展了现有的网络技术

它扩展了HTML，允许在标记中使用JavaScript表达式，并提供使用条件和循环的指令，其风格类似于车把式。
它扩展了CSS，通过提供范围机制，使每个组件能够表达自己的样式，而不必担心与其他组件的样式冲突。
它通过重新解释语言的一些指令来扩展JavaScript，以实现真正的响应性和简化组件的状态管理。

编译器只在涉及到Svelte组件时才进行干预，而且只在极其特殊的情况下进行。对JavaScript语言的扩展被保持在最低限度，并被精心挑选，以防止破坏JavaScript语法或疏远开发人员。事实上，大部分时间你都会使用普通的JavaScript。

应用程序的结构

首先，我们将得到moz-todo-svelte文件，其中包含–

README.md, package.json, package-lock.json,rollup, .config.js, .gitignore, node_modules, public。
public将进一步包含 –
- favicon.png, index.html, global.css,build, bundle.css, bundle.js ,bundle.js.map
Scripts，将进一步包含设置TypeScript.js
src，它将包含App.svelte和main.js。

总结

在本教程中，我们已经了解了svelte的介绍和安装。Svelte是创建Web应用的新方法，它可以从一小部分代码到完整的Web应用页面都可以使用。Svelte不是一个框架，它是一个编译器，与AngularJS、Vue.js和React JS等其他JavaScript库相比，它的速度更快。用于生产的代码在执行时被svelte编译成一个虚构的JavaScript包。