基于 Svelte class 的组件示例

Svelte class based component example

我正在尝试学习 Svelte 和 TypeScript。我想知道是否有任何模式可以使用 ES6 类 来包含或编程 svelte 组件。当前文件包含所有脚本 html 和数据 css。我想让它们成为单独的文件。请帮助我!

您可以使用任务运行程序来自动执行此操作。如果您使用的是 es6 类,我建议将 rolluprollup-plugin-svelterollup-plugin-buble.

一起使用

我使用 Gulp 获取单独的 js、html 和 css 文件,并将它们连接到一个文件中,并使用包含脚本和样式的适当标签。合并后的文件可以编译删除。

结构

为了帮助保持文件干净且易于使用 HTML,CSS 和 JavaScript 可以分开。

src/hello/hello.css

.message {
    font-size: 10pt;
}

src/hello/hello.html

<div class="message">{{message}}</div>

src/hello/hello.js

export default {
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}

合并

Svelte 要求组件只是一个 html 文件,因此需要将三个单独的文件组合成一个文件。由于此文件是 HTML,因此 JavaScript 必须包含在标签中,而 CSS 必须包含在标签中。

src/hello/hello.temp.html

<style>
.message {
  font-size: 10pt;
}
</style>

<div class="message">{{message}}</div>

<script>
export default {
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

编译

可以使用 svelte 或带有 svelte 插件的 rollup 编译临时文件,然后删除。

[编辑] 这是一个带有 gulp 文件的要点,显示了它是如何工作的。 Link here

[编辑 2] 有一个 Yeoman 生成器可以为您设置这一切,这里是 link 到 npm 包。 generator-svelte-workbench