codecamp

Svelte 制作一个app

本教程是为了让你熟悉编写组件的过程。但在某些时候,你会想在你自己的文本编辑器里开始编写组件。

首先,您需要将 Svelte 与构建工具集成。我们推荐使用 SvelteKit,它会为你设置带有 vite-plugin-svelte 的 Vite ...

npm create svelte@latest myapp

还有一些由社区维护的集成

如果你是 Web 开发的新手,以前没有使用过这些工具,请不要担心。我们已经准备了一份简单的分步指南,即针对新开发者的 Svelte,它将引导你完成这一过程。

你还需要配置你的文本编辑器。有许多流行的编辑器的插件,以及官方的 VS Code 扩展

然后,一旦您建立了项目,使用 Svelte 组件就很容易了。编译器将每个组件变成一个常规的 JavaScript 类——只需导入它并用 ​new​ 实例化:

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// we'll learn about props later
		answer: 42
	}
});

然后,如果需要,您可以使用组件 API 与 ​app​ 交互。


Svelte HTML标签
Svelte 赋值
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }