【Svelte】浅谈Svelte及项目创建语法例子编程工具使用

原创 已于 2025-11-28 01:01:28 修改 · 914 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端框架 #javascript #vscode #html #css #node.js

于 2025-11-28 00:09:46 首次发布

文章目录

概要

Tip：Svelte是UI组件框架，如果想了解全栈Web应用框架等应用开发解决方案就要学习SvelteKit

文章内容点

  • 浅谈Svelte
  • 创建初始的Svelte项目
  • 使用VsCode查看代码本地运行。
  • svelte5.x语法例子
  • 分享代码git地址

简要说明

  • 先看一下State of JS官网2024年的统计截图https://stateofjs.com
    在这里插入图片描述
    参照资料现在工作中常用的前段框架按照排名依次是React,Vue.js,Angular还有这次要分享的Svelte：26%（2024）稳步提升中

  • What is Svelte?

官方回答：Svelte is a tool for building web applications.
Svelte官方教程参照：https://svelte.dev/tutorial/svelte/welcome-to-svelte

  • Svelte与上述主流三大框架核心区别是什么？
    核心区别：编译时框架 vs 运行时框架
    1.设计理念差异：在构建/编译阶段将组件转换为高效的原生JavaScript代码，不依赖运行时框架。React/Vue/Angular：作为运行时框架，需要在浏览器中加载框架代码并实时处理虚拟DOM或响应式系统。
    2.无运行时开销轻量特性：Svelte编译后的代码只包含必要的更新逻辑，没有框架运行时开销。无需在浏览器中加载框架代码，直接执行编译后的原生JavaScript。
    3.编译时依赖分析机制：在Svelte编译器会分析模板中的绑定关系，确定哪些DOM节点依赖于特定变量，当变量变化时，直接更新对应的DOM片段。

创建Svelte项目

  • 在当前目录下创建Svelte项目
npm create vite@latest my-svelte-app -- --template svelte

STEP1
在这里插入图片描述
STEP2
在这里插入图片描述
STEP3
在这里插入图片描述
STEP4
在这里插入图片描述
STEP5
在这里插入图片描述
创建成功会自动启动項目，浏览器访问Local地址查看結果
在这里插入图片描述

使用VSCode

  • 提前安装Svelte f
最低0.47元/天 解锁文章
醉猫v
关注
create-svelte-library::package:CLI，用于创建可重复使用的Svelte库
05-12
CLI，用于使用汇总创建可重用的现代Svelte库。 特征 易于使用的CLI 处理所有现代JS功能 捆绑commonjs和es模块格式 例如使用和本地开发 捆绑 详尽的文档 全局安装 npm install -g create-svelte-library npx的用法 ...
svelte-seed：一个种子项目，用于使用svelte快速启动和运行
02-05
一个随时可以进行现场直播的苗条项目。 使用parceljs进行捆绑。 只需编辑src/components的文件即可上手。 制备 为自己制作一份新鲜无忧的副本！ npx degit antony/svelte-seed npm install 怎么跑 npm run dev ...
浅谈Blazor开发的那些事
MicrosoftReactor的博客
08-04 935
在这篇文章中，我们将解决一些常见的Blazor问题。具体来说就是"什么是Blazor"，但更重要的是"为什么要用Blazor"。既然我们已经有了Angular、React、Vue或其他一些JavaScript框架，为什么还要关注Blazor 以及为什么要选择Blazor? WebAssembly又是关于什么的?我们将介绍微软的web应用程序开发框架的历史，以及我们对其光明前景的展望。 什么是 Blazor Blazor有几个常见的定义，第一个非常简单: Blazor是一个用.NET构建交互式客户端web
React 核心开发者 Dan Abramov 访谈实录
u012384510的博客
07-12 3009
大家好，我是若川。面试、学习源码系列、年度总结、JS基础系列译者注：本译文是在「在线对话 React.js 核心开发者」一个半小时直播的基础上进行的原文翻译，包括了直播中的所有问答内容，尽...
在框架设计中寻求平衡～
画漫画的程序员∙苏南
08-09 127
点击上方“IT平头哥联盟”，选择“置顶或者星标”这是一个由 simviso 团队对 JSConf.Asia 中关于 前端框架设计取舍 相关话题进行翻译的文档，内容并非直译，其中有一些是笔者...
使用 React Hooks 重构你的小程序
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-21 392
戳蓝字「前端瓶子君」关注我们哦！“本文由 余澈 根据他在GMTC 全球前端大会 上的《使用 React Hooks 重构你的小程序》分享整理而成”背景—一直关注小程序开发的朋友应该...
React详解二
weixin_43852916的博客
01-11 597
合成事件 此参考指南记录了构成 React 事件系统一部分的 SyntheticEvent 包装器。请参考有关事件处理的指南来了解更多。 SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。 如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。每个 SyntheticEvent
react学习笔记之hook
浩星
07-15 736
摘自官网：入口 目录： Hook 简介 Hook 概览 使用 State Hook 使用 Effect Hook Hook 规则 自定义 Hook Hook API 索引 Hooks FAQ Hook 简介 Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // .
一些可以参考的文档集合4
xuejianxinokok的专栏
04-19 1254
20220419 Redis是怎样通讯的？_redis_ooooooh灰灰_InfoQ写作平台模型Redis 协议模型就是简单的请求-响应模型，和平常的 Http 协议有点类似。客户端发送 Redis 命令，然后服务端处理命令并返回结果给客户端。Redis 官方说这可能是最简单的网络协议模型了https://xie.infoq.cn/article/0496d06df156ad6a9ff365d08MySQL 是怎样通讯的？_Go_ooooooh灰灰_InfoQ写作平台前言我们平常使用数据库的场景一般是程
svelte-custom-element：一个项目模板，用于使用Svelte构建自定义元素（Web组件）
02-06
要使用基于此模板创建一个新项目： npx degit gojutin/svelte-custom-element my-custom-element cd my-custom-element 安装依赖项： cd my-custom-element npm install 然后使用启动开发服务器： npm run dev...
精选资源
vue-svelte-adapter:在Vue.js中使用Svelte组件
05-16
在Vue.js中使用Svelte组件。 用法 通过npm安装： $ npm install vue-svelte-adapter 首先，制作一个Svelte组件： < p> {{ message }} < script > export default { data ( ) { return { message : '...
前端框架-框架为何应运而生？
weixin_50874350的博客
12-02 742
随着Web技术的不断发展，框架本身也在持续演进，以适应新的开发需求和技术环境。
前端在移动端中的页面切换
2509_93939582的博客
11-28 641
记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
最新发布
a3212768093的博客
12-02 417
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
祈澈菇凉
12-02 532
✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 412
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
js考古之seajs.use、layui.use是啥 以及来源？
weixin_52236586的博客
11-29 490
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
前端路由管理
2509_93941777的博客
11-28 431
这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。
养老保险|智慧养老|基于springboot+vue养老保险系统设计与实现(源码+数据库+文档)
伟庭的博客
11-30 793
【摘要】本文介绍了一个基于SpringBoot+Vue的智慧社区养老系统开发项目。针对传统社区养老管理效率低下的问题，系统实现了公告管理、健康档案、养老政策等核心功能模块。采用Java技术栈开发，包含项目管理、养老政策管理、公告管理等后台管理界面，并展示了实体ER图与核心代码片段。系统旨在提升社区养老服务的信息化水平，为老年人提供便捷的健康管理服务。项目适合作为计算机专业毕业设计选题，文末提供了源码获取方式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值