Wails+svelte开发入门

安装

go install github.com/wailsapp/wails/v2/cmd/wails@latest

创建项目

wails init -n “my-svelte-app” -t “svelte”

• -n：指定项目名称，这里是 my-svelte-app。

• -t：指定前端模板，这里我们使用 svelte。

运行项目

项目创建完成后，进入项目目录并运行：

Bash

cd my-svelte-app
wails dev

Svelte 核心概念

您好！很高兴能带您快速入门并精通 Svelte。这是一个非常棒的选择，因为它以其简洁和高效而闻名。

Svelte 的核心理念与您可能听说过的其他框架（如 React 或 Vue）截然不同。与其在浏览器运行时执行大量工作，Svelte 更像一个编译器。它在您构建项目时，将您的代码转换成体积小、运行速度快的原生 JavaScript。这意味着最终用户在访问您的应用时，无需加载庞大的框架代码，从而带来极佳的性能。

Svelte 快速入门指南

要使用 Svelte 快速上手 Wails 项目，您可以按照以下步骤操作：

1. 创建 Wails + Svelte 项目

在终端中，运行以下命令来创建一个新的项目：

Bash

wails init -n "my-svelte-app" -t "svelte"

• -n：指定项目名称，这里是 my-svelte-app。
• -t：指定前端模板，这里我们使用 svelte。

2. 运行项目

项目创建完成后，进入项目目录并运行：

Bash

cd my-svelte-app
wails dev

wails dev 命令将启动 Wails 开发模式，同时运行您的 Go 后端和 Svelte 前端。Svelte 的 Vite 开发服务器会自动为您处理热重载。

---

Svelte 核心概念

要快速精通 Svelte，您只需掌握几个核心概念。它避免了许多其他框架中常见的样板代码。

1. 组件 (Components)

在 Svelte 中，每个 .svelte 文件都是一个组件。一个组件通常包含三部分：

• <script> 标签：用于存放组件的 JavaScript 逻辑。
• HTML 标签：用于定义组件的模板结构。
• <style> 标签：用于编写组件的 CSS 样式。值得注意的是，样式默认是作用域化的，这意味着它们只会影响当前组件，而不会污染全局样式。

2. 响应式 (Reactivity)

Svelte 的响应式非常简单。当您想让一个变量成为响应式状态时，只需正常声明它即可。当您改变这个变量时，所有使用它的地方都会自动更新。

Svelte

<script>
let count = 0; // 声明一个响应式变量
function increment() {
    count++; // 直接修改变量，UI 会自动更新
}
</script>

<button on:click={increment}>点击了 {count} 次</button>

3. 响应式声明 ($:)

如果您需要从一个或多个响应式变量中派生新值，可以使用 Svelte 独有的 $: 语法。

Svelte

<script>
let count = 0;
// total 是一个派生值，当 count 改变时会自动重新计算
$: total = count * 2;
</script>

4. 属性 (props)

要将数据从父组件传递给子组件，可以使用 export let 语法。

Svelte

<!-- ChildComponent.svelte -->
<script>
export let name; // 声明一个可接受的 prop
</script>

<h1>你好, {name}!</h1>

Svelte

<!-- App.svelte (父组件) -->
<script>
import ChildComponent from './ChildComponent.svelte';
</script>

<ChildComponent name="Svelte" />

5. 逻辑块

Svelte 提供简洁的语法来处理条件渲染和列表渲染：

• 条件渲染：使用 {#if...}
• 列表渲染：使用 {#each...}

Svelte

{#if user}
    <div>欢迎, {user.name}!</div>
{:else}
    <div>请登录</div>
{/if}

{#each items as item}
    <div>{item.name}</div>
{/each}