怎样创建一个最简单的 svelte 组件

1 前言

前端组件开发，自然免不了创建各种功能的组件，Svelte 中怎样创建组件呢？它是模板写法还是类写法？会用到 JSX 吗？需要怎样引入和挂载呢？

2 创建组件

.svelte 结尾的文件就是一个 Svelte 组件，类似 .vue 结尾的就是一个 Vue 组件一样，它是模板写法，一个文件里面包含了 script、style 和 html。下面仅演示一个简单的 Hello, Wolrd! 组件的写法。

首先，在 App.svelte 文件中写一个正常的 html 标签，这种最简形式的组件跟写 .html 没有区别。

<h1>Hello, Wolrd!</h1>

然后，在 main.js 中引入组件并挂载，挂载需要进行：实例化、指定挂载节点、导出三步。

main.js

import App from './App.svelte'

const app = new App({
	target: document.body,
});

export default app;

保存后将会得到这个页面：

3 总结

Svelte 组件以 .svelte 结尾，采用 script、style 和 html 合写的方式组织，挂载组件需要实例化根组件，并指定挂载的目标（target）节点（一般为 document.body），然后将这个组件导出至外部。

4 参考

• https://www.sveltejs.cn/tutorial/basics