基于 Svelte class 的组件示例
Svelte class based component example
我正在尝试学习 Svelte 和 TypeScript。我想知道是否有任何模式可以使用 ES6 类 来包含或编程 svelte 组件。当前文件包含所有脚本 html 和数据 css。我想让它们成为单独的文件。请帮助我!
您可以使用任务运行程序来自动执行此操作。如果您使用的是 es6 类,我建议将 rollup
与 rollup-plugin-svelte
和 rollup-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
我正在尝试学习 Svelte 和 TypeScript。我想知道是否有任何模式可以使用 ES6 类 来包含或编程 svelte 组件。当前文件包含所有脚本 html 和数据 css。我想让它们成为单独的文件。请帮助我!
您可以使用任务运行程序来自动执行此操作。如果您使用的是 es6 类,我建议将 rollup
与 rollup-plugin-svelte
和 rollup-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