初识Svelte前端框架，据说比Vue还好用！

已于 2023-02-18 23:20:50 修改
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript&TypeScript 文章标签： svelte
于 2023-02-18 22:52:07 首次发布
随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥 出品~么么哒”！
本文链接：https://blog.csdn.net/qq_37860634/article/details/129105843
本文介绍了如何创建一个Svelte项目，使用Vite进行初始化，并通过npm安装依赖。在启动开发服务器后，作者对比了Svelte的运行速度与Vue、Angular，并分享了解决globalThis未定义问题的方法，确保项目正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

官网https://www.sveltejs.cn/

----------------------------------------

开始正题：

新建文件夹svelte

在当前文件夹打开cmd命令框运行：

npm init vite@latest

进入项目并安装依赖

cd svelte-project
npm i
npm run dev -- --open

运行速度是真它喵的快！那一刻我真的不想用vue、Angular了！

会自动在浏览器访问 http://127.0.0.1:5173/

如果访问后页面不显示，控制台报错# Uncaught ReferenceError: globalThis is not defined at overlay.ts:120#
在index.html中添加<script> this.globalThis || (this.globalThis = this) </script>处理

博客
前端old driver强哥带你用Vue.js实现奥迪A8L尾灯特效~别废话，赶紧上车。
04-27 3914
​强哥有一天在B站看到全新奥迪A8L的贯穿式OLED尾灯，惊吓到了~能够把夜总会的氛围灯效如此巧夺天工地移植到车尾灯上面，估计也只有奥迪能够做到！如此骚气的尾灯效果动画太TM酷炫了，我们能不能用Vue来实现呢？答案是肯定的！​
博客
推荐一本Vue.js书籍给你们《Vue.js框架与Web前端开发从入门到精通》
11-06 9271
少侠，我看你骨骼惊奇是万中无一的前端开发奇才弘扬中国编程文化的重任就交给你了我这里有本《Vue.js框架与Web前端开发从入门到精通》作者：舒志强（博主本人）
博客
【Relax人生法则之躺平方法论】如何优雅地躺平？那些看似无足轻重，实则细思极恐的毒鸡汤。
10-11 8123
人的一生就是产品经理的一生，产品经理是你自己，产品也是你自己，你通过数十余载来打磨、优化、改进、迭代自己，你就是你身体的产品经理。
博客
自定义方法clickoutsideFilter点击气泡框外部隐藏气泡框
07-27 121
摘要：该代码实现了一个包含高级搜索功能的Vue组件，通过el-popover实现点击"高级搜索"按钮显示/隐藏搜索面板。组件采用事件监听处理点击外部区域自动关闭popover，同时避免误触发（如点击popover内部元素或按钮时不关闭）。核心功能包括：1) 自定义popover显示控制；2) 智能点击区域检测；3) 组件销毁时的事件清理。代码结构清晰，包含template模板、script逻辑和样式控制，适用于需要复杂搜索条件的场景。
博客
高亮匹配关键词样式highLightMatchString、replaceHTMLChar
07-23 289
该代码实现了一个HTML字符串高亮匹配功能：1. 首先过滤掉正则表达式特殊字符，确保安全匹配；2. 提供自定义高亮样式类选项，默认使用红色加粗样式；3. 通过正则替换将匹配字符串包裹在span标签中；4. 包含HTML字符转义功能，防止XSS攻击；5. 保留原始匹配项的大小写格式。核心方法是使用正则表达式全局替换匹配内容，并支持自定义高亮样式类。
博客
【quickSearchMenu】自定义组件：基于sgAutocomplete完成快速查找系统菜单并跳转，支持菜单拼音声母组合前端静态查询
07-22 198
这篇文章摘要： 本文展示了一个Vue组件quickSearchMenu.vue的实现，该组件提供了一个快速搜索菜单功能。主要特点包括：1) 使用sgAutocomplete组件实现自动完成搜索；2) 支持PC和移动端适配；3) 可配置搜索项、终端类型和本地存储键；4) 通过v-model控制显示/隐藏；5) 包含透明背景遮罩层。组件通过扁平化菜单结构处理数据，并提供了清除历史记录功能。样式部分使用SCSS编写，包含固定定位和响应式设计，确保在不同设备上正常显示。
博客
VSCode解决中文乱码显示问题：运行一行代码解决VSCode终端不支持显示中文（chcp 65001）
07-20 125
在VSCode中解决终端中文乱码问题，只需输入命令"chcp 65001"切换为UTF-8编码即可。该命令将终端代码页设置为支持中文显示的65001代码页，简单有效解决中文显示异常问题。适用于Windows系统下VSCode终端的常见中文编码问题。
博客
筛选一维数组里面重复的元素，并返回打印出来
07-13 290
JavaScript数组去重与集合操作摘要：本文介绍了两种JavaScript数组处理方法。一是利用filter和some方法实现数组合并与去重，筛选出ID不重复的元素进行合并更新。二是通过ES6的Set对象特性，简洁高效地实现数组去重、并集、交集和差集运算。这些方法为数组处理提供了便捷的解决方案，代码简洁实用。(149字)
博客
【教育技术学】认知新领域知识、技术、理论的学习过程和研究过程需要聚焦的若干概念词汇合集
07-13 484
概念认知涉及定义、内涵、结构与演变过程，涵盖其历史起源、发展逻辑及核心要素。从理论框架到应用实践，包括分类、功能、影响及特征分析。研究范畴可延伸至模型构建、变量关系、风险管理及系统评价，强调关联比较与认知拓展。
博客
基于elementUI的el-autocomplete组件的自动补全下拉框实践
07-10 391
在Vue的Autocomplete组件中，通过设置`activated`属性为`true`和使用`suggestions`可以直接触发下拉框内容更新。【sgAutocomplete】自定义组件：基于elementUI的el-autocomplete组件开发的自动补全下拉框组件（带输入建议的自动补全输入框）_elautocomplete自定义-CSDN博客。el-autocomplete那些在饿了么官方文档看不到的API_el-autocomplete activated-CSDN博客。
博客
【AIicon】自定义组件：AI润色图标按钮，支持后台接通AI润色词汇、文本段落接口并响应结果
07-09 229
这是一个名为AIicon的Vue组件，用于实现文本AI润色功能。组件主要特性包括： 显示AI图标和"小智AI润色"文字 点击触发文本润色功能 支持加载状态显示 可配置润色要求和内容定位 润色后通过事件返回结果 组件使用Element UI的el-link作为加载指示器，默认按学术科研标准润色文本，支持第一人称谦和表述。可通过data属性传递需要润色的内容和配置参数，润色结果通过response事件返回。组件样式包含悬停效果和精确定位功能。
博客
一行代码的方法将对象转换为url后面带问号的跟参?param1=***&param2=***&....
07-07 112
摘要 该代码定义了一个名为letp的函数，用于将对象转换为URL查询字符串。函数接受一个对象参数d，通过Object.keys()获取对象键名数组，然后使用reduce()方法将键值对拼接成?key1=value1&key2=value2...格式的字符串。若对象为空或未提供，则返回空字符串。该函数简洁高效地实现了对象到URL参数序列化的功能。
博客
【sgTextEdit】自定义组件：表格单元格文本内容，跟随编辑按钮图标，支持自定义点击后编辑修改的api接口名。
06-30 184
【代码】【sgTextEdit】自定义组件：表格单元格文本内容，跟随编辑按钮图标，支持自定义点击后编辑修改的api接口名。
博客
基于elementUI的全局移动端样式、公共样式_mobile.scss
06-28 138
【代码】基于elementUI的全局移动端样式、公共样式_mobile.scss。
博客
【sgMoreMenu】自定义组件：“更多操作⌵”上下文关联按钮）下拉菜单。可用于表格操作列显示不下折叠的更多操作下拉框。
06-25 445
【代码】基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单。_dropdown 更多操作 样式。基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单_dropdown 更多操作 样式-CSDN博客。【代码】基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单。基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单_dropdown 更多操作 样式-CSDN博客。
博客
el-dropdown自定义“更多操作⌵”上下文关联按钮）下拉菜单
06-25 456
文章浏览阅读520次。【代码】基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单。_dropdown 更多操作 样式。基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单_dropdown 更多操作 样式-CSDN博客。
博客
在没有设置div初始宽高度或结束宽高度数值的情况下，如何让变化div宽高度实现过度动画transition效果，用interpolate-size: allow-keywords即可实现
06-11 260
【代码】在没有设置div初始高度的情况下，如何让变化div高度实现过度动画transition效果，用interpolate-size: allow-keywords即可实现。
博客
一行递归可选链代码实现 js 通过递归获取 对象 多个层级字段“字段.字段.字段.字段.字段”的值（支持无限极对象子节点参数名object.a.b.c.d...）
06-10 101
【代码】一行递归可选链代码实现 js 通过递归获取 对象 多个层级字段“字段.字段.字段.字段.字段”的值。
博客
js将数值转换为万、十万、百万、千万、亿
06-10 243
【代码】js将数值转换为万、十万、百万、千万、亿。
博客
Blob设置type为application/msword将document DOM节点转换为Word（.doc,.docx），并下载到本地
06-10 482
【代码】Blob设置type为application/msword将document DOM节点转换为Word（.doc,.docx），并下载到本地。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值