快速开始使用 Svelte

这仅需一分钟

Svelte 是一个年轻的、现代的 框架。而不是像库一样在页面添加 <script src='svelte.js'> 标签,或者是通过importrequire引入程序,Svelte只负责在幕后编译,从而将你的组件高效的优化为JavaScript。

因为是一个年轻的框架,所以你一开始使用它可能毫无头绪,你可能会问:我该如何上手Svelte?

1.学会使用REPL

Svelte REPL 是尝试Svelte最简单的办法。您可以从示例列表中进行选择一个来入门,并对其进行修改,直到它们执行你想要的操作为止。

很多时候 REPL的功能并不能满足你的需求,点击 此处下载 按钮你将会获得一个 svelte-app.zip 文件到你的电脑。

解压并打开 terminal 并设置项目:

cd /path/to/svelte-app
npm install

然后启动开发服务器:

npm run dev

浏览器访问 localhost:5000 查看为你提供的应用程序,每次文件的修改 Rollup 都将对svelte-app/src内的文件进行重建。

2. 使用 degit

当你从 REPL 下载文件时,你会获得一个自定义版本的 sveltejs/template repo。你也可以使用degit脚手架来获得该文件。

在 terminal(终端)中,你也可以像这样来创建项目:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

这将在my-svelte-project创建以sveltejs/template为基础的项目,安装依赖项并在 http://localhost:5000中运行。

稍作更改后你就可以知道如何根据 sveltejs/template开始创建派生项目:

npx degit your-name/template my-new-project

就是如此! 请执行 npm run build 来构建应用程序到生产环境,并检查template项目的README 以获得更多诸如使用 NowSurge来部署的说明。

如果你不想使用 Rollup ,还可以选择 webpackBrowserify 作为构建工具, 或者使用Svelte CLI (从2019年更新后:Svelte 3不建议现在在模板中使用 sirv-cli ,此CLI现已弃用 ) 以及直接使用 API 。如果你为其其中一种工具而制作了项目template,请与Svelte Discord 聊天室, @sveltejs Twitter账户一同分享它!