Svelte-UI，一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui，一套svelte3开发的桌面端ui组件库。在设计及功能上借鉴了element-ui组件库。所以组件的使用方法也非常类似饿了么组件库。起因是想开发一个svelte后台管理系统，无赖发现没有比较合适的svelte组件库。于是
基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat。 基于svelte3+svelteKit+sass+mescroll.js+svelte-layer+svelte-scrollbar等技术搭建仿微信网页版聊天案例Svelte-Webchat。全新的Dock菜单(可拖拽排序/鼠标滚轮左右滚动)，整体MacOs风格毛玻璃背景虚化效果。
基于Svelte3.x开发pc网页版自定义弹窗组件svelteLayer。 svelte-layer：基于svelte.js轻量级多功能pc桌面端对话框组件。支持多种弹窗类型、30+参数随意组合配置，整合了拖拽/四周缩放/最大化/记忆弹窗位置/全屏/自定义层级等功能。 svelteLayer功能效果上有些类似layer.js插件。 ◆
基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom。 svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+svelte-popup等技术搭建开发的仿微信app界面聊天项目。支持发送图文消息/gif动图、图片/视频预览、下拉刷新、红包及朋友圈等功能。 一、技术框架 编码器：V
每个组件都有从创建到销毁的过程，这个过程被称为生命周期 生命周期可以解决一些业务上的需求，比如组件加载时请求数据、组件销毁时清除定时器 Svelte 提供了五个生命周期函数：组件加载 onMount、更新前 beforeUpdate、更新后 afterUpdate、组件销毁 onDestroy、tick 下面将介绍这
网站参考 网站参考 使用svelte时，反应性会自动发生。在Svelte中，任何组件的单个片段都可以随时动态地重新生成！svelte精心管理每个片段（什么是一个片段?就是"代码段"，是指svelte再合适的时间也就是依赖状态发生变化时，被动管理和重新执行的任何js表达式。最终，片段用于提供我们的htm
SVELTE + VITE (一) Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。 与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样
1 前言 当一个组件具有过多 props 时，就渴望有一种统一设置的方法；当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？ 2 正文 首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 props 属性。 <script> expor
1 前言 前端组件化开发，单向数据流，有了 state、props 和状态更新机制，也就能做简单的 web 应用啦~ 2 正文 props 在根组件上以 props 选项的形式声明，在嵌套组件树中，可以自由设置和传递。 先写一个子组件 Nested.svelte，该组件会在 App.svelte 中被引用，这里 export let name; 不
1 前言 Svelte 中条件渲染使用{#if ...} ... {/if} 声明，那列表渲染是不是类似：{#for ...} ... {/for}？ 2 正文 Svelte 中的列表渲染使用跟条件渲染类似的语法，不过关键字换成了 each，item 可以解构，这样看起来比较清晰。 <script> const list = [ { name: "lilei", age: 21 },
1 前言 模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if 2 正文 <script> let counter = 0; const increment = () => { counter++; }; </script> <button on:click={increment}>increment</button> {#if count
key 值也存在于 Svelte 中，它在列表渲染区块中作为最后一个参数存在，使用括号包裹。 <script> let list = [ { name: "lilei", age: 21 }, { name: "hanmeimei", age: 24 }, { name: "lihua", age: 18 }, { name: "zhangsan", age: 22 },
正文 因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise = null; // 异步块需要的 Promise 对象 /
正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- once --> <div> <button on:click|once={clickHandler}>只触发一次:
又一个前端超新星项目 ？ 大家好，我是鱼皮。 今天逛 GitHub 的时候，在趋势榜上看到一个项目，竟然短短一天的时间内，涨了 1000 多个星星！ 就是这个名为 solid 的项目： 要知道日增上千 star 可是非常难得的，我不禁感到好奇，点进去看看这个项目到底有啥牛逼的？ 啥是 Solid？ 这是一个国外的前端
Svelte Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM
正文 我们拿一个计数器举例，count 变量存在 store 中，我们用 count.set() 重置，用 count.subscribe() 订阅，用 count.update() 更新，一切看起来都很 OK，但实际上，如果想要更好的可维护性，这个 count 应该继续定义它的行为逻辑，也就是预定义好它的更新是怎样的、它的重置是怎样的。这样看起
正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <script> import { onMount } from "svelte"; // life cycle
正文 类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div bind:clientWidth bind:clientHeight> {clientWidth
正文 下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script> <header> <button on:click={add}>Add new<
1 前言 Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。 2 正文 Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似obj.a = 2 这种操作也是无法监听的，因为在 Svelte 中，被更新的变量的名称必须出现在赋值语句的左侧。 <
1 前言 不知道为什么翻译成“反应性”，而不是“响应式”，因为不是选项式 API，计算属性在 Svelte 中的写法会是怎样的呢？ 2 正文 Svelte 中的计算属性使用 $: 起手作变量声明，它会在等号右边依赖的值变化时自动计算。 <script> let count = 3; $: dbCount = count * 2; // here co
喜欢就关注我们吧！ StateOfJS 已发布了 2020年的 JavaScript 现状调查报告。今年的 JavaScript 现状调查是该调查的第五版，覆盖了来自 137 个国家的 23,765 位受访者；其中，大约 91％ 的受访者被确定为男性，三分之一的受访者年收入在 50,000 美元至 100,000 美元之间。 JavaScript 2020 大
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务
按官方文档配置scss后，VS Code会报如图所示错误，如图 解决办法： 原因是使用node-sass时需配置node路径，首先在cmd上输入where node(windows) | which node(Mac,Linux)，找到node路径 C:\Users\xixi> where node C:\Program Files\nodejs\node.exe 进入VS Code设置搜索svelte，填入
