- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
svelte
——贝多芬 分享一个前端框架svelte 官网：https://svelte.dev/ 仓库链接：https://github.com/sveltejs/svelte 语法非常的简单容易上手 <script 同样是响应式 非常的有意思 使用也很简单 npm create svelte@latest myapp cd myapp npm install npm run dev
51930编辑于 2023-03-23 - 来自专栏h5
基于Svelte.js弹窗插件svelte-popup
今天给大家分享一个前端新宠框架svelte.js开发自定义组件实现方式。 前段时间有分享一个svelte自定义导航条+菜单栏(Tabbar/Navbar)组件。 这次分享一个svelte开发自定义弹框sveltePopup插件。 p12.gif p13.gif svelte-popup：基于 Svelte.js 开发的移动端弹窗组件。 </svelte:fragment> </Popup> 函数方式调用 let el = svPopup({ title: '标题信息', content: '<p style= /App.svelte'; const app = new App({ target: document.body, props: { // assuming App.svelte ok，基于svelte.js开发自定义组件就先分享到这里。后续还会分享一些svelte实例。
8.7K60编辑于 2022-03-19 - 以及常用的slot …… 总体来说来svelte基础语法实在易用，上手也很容易。更多可以查看Svelte API文档。 ，绕不开的就是状态管理库，Svelte则是提供了一个相当精巧易用的方案, Svelte store。来自专栏cc log
开箱Svelte
toc Svelte基础 模版语法 if 循环语法each 异步加载await 元素指令 神奇的符号 $ Svelte 生命周期 Svelte dispatch, Context Svelte store使用 writable readable derived Svelte的一点点不爽 总结 Svelte基础 Svelte基本使用方式上和Vue很相似，组件的 HTML，CSS，JS写在一个.svelte的文件中。
1.3K30编辑于 2022-08-16
Svelte 5 发布，Svelte史上最重要的版本
经过近 18 个月的开发，数十名贡献者提交了数千次代码，Svelte 5 终于稳定下来。这是该项目历史上最重要的版本。Svelte 5 是一次彻底的重写：开发的应用将变得更快、更小、更可靠。 值得关注的是，Svelte 几乎完全向后兼容 Svelte 4，也就是说初始升级将完全无缝：Svelt 官方介绍，随着越来越多的人使用 Svelte 构建更多、更大的应用程序，最初的一些设计决策的局限性开始变得更加明显 例如，在 Svelte 4 中，响应性完全由编译器驱动。如果在 Svelte 4 中更改响应对象的单个属性，则整个对象将失效，因为这是编译器实际能做的全部。 Svelte 5 消除了这些不一致和麻烦。 详情查看官方公告：https://svelte.dev/blog/svelte-5-is-alive
Svelte 不是 JavaScript
在这篇文章中，我尽量不抱怨太多，因为我很感激，多年来我一直在使用 Svelte 3/4 愉快地进行开发。但这并不是说，今后的任何新项目我都会选择 Svelte。 性能是个好东西，Svelte 团队在平衡性能与 DX 方面一直表现出色。 在以前的 Svelte 版本中，实现这一目标的主要方法是使用 Svelte 编译器。 Svelte 不是 Javascript Svelte 5 在这种权衡上做了加倍努力——这是有意义的，因为这正是该框架与众不同的地方。 在 Svelte 4 中，我不知道写了多少次 value = value 来触发反应性。 在 Svelte 4 中，开发人员必须了解 Svelte 编译器是如何工作的。 事实上，这就是为什么在使用 Svelte 多年后，我发现自己越来越频繁地使用 Svelte 存储，而较少使用反应式声明的原因。
React vs Svelte
「Svelte 与 React」 Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。 Svelte 在构建的时候就将代码编译成 Vanilla JS 代码，而 React 在运行时解释代码。 Svelte 文档写道： Svelte 是一种全新的构建 Web 应用的方法。 ： mkdir svelte-react cd svelte-react 接着分别创建 Svelte 和 React 的应用模板并运行。 「Svelte」 Svelte 使用它自己的模板语言来创建用户界面，而 React 使用 JSX 。Svelte 模板语言跟写 HTML 没什么两样。 如果你是一个对 Svelte 充满好奇的 React 开发人员，在属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样，后面将进行介绍。
Svelte3-Admin基于svelte-ui管理后台系统
前几天有给大家分享一个 svelte-ui 桌面pc组件库。今天再来分享一个基于svelte ui 开发的中后台管理前端解决方案。 图片svelte-ui-admin 一款基于最新前端技术栈svelte3.x+svelte-ui+vite3+echarts等技术构建的pc端后台管理系统。 图片使用技术编码工具：Vscode框架技术：svelte3.x+svelteKit+vite3UI组件库：svelte-ui (基于svelte自定义pc端UI组件库)样式处理：sass^1.54.4图表组件 svelte-ui保持一致，界面比较清晰友好，操作流畅。 国际化通过svelte-i18n插件实现国际化多语言配置。
前端框架「React」 VS 「Svelte」
「Svelte 与 React」 Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。 Svelte 在构建的时候就将代码编译成 Vanilla JS 代码，而 React 在运行时解释代码。 Svelte 文档写道： Svelte 是一种全新的构建 Web 应用的方法。 ： mkdir svelte-react cd svelte-react 接着分别创建 Svelte 和 React 的应用模板并运行。 「Svelte」 Svelte 使用它自己的模板语言来创建用户界面，而 React 使用 JSX 。Svelte 模板语言跟写 HTML 没什么两样。 如果你是一个对 Svelte 充满好奇的 React 开发人员，在属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样，后面将进行介绍。
Svelte 5 迁移指南
组件不再是类在 Svelte 3 和 4 中，组件是类。在 Svelte 5 中，它们是函数，应该以不同方式实例化。 如果您在 .js 或 .ts 文件中执行此操作，请调整文件结尾包含 .svelte，即 .svelte.js 或 .svelte.ts。 要使其动态，必须使用 <svelte:component>。在 Svelte 5 中，这不再成立：<script>import A from './A.svelte';import B from '. 在 svelte:options 里的内容被禁止在 Svelte 4 中，您可以在 <svelte:options /> 标签内写入内容。它会被忽略，但您可以在里面写一些东西。 <svelte:element> 标签必须是表达式在 Svelte 4 中，<svelte:element this="div"> 是有效的代码。这没有什么意义——您应该直接使用
svelte PC端弹窗组件|svelte.js网页对话框
之前有分享一个svelte.js开发自定义移动端弹框组件sveltePopup。今天再分享一个svelte自定义网页版弹窗组件svelteLayer。 012360截图20220417224732683.png svelte-layer：基于 Svelte.js 开发的PC端弹窗组件。 -- 加载动态组件 --> {:else if type == 'component'} <svelte:component </script> svelte-layer支持自定义拖拽区域drag: '#aaa' ，是否拖拽到窗口外dragOut:true 。 p6.gif ok，基于svelte.js开发自定义弹窗组件就分享到此。后面 分享一些svelte自定义组件。
Svelte3-Webchat基于svelte.js网页版聊天实例
项目简介 svelte-webchat一款基于svelte3.x+sveltekit+svelteLayer开发构建的仿微信PC版聊天实例。 p2.gif 前段时间也有分享一个svelte.js移动端聊天实例。 下拉刷新：mescroll.js 滚动条组件：svelte-scrollba 对话框组件：svelte-laye sass预处理：sass^1.50+svelte-preprocess p4.gif 19360截图20220514111642509.png svelte-layer一款功能丰富的svelte.js自定义PC端弹窗组件 svelte公共布局模板 使用sveltekit构建的项目，提供了 __layout.svelte公共布局及__error.svelte错误处理。
使用Svelte开发Chrome Extension
经过多方技术选型（React、原生、Vue、Svelte等），最终选择Svelte，原因是 语法简单，心智负担小 运行时代码少，打包体积小 响应式 d=====(￣▽￣*)，接下来就开始Svelte × 二、创建&开发 2.1 项目创建 2.1.1 项目初始化 使用Svelte Kit新建项目npm`` init svelte@next qrcode-extension ，目录结构如下： src： 源文件目录 lib：组件库等 routes：约定式路由文件 app.html：入口模板文件 static：静态文件目录 svelte.config.js：svelte配置 初始化项目之后可以直接npm 因此在项目的静态资源文件目录中添加manifest.json文件： { "name": "QrCode", "description": "A simple qrcode extension powered by Svelte true }; let [tab] = await chrome.tabs.query(queryOptions); return tab; } import { onMount } from 'svelte
前端Svelte框架初体验
一、Svelte简介 Svelte是一个新兴的热门前端框架，作者是 Rich Harris，被称为前端界的【轮子哥】，有Ractive、Rollup 和 Buble开源作品。 不过，这倒并不是说Svelte有多厉害，因为Svelte 当前仍是一个小众的开发框架，市场占有率方面也仍小于React和Vue，不过进步是特别明显的。 二、Svelte的优点 事实上，作为一个前端框架，Svelte在语法、使用体验上没有什么特别之处。真正不同的地方，是Svelte对前端AOT（ahead-of-time，可以理解为预编译）的探索。 不过，Svelte的循环语句实在让人难以接受。 参考： 携程机票前端Svelte生产实践 Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App 基于Svelte3+SvelteKit+Sass仿微信Mac
从Todolist入门Svelte框架
从Todolist入门Svelte框架 Svelte入门 Svelte-重编译框架-编译器即框架 Svelte和React、Vue这些JavaScript框架类似，希望开发者更好的去构建交互式界面 Why Svelte? 体积+性能：Svelte在编译期做静态分析来生成功能，从而减小了打包后得代码体积。 以上这些都是在大致浏览完Svelte的官方文档以及相关文章后对Svelte的一些看法，然后我会尝试用Svelte写一个TODOList，它会包括基础的增加删除完成以及拓展的修改、回收站、添加删除分组、使用 我希望写一写在我初步了解Svelte后，以Svelte对比主流的前端框架，看一看Svelte产生的背景以及与其他框架对比Svelte的优劣情况。 Svelte的设计理念 Svelte作者是 Rich Harris，同时也是 Rollup 的作者。
简单、好懂的Svelte实现原理
Svelte问世很久了，一直想写一篇好懂的原理分析文章，拖了这么久终于写了。 本文会围绕一张流程图和两个Demo讲解，正确的食用方式是用电脑打开本文，跟着流程图、Demo一边看、一边敲、一边学。 Demo1 Svelte的实现原理如图： 图中Component是开发者编写的组件，内部虚线部分是由Svelte编译器编译而成的。图中的各个箭头是运行时的工作流程。 在Demo2中，状态count的变化直接对应p方法中一个if语句，使得Svelte执行「细粒度的更新」时对比使用虚拟DOM的框架更有性能优势。 参考资料 [1] Demo1 repl: https://svelte.dev/repl/9945d189204a4168b4c23890f1d92a3a? version=3.19.1 [2] Demo2 repl: https://svelte.dev/repl/bf22a31a0eff4875b5b3084aa2b85fc3?
Svelte中文文档 1基础介绍
一.介绍 欢迎来到Svelte的教程。它将使你轻松学会构建一个快速的小型web应用程序。 你还可以查阅API文档和示例了解到更多Svelte相关内容。 你可以使用Svelte构建你的整个应用程序，或者你可以在现有的代码基础之上渐进式的使用Svelte。你也可以将组件作为独立的包在任何地方使用，不会有依赖常规框架的使用成本。 怎样使用这个教程 在了解Svelte之前，你需要对HTML，CSS，和JavaScript有一个基本的认识。 你将看到为新特性设计的小练习，通过学习这个教程你将逐步的了解Svelte。 理解组件 在Svelte中，一个应用程序由一个或更多的组件组成。组件是一个可复用的独立的代码块，他由HTML，CSS，JavaScript封装而成。文件后缀写为.svelte。 并不是很容易解决可访问性（简写为a11y），但是如果你使用Svelte编写标签，Svelte将会通过警告提示你。
新兴前端框架 Svelte 从入门到原理
在这篇文章中，我们将会介绍 Svelte 框架的特性、优缺点和底层原理。 本文尽量不会涉及 Svelte 的语法，大家可以放心食用。 我们认为，崭露头角的 Svelte 应该是其中的选项之一。 Svelte 简介 Svelte叫法是[Svelte], 本意是苗条纤瘦的，是一个新兴热门的前端框架。 ? 如果你不确定自己是否该了解 Svelte，可以先看一下 Svelte 的一些发展趋势。 开发者满意度 从2019年开始, Svelte出现在榜单中。 为什么 Svelte 性能还不错，至少没有我们预期的那么糟糕？我们接下来会在原理那一小结来介绍。 Svelte 劣势 说完了 Svelte 的优势，我们也要考虑到 Svelte 的劣势。 我们模拟一个 Svelte 组件，这个 Svelte 组件会修改33个数据。
前端框架 React 和 Svelte 的基础比较
Svelte 与 React Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。 Svelte 在构建的时候就将代码编译成 Vanilla JS 代码，而 React 在运行时解释代码。 Svelte 文档写道： Svelte 是一种全新的构建 Web 应用的方法。 ： mkdir svelte-reactcd svelte-react 接着分别创建 Svelte 和 React 的应用模板并运行。 不管是 Svelte 和 React ，都是把组件源码放到 src 文件夹下，Svelte 项目主要是一些扩展名为 svelte 的文件，而 React 项目则是一些 .js 的文件。 如果你是一个对 Svelte 充满好奇的 React 开发人员，在属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样，后面将进行介绍。
Svelte框架实现表格协同文档
首先，从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式，前端使用npm作为脚手架搭建Svelte框架。 后端使用Java的SpringBoot作为后端框架。 首先，介绍下在前端Svelte框架下搭建在线表格编辑器。 在上一篇文章中，我们介绍了如何在Svelte框架中实现在线表格编辑器。 我们按照此思路新建一个SpreadSheet.svelte文件，写入基础在线表格编辑器。 这里我们用了svelte-spa-router进行路由跳转 与isomorphic-fetch进行前后端数据传输。 <script> import {onMount} from 'svelte'; import { link } from "svelte-spa-router"; import
React、Vue3、Svelte 写法大 PK
本文将会从响应式、模板、生命周期、组件、表单、网络请求等几个方面，来对比 React、Vue3、Svelte 三大流行组件的用法区别。 "available" : "not available" }}
</template> Svelte App.svelte <script> import UserProfile from App.svelte <script> import useFetchUsers from ". SvelteKit |-- routes/ |-- +page.svelte // index page "/" |-- about/ |-- +page.svelte // about page "/about" |-- +error.svelte // handle HTTP errors 404, 500,... |-- +layout.svelte腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号