标签: svelte

我将如何做这样的事情：

<style>
Nested {
    color: blue;
}
</style>

<Nested />

即如何将样式应用到组件的父组件？

我刚刚开始使用 SvelteKit 并阅读了文档。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档所述配置了我的应用程序，但似乎没有任何效果如所描述的那样。

我想要实现的目标：

1.SSG （预渲染）

在构建时将静态内容（例如<h1>， ）生成为 HTML。<p>不要用 JS 来滋润客户端页面。我想尽可能避免这种情况，它会增加加载时间，一些用户禁用了 JS 并且对 SEO 不友好。我实在看不出你为什么要这么做有什么好处。只有当数据发生变化时，用 JS 生成数据才有用，对吗？我也看不出“无水合作用”和“预渲染”之间有什么区别。

2. 禁用SSR

不要在服务器上运行代码并呈现页面或请求。那么我可以假设 localStorage 等可用。

3. 不使用node服务器打开app

这并不是那么重要，但如果应用程序只需在本地浏览器中打开 index.html 文件即可运行，那就太好了。那时它可以与 Github Pages 一起使用。在构建了一个用纯 Svelte 编写的应用程序后，你可以怎么做。

4. 仅限 SvelteKit

如果只配置 SvelteKit 就足够了，那就太好了。无需任何外部库或不同 Svelte 框架的帮助。

我尝试过的

这是github上的一个例子。第一个目录中是一个可重现的示例，其中生成了构建版本。第二个大致是我期望构建给我的输出，这是我手动编写的。

我启动了新的 SvelteKit 项目并通过npm i -D @sveltejs/adapter-static@next. 然后我设置svelte.config.js文件：

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: …

我想导入使用“window”属性的 apexChart 库，但在控制台中出现错误。

[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined

我尝试在安装后使用 apexCharts，但错误并没有消失。

[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined

当我确定浏览器存在时，我尝试导入 apexCharts。

<script>
 import ApexCharts from 'apexcharts'
 import { onMount } from 'svelte'
 const myOptions = {...myOptions}
 onMount(() => {
   const chart = new ApexCharts(document.querySelector('[data-chart="profit"]'), myOptions)
   chart.render()
 })
</script>

但我收到错误“‘导入’和‘导出’可能只出现在顶层”

我尝试在 svelte.config.js 中禁用 ssr

 import { browser } from '$app/env'
 if (browser) {
   import ApexCharts from 'apexcharts'
 }

我尝试创建一个导入 apexChart 库的组件，并创建了一个条件，仅当浏览器存在时才使用该组件 …

Svelte最终输出本机JavaScript类.因此,TypeScript可以理解这些.但是,Svelte组件必须首先从其初始.html形式进行编译.在此之前,可以理解的是,默认情况下,TypeScript不会以初始形式理解它们.因此,即使在运行时导入成功,它也会报告"无法找到模块"错误.有没有办法让TypeScript理解它们？

一种解决方法是为.html模块提供类型定义,近似于标准的Svelte组件接口.然而,更希望简单地将真实的组件类输出本身用于每个单独的组件,从而产生最准确的类型信息.

顺便说一句,我没有提到像Webpack或Rollup这样的工具,它们通常会为Svelte执行编译步骤.我不知道这些工具是否与这个问题有关.

更新1:我进一步了解了TypeScript,似乎可以为它创建插件.但是,它们似乎有限,所以可能没用.

更新2:在TypeScript中也有一些关于自定义模块加载器的讨论(这里和这里).

在查看svelte库时，我在JS中遇到以下有效语法：

$: doubled = 6 * 2;

起初，我认为它是特定于该库的，但是它可以在Chrome控制台上使用。这是什么语法？

可以是任何东西：

name: something = 6 * 2;

let c = 0;
$: console.log(c);

如果我们想打印c它改变时的值，我们可以像上面那样写。

因为c在$指令中按字面使用，所以这个语句可以对c.

但是如果我只是想什么console.log('yes')时候c改变呢？

let c = 0;
$: console.log('yes');

显然，该语句对console.log('yes')没有反应性c。

此外，如果我仍然console.log(c)将它放入一个函数中：

let c = 0;
function log() {
  console.log(c);
}
$: log();

log()对 也没有反应c。

那么，如果响应式代码实际上不包含我想要响应的变量，我该怎么办？

我一直在使用 Svelte 3。我正在尝试创建一个基本的 Link 组件，其使用方式如下：

<Link to="http://google.com">Google</Link>

我的组件呈现一个普通的 HTML<a>标签，在链接文本前面带有一个图标：

<script>
  export let to
  const imageURL = getFaviconFor(to)
</script>

<a href={to}>
  <img src={imageURL} alt={`${title} Icon`} />
  <slot />
</a>

title我在标签的 alt 属性中显示的变量需要<img>是未命名槽的文本值。这是一个非常基本的示例，但是有什么方法可以获取这样的插槽的值吗？

我正在使用 Svelte.js 创建一个多步表单，但我遇到了一个问题，用独特的道具呈现每个表单页面。

这是一个简单的演示，向您展示我的意思：

// App.svelte

<script>
    import FormPage from "./FormPage.svelte";
    let formNode;

    let pageSelected = 0;

    let formPages = [
        {
            name: "email",
            label: "Email"
        },
        {
            name: "password",
            label: "Password"
        }
    ];

    const handleIncPage = () => {
        if(pageSelected + 1 < formPages.length)
        pageSelected = pageSelected + 1;        
    }

    const handleDecPage = () => {
        if(pageSelected -1 > -1)
        pageSelected = pageSelected - 1;        
    }
</script>

<form bind:this={formNode}>
    <FormPage pageData={formPages[pageSelected]} />
</form>

<button on:click={handleDecPage}>Back</button>
<button on:click={handleIncPage}>Next</button>

<p>
    Page …

我想知道我是否能够从一个普通的 .js 文件访问我的Svelte存储值。

我正在尝试编写返回基于存储值的动态值的函数，以将它们导入任何组件。但在一个普通的 .js 文件中，我不能只用 $ 符号访问存储值..

使用存储值并可用于多个组件的基本函数的快速示例：

//in .svelte

function add() {
    $counter = $counter + 1;
 }

编辑：改写一下

编辑： 找到了一个解决方案，但我真的不知道它是否真的优化了..

//in .js file

import { get } from "svelte/store";
import { counter } from "./stores";

export function add() {
    var counterRef = get(counter);
    counter.set(counterRef + 1);
}

组件.svelte

<script>
  export let hiddenStatus;
</script>

<div class:hidden={hiddenStatus}></div>

应用程序.svelte

<script>
  import Component from "./Component.svelte";
</script>

<Component hiddenStatus={true}/>
{Component.hiddenStatus}

当我尝试获取该属性值时，hiddenStatus它显示为undefined. 我该如何解决这个问题？