Svelte框架使用指北

我更习惯称呼Svelte是前端框架，但是和Vue、React、Angular等框架不同，Svelte实质是一个编译器，它将我们的代码编译成原生的JavaScript，而不是在运行时解释我们的代码。这意味着我们不需要在浏览器中加载框架运行时，从而减少了我们的应用程序的大小，使其更快。

随便聊聊

开始接触这个框架是因为官网的宣传语”无虚拟DOM”
原本以为虚拟dom就是当前几年的技术最优解,没想到Svelte反其道而行~

官方资料

其它资料

项目搭建

个人比较喜欢用vite进行项目搭建,无他唯快尔;Svelte作者可是亲自参与了vite的开发,所以vite对svelte的支持是非常好的

1
2
3
4
5
6
7
8
9
10
11
npm init vite@latest
=======================按照提示选择即可=======================
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

建议不要用ts,因为svelte的ts支持不是很好,而且svelte的语法本身就是非常简单的,用ts反而会增加代码量,用的话也没问题,src下新建.d.ts文件即可:

1
declare module 'svelte-spa-router'

项目结构

待补充

路由配置

svelte-spa-router来实现路由配置,它的api和vue-router非常相似,但是svelte-spa-router的api更加简单,而且svelte-spa-router的作者也是svelte的作者,目前生态来说这些需要手动去配置的东西还是比较多的,但是svelte-spa-router的作者已经在开发svelte-router,希望能够尽快完成

/src/routes/index.svelte

1
2
3
4
5
6
import Home from "../Home.svelte";
const routes = {
    '/home': Home,
    '/home/:id': Home,
}
export default routes;

/src/App.svelte

1
2
3
4
5
6
7
8
9
10
<script>
  import routes from "./routes/index.js";
  import Router from "svelte-spa-router";
</script>


<main>
  <Router {routes} />
</main>

总的来说比较看好Svelte框架将来的发展,官方文档还是很详细的,代码量少写起来真的很爽.或许将来也是前端独角兽之一,个人比较看好

未完待续