什么是 Svelte?
Svelte 是一种构建 web 应用程序的新方法。它是一个编译器,将您的声明性组件转换成高效的 JavaScript,并对 DOM 进行更新。
在Svelte 网站上了解更多信息,或者去下 Discord chatroom。
开发
拉请求是受鼓励的,总是受欢迎的。选择一个问题来帮助我们!
若要在本地安装和使用Svelte:
git clone https://github.com/sveltejs/svelte.git cd svelte npm install
不要使用 Yarn 安装依赖项,因为 package-lock.json 中有特定软件包版本用于构建和测试 Svelte。
许多测试取决于换行符保留为
git -c core.autocrlf=false clone https://github.com/sveltejs/svelte.git
要构建编译器以及包中包含的所有其他模块:
npm run build
要监视更改并不断重新构建包(如果您使用 npm link 来测试本地项目中的更改,则很有用):
npm run dev
编译器是用 TypeScript 编写的,但不要因此而放弃它——它基本上只是带有类型注释的 JavaScript。你很快就会学会的。如果你使用的是 Visual Studio 代码以外的编辑器,你可能需要安装一个插件来获得语法高亮和代码提示等。 。
运行测试
npm run test
要过滤测试,请使用 -g(即 --grep)。 例如,仅运行涉及 transitions(过渡)的测试:
npm run test -- -g transition
svelte.dev
包含所有文档的 https://svelte.dev 的源代码位于 site 目录中。该网站是用 Sapper 构建的。要在本地开发:
cd site npm install && npm run update npm run dev
许可
附录:
什么是 Svelte?(Svelte v2 版本,原文:https://v2.svelte.dev/guide)
Svelte 是用于构建快速Web应用程序的工具。
它类似于 React、Angular、Vue 和 Ractive 等 JavaScript 框架,它们都有一个共同的目标,即简化构建灵活的交互用户界面。
但有一个关键的区别:Svelte 在构建时将应用程序转换为完美的 JavaScript,而不是在运行时解释应用程序代码。这意味着您不需要为框架的抽象付出性能代价,并且在应用程序第一次加载时也不需要付出代价。
您可以使用 Svelte 构建整个应用程序,也可以将其增量地添加到现有的代码库中。您还可以将组件作为在任何地方都可以工作的独立包交付,而不需要依赖于传统框架的开销。
了解Svelte组件
在 Svelte 中,应用程序由一个或多个组件组成。组件是一个可重用的自包含代码块,它封装了属于一起的标记、样式和行为。
像 Ractive 和 Vue 一样,Svelte 推广单文件组件的概念:组件只是一个 .html 文件。 这是一个简单的例子:
<h1>Hello {name}!</h1>
Svelte 将其转换为一个 JavaScript 模块,您可以将其导入您的应用程序:
import App from './App.html'; const app = new App({ target: document.querySelector('main'), data: { name: 'world' } }); // change the data associated with the template app.set({ name: 'everybody' }); // detach the component and clean everything up app.destroy();
恭喜,您已经了解 Svelte API 的一半了!
(Second edition: vz revised at 2020.04.19)