svelte | 易学教程

How do I add categories or tags to a Svelte/Sapper markdown site?

阅读更多关于 How do I add categories or tags to a Svelte/Sapper markdown site?

问题 Forking this question off from Sapper/Svelte: How do I add markdown files? to help future searchers: I see that all the posts will have a link right after the Top-Level Domain Ex www.example.com/post1 , www.example.com/post2 . But what if someone using the template wants to categorize the posts. Ex www.example.com/svelte-posts/post1 , www.example.com/vuejs-posts/post1 回答1: If you want traditional WordPress-style categories I would add that to the markdown front matter of the posts (Jekyll

谈谈魔法消失UI框架 Svelte

阅读更多关于谈谈魔法消失UI框架 Svelte

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最近基于公司业务需求，可能会要开发一款浏览器插件，调查后发现插件UI开发本质上就是开发页面。于是我便开始寻找一个非常小又非常快的新玩具(工具)。毕竟前端 3 大框架无论哪一个去开发浏览器插件都无异于大炮打蚊子。至于开发效率极低的 Dom 操作我也不想去碰了。于是我就找到了这个已经在国外非常火热的魔法消失 UI 框架 —— Svelte 。 Svelte是什么 Svelte 是一个编译型的前端组件框架。该框架没有使用虚拟 dom，而是通过编译在应用状态发生改变时提供异步响应。编译型框架任何前端框架都是有运行时的，(以 Vue 为例) 该框架至少需要在浏览器携带虚拟dom 以及 diff 算法。如果在页面中直接引入 Vue 脚本，还需要追加 Vue 前端编译器代码。可以参考 Vue 对不同构建版本的解释。 Svelte 则不同，它从开始就决定把其他框架在浏览器所完成的大部分工作转换到构建中的编译步骤,以便于减少应用代码量。它通过静态分析来做到按需提供功能(完全不需要引入)，同时它也可以分析得出根据你当前的修改精准更新 dom的代码来提升性能。我们以最简单的代码为例子。 // App.svelte <h1>Hello world!</h1> // main.js import App from './App

How to add css from node_modules to template.html in Svelte

阅读更多关于 How to add css from node_modules to template.html in Svelte

问题 I have a sapperjs app that like one you get from calling npx degit sveltejs/sapper-template my-app . I'd like to add a font. Normal people might add a line like this to app/template.html : <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab"> Network reasons make this impractical, so I want to host the font locally. In create-react-app I would simply import 'typeface-roboto-slab' at the top of my App.jsx or equivalent component. How can I achieve a similar effect in my

How to add css from node_modules to template.html in Svelte

阅读更多关于 How to add css from node_modules to template.html in Svelte

Sapper - protected routes (route guard)

阅读更多关于 Sapper - protected routes (route guard)

问题 My question is very simple. How do you prevent, e.g. non authorized user, to enter specific routes in sapper? user.svelte <script> import { onMount } from 'svelte'; onMount(() => { if(!authenticated) window.history.back() }); </script> Is there any option to run some code before mounting to the DOM? How do you solve this kind of problem? Thank you. 回答1: I can't say it's the right thing. It's what I do in my SPAs. If I want to protect all routes of my app. I create following in _layout.svelte

Recreate a component?

阅读更多关于 Recreate a component?

问题 Is there a way to recreate a component in Svelte? The context is that I have a component which has already been created. Once it completes its process, I would like for it to be destroyed and then created again. This would restore its properties to their default state, and ensure that the same is done for its nested components. I imagine that this is technically possible with the existing component methods, but I was wondering if there's a straightforward way to go about it. As an aside, I'm

How to ensure local-only transitions when Svelte is reusing the parent dom element

阅读更多关于 How to ensure local-only transitions when Svelte is reusing the parent dom element

问题 In Svelte, I have a component which is used to display items in two different lists. When those items are moved from one list to the other, they use a transition to animate in or out. However, I also have a way to filter what is displayed on the screen. Displaying a new set of items would use the same component, but with different data. In this case, I don't want the transition animation to occur. I assumed that adding the local modifier would do the trick, but it seems that Svelte isn't

how to force rendering in svelte 3?

阅读更多关于 how to force rendering in svelte 3?

问题 I have the case of a form with input fields. One of those fields must be cleared when I type (keyup) the Enter key. I know I can handle this field as a controlled field (meaning listening on keyup and maintain a copy of the field), or alternatively use two-way binding, but in my use case I can't do the latter, and I'd rather not do the former. My question is thus, how can I force rendering of a Svelte Component? Typically, the form is displayed with <Component field="value" /> , the user

now-cli deployment doesn't build package.json dependencies

阅读更多关于 now-cli deployment doesn't build package.json dependencies

问题 I'm trying to deploy a Sapper built application via @now-node . The task is basically to deploy a Polka server with dependencies and to serve static/ and client/ files statically. I have managed to include the files that Lambda requires via includeFiles but now I see in the logs that the builder ignores dependencies described in package.json. The exact message is Starting server on port 3000 Cannot find module 'sirv' Did you forget to add it to "dependencies" in `package.json`? But I see in

Is it possible to dynamically load a Svelte template at runtime?

阅读更多关于 Is it possible to dynamically load a Svelte template at runtime?

问题 I have looked at the documentation for [<svelte:component>] (here), but that looks like I would have had to import all of the possible templates at compile time. Is it possible in Svelte to load any number of arbitrary templates from something like a fetch() call based on a user action? Then inject data into it? Would it be inefficient to use <slot> for something like this, if I plan on updating it after the initial load? 回答1: It's technically possible to create a component from the source