致开发者：    华为云开源开发者论坛将于12月7日（周六）9点30分在上海静安香格里拉酒店正式召开，我们诚挚邀请你报名参与本次线下开发者论坛。报名成功，现场即可领取活动伴手礼，同时中午包含大会午餐。本次活动议题融入AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度，大前端技术论坛也将从业务的实际案例出发，与大家共同探讨前端开源技术。因此希望与各位开发者齐聚上海，共赴开源盛典，共筑前端未来。活动报名链接：cid:link_0（欢迎大家扫码或点击链接参与报名~）议程内容如下：

作者：前端徐徐（同公众号）今天和大家谈谈我做 Electron 桌面端应用的这一两年，把一些经验和想法分享给大家。前言入职现在这家公司三年了，刚进公司的时候是 21 年年初，那时候会做一些稍微复杂的后台管理系统以及一些简单的 C 端 SDK。准备开始做 Electron 项目是因为我所在的是安全部门，急需一款桌面管控软件来管理（监控）员工的电脑安全以及入网准入，可以理解为一款零信任的桌面软件。其实之前公司也有一款安全管控的软件，但是Windows 和 Mac是分端构建的，而且维护成本极高，Windows 是使用的 C#, Mac 是用的 Objective-C，开发和发版效率低下，最后在研发老大的同意下，我和另外一个同事开始研究如何用 Electron 这个框架来做一款桌面端软件。我们发起这个项目大概是在 21 年年底，Windows 版本上线是在上海疫情封城期间，2022年4月份的时候，疫情结束后由于事业部业务方向的调整，又被抽调到了另外一个组去做一个 C 端的创业项目，后面项目结束了，又回来做 Electron 相关的工作直到现在，之所以是一两年，其实就是这个时间线。对桌面端开发的一些看法如果你是前端的话，多一门桌面端开发的技能也不是坏事，相当是你的一个亮点，进可攻，退可守。因为桌面端开发到后期的架构可以非常的复杂，不亚于服务端（chromium 就是一个例子），当然也取决于你所应对的场景的挑战，如果所做的产品跟普通前端无异，那也不能说是一个亮点，但是如果你的工作已经触及到一些操作系统的底层，那肯定是一个亮点。当然也有人说，做桌面端可能就路越走越窄了，但是我想说的是深度和广度其实也可以理解为一个维度，对于技术人来说，知道得越多就行，因为到后期你要成为某个方面的专家，就是可能会非常深入某一块，换一种思路其实也是叫知道得越多。所以，我觉得前端能有做桌面端的机会也是非常好的，即拓展了自己的技能，还能深入底层，因为现阶段由于业务方向的需要，我已经开始看 chromium 源码了，前端的老祖宗。当然，以上这些只代表自己的观点，大家自行斟酌。<顺便吆喝一句，技术大厂，前后端测试捞人，感兴趣可试>谈谈 Electron其实刚刚工作前两年我就知道这个框架了，当时也做过小 demo，而且还在当时的团队里面分享过这个技术，但是当时对这门技术的认知是非常浅薄的，就知道前端可以做桌面端了，好厉害，大概就停留在这个层面。后面在真正需要用到这门技术去做一个企业级的桌面应用的时候才去真正调研了一下这个框架，然后才发现它真的非常强大，强大到几乎可以实现你桌面端的任何需求。网上关于 Electron 与其他框架的对比实在是太多了，Google 或者 Baidu 都能找到你想要的答案，好与不好完全看自己的业务场景以及自己所在团队的情况。谈谈自己的感受，什么情况下可以用这门框架追求效率，节省人力财力团队前端居多UI交互多什么情况下不适合这门框架呢？包体积限制性能消耗较高的应用多窗口应用我们当时的情况就是要追求效率，双端齐头并进，所以最后经过综合对比，选择了 Electron。毕竟 Vscode 就是用它做的，给了我们十足的信心和勇气，一点都不虚。一图抵千字，我拿出这张图你自己就有所判断了，还是那句话，仁者见仁，智者见智，完全看自己情况。技术整体架构这里我画了一张我所从事 Electron 产品的整体技术架构图。  整个项目基于 Vite 开发构建的，基础设施就是常见的安全策略，然后加上一些本地存储方案，外加一个外部插件，这个插件是用 Tauri 做的 Webview，至于为什么要做这个插件我会在后面的段落说明。应用层面的框架主要是分三个大块，下面主要是为了构建一些基础底座，然后将架构进行分层设计，添加一些原生扩展，上面就是基础的应用管理和 GUI 相关的东西，有了这个整体的框架在后面实现一些业务场景的时候就会变得易如反掌（夸张了一点，因为有的技术细节真的很磨人😐）。当然这里只是一个整体的架构图，其实还有很多技术细节的流程图以及业务场景图并没有在这里体现出来，不过我也会挑选一些方案在后面的篇幅里面做出相应的讲解。挑战和方案桌面端开发会遇到一些挑战，这些挑战大部分来源于特殊的业务场景，框架只能解决一些比较常见的应用场景，当然不仅仅是桌面端，其实移动端或者是 Web 端我相信大家都会遇到或多或少的挑战，我这里遇到的一些挑战和响应的方案不一定适合你，只是做单纯的记录分享，如果有帮助到你，我很开心。下面我挑选软件升级更新，任务队列设计，性能检测优化以及一些特殊的需求这几个方面来聊聊相应的挑战和方案。软件升级更新桌面端的软件更新升级是桌面端开发中非常重要的一环，一个好的商业产品必须有稳定好用的解决方案。桌面端的升级跟 C 端 App 的升级其实也是差不多的思路，虽然我所做的产品是公司内部人使用，但是用户也是你面向公司所有用户的，所以跟 C 端产品的解决思路其实是无异的。升级更新主要是需要做到定向灰度。这个功能是非常重要的，应该大部分的应用都有定向灰度的功能，所以我们为了让软件能够平滑升级，第一步就是实现定向灰度，达到效果可回收，性能可监控，错误可告警的目的。定向更新的功能实现了之后，后面有再多的功能需要实现都有基础保障了，下面是更新相关的能力图。整个更新模块的设计是分为两大块，一块是后台管理系统，一块是客户端。后台管理系统主要是维护相应的策略配置，比如哪些设备需要定向更新，哪些需要自动更新，不需要更新的白名单以及更新后是需要提醒用户相应的更新功能还是就静默更新。客户端主要就是拉取相应的策略，然后执行相应的更新动作。由于我们的软件是比较特殊的一个产品，他是需要长期保活的，Mac 端上了文件锁是无法删除的。所以我们在执行更新的时候和常规的软件更新是不一样的，软件的更新下载是利用了 electron-update 相应的钩子，但是安装的时候并没有使用相应的钩子函数，而是自己研究了 electron 的更新源码后做了自己的更新脚本。 因为electron 的更新它自己也会注册一个保活的更新任务的服务，但是这个和我们的文件锁和保活是冲突的，所以是需要禁用掉它的保活服务，完成自己的更新。整体来说，这一块是花了很多时间去研究的，windows 还好，没有破坏其整个生命周期，傻瓜式的配置一下electron-update 相关的函数钩子就可以了。Mac 的更新花了很多时间，因为破坏了文件的生命周期，再加上保活任务，所以会对 electron-update 的更新钩子进行毁灭性的破坏，最后也只能研究其源码然后自己去实现特殊场景下的更新了。任务队列设计任务模块的实现在我们这个软件里面也是非常重要的一环，因为客户端会跑非常多的定时任务。刚开始研发这个产品的时候其实还好，定时任务屈指可数，但是随着长时间的迭代，端上要执行的任务越来越多，每个任务的触发时间，触发条件都不一样，以及还要考虑任务的并发情况和对性能的影响，所以在中后期我们对整个任务模块都做了相应的改造。下面是整个任务模块的核心能力图。 业界也有一些任务相关的开源工具包，比如 node-schedule、node-cron、cron，这些都是很优秀的库，但是我在使用过程中发现他们好像不具备并发限制的场景，比如有很多任务我们在开始设置的时候都会有个时间间隔，这些任务的时间间隔都是可以在后台随意配置的，如果端上不做并发限制会导致一个问题，就是用户某一瞬间会觉得电脑非常卡。比如你有 4 个 10 分钟间隔的任务 和 2 个五分钟间隔的任务，那么到某一个时间段，他最大并发可能就是 6，如果刚好这 6 个任务都是非常耗费 CPU 的任务，那他们一起执行的时候就会导致整个终端CPU 飙升，导致用户感觉卡顿，这样就会收到相应的 Diss。安全类的软件产品其实有的时候不需要太过醒目，后台默默运行就行，所以我们的宗旨就是稳定运行，不超载。为此我们就自己实现了相应的任务队列模式，然后去控制任务并发。其实底层逻辑也不难，就是一个 setInterval 的函数，然后不断的创建销毁，读取队列的函数，执行相应的函数。性能优化Electron相关的性能优化其实网上也有非常多的文章，我这里说说我的实践和感受。首先，性能优化你需要优化什么？这个就是你的出发点了，我们要解决一个问题，首先得知道问题的现状，如果你都不知道现在的性能是什么样子，如何去优化呢？所以发现问题是性能优化的最重要的一步。这里就推荐两个工具，一个是chrome dev-tool，一个是electron 的 inspector，第一个可以观测渲染进程相关的性能情况，第二个可以观测主进程相关的性能情况。具体可参考以下网址：developer.chrome.com/docs/devtoo…www.electronjs.org/zh/docs/lat…有了工具之后我们就需要用工具去分析一些数据和问题，这里面最重要的就是内存相关的分析，你通过内存相关的分析可以看到 CPU 占用高的动作，以及提前检测出内存泄漏的风险。只要把这两个关键的东西抓住了，应用的稳定性就可以得到保障了，我的经验就是每次发布之前都会跑一遍内存快照，内存没有异常才进行发布动作，内存泄漏是最后的底线。我说说我大概的操作步骤。通过Performance确认大体的溢出位置使用Memory进行细粒度的问题分析根据heap snapshot，判断内存溢出的代码位置调试相应的代码块循环往复上面的步骤上面的步骤在主进程和渲染进程都适用，每一步实际操作在这里就不详细展开了，主要是提供一个思路和方法，因为 dev-tool 的面板东西非常多，扩展开来都可以当一个专题了。然后我再说说桌面端什么地方可能会内存泄漏或者溢出，下面这些都是我血和泪的教训。创建的子进程没有及时销毁：如果子进程在完成任务后未被正确终止，这些进程会继续运行并占用系统资源，导致内存泄漏和资源浪费。假设你的 Electron 应用启动了一个子进程来执行某些计算任务，但在计算完成后未调用 childProcess.kill() 或者未确保子进程已正常退出，那么这些子进程会一直存在，占用系统内存。const { spawn } = require('child_process'); const child = spawn('someCommand'); child.on('exit', () => {     console.log('Child process exited'); }); // 未正确终止子进程可能导致内存泄漏 HTTP 请求时间过长没有正确处理：长时间未响应的 HTTP 请求如果没有设定超时机制，会使得这些请求占用内存资源，导致内存泄漏。在使用 fetch 或 axios 进行 HTTP 请求时，如果服务器长时间不响应且没有设置超时处理，内存会被这些未完成的请求占用。const fetch = require('node-fetch'); fetch('https://example.com/long-request') .then(response => response.json()) .catch(error => console.error('Error:', error)); // 应该设置请求超时 const controller = new AbortController(); const timeout = setTimeout(() => { controller.abort(); }, 5000); // 5秒超时 fetch('https://example.com/long-request', { signal: controller.signal }) .then(response => response.json()) .catch(error => console.error('Error:', error)); 事件处理器没有移除未正确移除不再需要的事件处理器会导致内存一直被占用，因为这些处理器仍然存在并监听事件。在添加事件监听器后，未在适当时机移除它们会导致内存泄漏。const handleEvent = () => { console.log('Event triggered'); }; window.addEventListener('resize', handleEvent); // 在不再需要时移除事件监听器 window.removeEventListener('resize', handleEvent); 定时任务未被正确销毁未在适当时候清除不再需要的定时任务（如 setInterval）会导致内存持续占用。使用 setInterval 创建的定时任务，如果未在不需要时清除，会导致内存泄漏。const intervalId = setInterval(() => { console.log('Interval task running'); }, 1000); // 在适当时机清除定时任务 clearInterval(intervalId); JavaScript 对象未正确释放长时间保留不再使用的 JavaScript 对象会导致内存占用无法释放，特别是当这些对象被全局变量或闭包引用时。创建了大量对象但未在适当时机将它们置为 null 或解除引用。let bigArray = new Array(1000000).fill('data'); // 当不再需要时，应释放内存 bigArray = null; 窗口实例未被正确销毁未关闭或销毁不再使用的窗口实例会继续占用内存资源，即使用户已经关闭了窗口界面。创建了一个新的 BrowserWindow 实例，但在窗口关闭后未销毁它。const { BrowserWindow } = require('electron'); let win = new BrowserWindow({ width: 800, height: 600 }); win.on('closed', () => { win = null; }); // 应确保在窗口关闭时正确释放资源 大文件或大数据量的处理处理大文件或大量数据时，如果没有进行内存优化和分批处理，会导致内存溢出和性能问题。在读取一个大文件时，未采用流式处理，而是一次性加载整个文件到内存中。const fs = require('fs'); // 不推荐的方式：一次性读取大文件 fs.readFile('largeFile.txt', (err, data) => { if (err) throw err; console.log(data); }); // 推荐的方式：流式读取大文件 const readStream = fs.createReadStream('largeFile.txt'); readStream.on('data', (chunk) => { console.log(chunk); }); 一些特殊的需求做这个产品也遇到一些特殊的需求，有的需求还挺磨人的，这里也和大家分享一下。保活和文件锁作为一个前端，桌面端的保活和文件锁这种需求基本是之前不可能接触到的，为了做这个需求也去了解了一下业界的实现，其实实现都还好，主要是它会带来一些问题，诸如打包构建需要自定义前置脚本和后置脚本，root 用户环境下 mac 端无法输入中文，上面提到的用 Tauri 构建一个 webview 组件就是为了解决 root 用户无法输入中文的场景。静默安装应用这个需求也是很绝的一个需求。我想如果是做常规的前端开发，估计一般都不会遇到这种需求，你需要从头到尾实现一个下载器，一个软件安装器，而且还要双端适配，不仅如此，还需要实现 exe、zip、dmg、pkg 等各种软件格式的安装，里面包含重试机制，断点下载，队列下载等各种技术细节。当时接到这个需求头也特别大，不过技术方案做出来后感觉也还好，再复杂的需求只要能理清思路，其实都可以慢慢解决。VPN 和 访问记录监控这种需求对一个前端来说更是无从入手，但是好在之前有老版本的 VPN 做参考，就是根据相应的代码翻译一遍也能实现，大部分可以用命令行解决。至于访问记录监控这个玩意咋说呢，客户端做其实也挺费神的，如果不借助第三方的开源框架，自己是非常难实现的，所以这种就是需要疯狂的翻国外的网站，就GitHub，Stackoverflow啰，总有一款适合你，这里就不具体说明了。进程禁用违规进程禁用其实在安全软件的应用场景是非常常见的，它需要实时性，而且对性能要求很高，一个是不能影响用户正常使用，还要精准杀掉后台配置的违规进程，这个地方其实也是做了很多版优化，但是最后的感觉还是觉得任务队列有性能瓶颈，无法达到要求，现阶段我们也在想用另外的方式去改造，要么就是上全局钩子，要么就是直接把相应的进程文件上锁或者改文件权限。上面所提到的需求只是一小部例子，还好很多奇奇怪怪的需求没有举例，这些奇怪的需求就像小怪物，不断挑战我的边界，让我也了解和学习和很多奇奇怪怪的知识，有的时候我就会发出这样的感叹：我去，还能这样？结语洋洋洒洒，不知不觉已经写了 5000 字了，其实做 Electron 桌面端应用的这一两年自我感觉还是成长了不少，不管是技术方面还是产品设计方面，自己的能力都有所提升。但是同样会遇到瓶颈，就是一个东西一直做一直做，到后面创新会比较难，取得的成就也会慢慢变少。另外就是安全类的桌面端产品在整个软件开发的里其实是非常冷门的一个领域，他有他的独特性，也有相应的价值，他需要默默的运行，稳定的运行，出问题可以监控到，该提醒的时候提醒用户。你说他低调吧，有时候也挺高调的，真的不好定论，你说没影响力吧，有的时候没他还真不行。让用户不反感这种软件，拥抱这种软件其实挺难的。从一个前端开发的视角来看，桌面端的体验的确很重要，不管是流畅度还是美观度，都不能太差，这也是我们现阶段追求的一个点，就是不断提升用户体验。路漫漫其修远兮，吾将上下而求索。前端开发这条路的确很长，如果你想朝某个方面深度发展，你会发现边界是非常难触达的，当然也看所处的环境和对应的机遇，就从技术来说的话，前端的天花板也可以很高，不管是桌面端，服务端，移动端，Web端，每个方向前端的天花板都非常难触摸到。最后，祝大家在自己的领域越来越深，早日触摸到天花板。

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过 cli 创建个人工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。  11 月 21 日 17 点，华为云前端工程师，云计算用户体验部体验技术团队 TinyEngine 项目成员姚赟老师，将为大家带来 #茶思一小时 #TinyEngine 低代码引擎揭秘系列第 6 讲。本期主题为：构建多元共生的生态空间，TinyEngine 生态的融合之道。姚赟老师将带大家了解 TinyEngine 低代码引擎的生态构成、技术架构、生态发展趋势等方向的内容，并通过与大家分享 TinyEngine 的生态协同方式，帮助开发者探索更多低代码发展可能性。直播详情直播主题构建多元共生的生态空间：TinyEngine 生态的融合之道直播亮点直播亮点TinyEngine 生态构成1）TInyEngine 生态概览2）生态中心的技术枢纽3）生态工具链的技术优化4）生态伙伴的技术协同5）生态社区的技术交流TinyEngine 生态技术架构1）schema 协议2）物料资产包协议3）注册表4）原子化TinyEngine 生态发展趋势与未来展望1）生态市场2）AI 辅助开发3）OpenTiny next直播讲师姚赟，华为云前端开发工程师直播时间2024 年 11 月 21 日 17 点——18 点 30 分直播地址线上：http://live.bilibili.com/31174756线下：深圳华为坂田基地 A9 咖啡厅关于 OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.design/OpenTiny 代码仓库：https://github.com/opentiny/TinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码： https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

作者：秋天的一阵风一、 width属性介绍width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。（顺手推几个技术大厂的机会，前、后端or测试，感兴趣就试试 ）二、 话不多说，直接上代码看效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> div { color: #fff; font-size: 2rem; text-align: center; } .parent { width: 600px; height: 600px; background-color: blue; border: 10px solid black; padding: 20px; } .child { background-color: red; border: 10px solid grey; margin: 20px; height: 100px; } .auto{ width: auto; } .hundred-percent{ width: 100%; } </style> <body> <div class="parent"> parent <div class="child auto">child1: width:auto</div> <div class="child hundred-percent">child2: width:100%</div> </div> </body> </html> 三、 分析比较我们给parent设置了padding:20px 内边距，给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。很明显地看到两个child的不同表现，child1的宽度是可以适应的，不会溢出其父元素。child1最终的宽度值:540px=600px(父元素宽度)−20px(child1外边距)∗2−10px∗2(child1边框值)−0px(child1内边距)child1最终的宽度值: 540px = 600px(父元素宽度) - 20px (child1 外边距) * 2 - 10px *2 (child1 边框值) - 0px (child1 内边距) child1最终的宽度值:540px=600px(父元素宽度)−20px(child1外边距)∗2−10px∗2(child1边框值)−0px(child1内边距)而child2的宽度则是和父元素一样大最终溢出了其父元素。child2最终的宽度值:600px=600px(父元素宽度)child2最终的宽度值: 600px = 600px(父元素宽度) child2最终的宽度值:600px=600px(父元素宽度)四、 结论width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。所以，在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时，它将尽可能努力保持元素与其父容器的宽度相同。而width：100%将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。

用的是ArkTs，要求这三个模式不能同时打开，要怎么做

谈谈 Vite 与 Webpack 在设计思路上的差异，以及你觉得哪种更好

Vue.js 框架概述与基本概念理论：介绍 Vue.js 的框架特点、MVVM 模式、核心功能（数据绑定、指令等）。实践：搭建一个简单的 Vue 项目，展示基本的绑定和指令操作。参考1. 理论1.1 Vue 是什么？Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。如：<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style>1.1.1 声明式渲染Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。1.1.2 响应性Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。1.2 Vue 的接口Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。1.2.1 选项式 API (Options API)使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。<script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>1.2.2 组合式 API (Composition API)通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。<script setup> import { ref, onMounted } from 'vue' const count = ref(0) function increment() { count.value++ } onMounted(() => { console.log(`The initial count is ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>2. 实践2.1 环境准备下载并安装 VSCode下载并安装 Git，安装时同步安装 Git Bash。NVM 安装Windows NVMmacOS NVM2.2 配置并安装 Node.js# 配置加速镜像，安装 Node.js $ export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/ $ nvm install 20.17.0 $ nvm use 20.17.0 $ nvm alias default 20.17.0 # 安装并配置 nrm（Node.js Registry Manager） $ npm install -g nrm $ nrm ls npm ---------- https://registry.npmjs.org/ yarn --------- https://registry.yarnpkg.com/ * tencent ------ https://mirrors.cloud.tencent.com/npm/ cnpm --------- https://r.cnpmjs.org/ taobao ------- https://registry.npmmirror.com/ # 选择合适的 npm 镜像 $ nrm use tencent2.3 创建一个 Vue 项目$ npm create vue@latest在提示时，根据需求选择配置项。选择默认配置，或者根据项目需要选择其他选项。完成后，运行以下命令启动项目：cd vue-demo npm install npm run dev访问浏览器中的 http://localhost:5173/ 查看项目运行情况。2.4 修改并演示项目修改 AboutView.vue 文件，添加 count 变量，并与页面中的 h1 元素绑定。点击按钮时，count 的值会增加，并在页面上实时更新。<script setup> import { ref } from 'vue'; const count = ref(0) function clickMe() { count.value++ } </script> <template> <div class="about"> <h1>count = {{ count }}</h1> <button @click="clickMe">点击我</button> </div> </template> <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style>3. 参考Node.js 官方网站Vue.js 官方网站Vue.js 中文文档NVM 安装Windows NVMmacOS NVM本文地址

在前端技术日新月异的今天，如何高效、稳定地开发企业级Web应用成为了开发者们关注的重点。近期，华为在开发者大会上正式发布了OpenTiny框架，这是一套由华为云出品的企业级前端UI组件库，不仅支持Vue2/Vue3/Angular等多技术栈，还适配PC端和移动端，为前端开发带来了全新的选择。OpenTiny框架概述OpenTiny是华为云开源的Web应用前端开发套件，经过九年的持续打磨，已经服务于华为内外部上千个项目。它不仅仅是一个简单的UI组件库，而是一套完整的企业级设计体系统，旨在帮助开发者高效构建稳定、美观、功能丰富的Web应用。核心亮点跨端跨框架： OpenTiny采用Renderless无渲染组件设计架构，实现了一套代码同时支持Vue2/Vue3，以及PC/Mobile端。这意味着开发者可以在不同的平台和框架之间无缝切换，大大提高了开发效率。同时，OpenTiny还支持Angular，进一步增强了其通用性和灵活性。组件丰富： OpenTiny提供了150+企业级组件，包括80+PC端组件和30+移动端组件，涵盖了表格、树形控件、选择器等多种高频组件。此外，还内置了虚拟滚动等优化技术，确保在大数据场景下依然能够保持流畅的用户体验。特别值得一提的是，OpenTiny还提供了一些独有的特色组件，如split面板分割器、IP地址输入框、Calendar日历、图片裁切等，满足了多样化的开发需求。开箱即用的中后台模板： OpenTiny内置了TinyPro中后台admin模板，支持Vue框架，包含10多个实用功能和20多个典型页面场景。这些模板覆盖了中后台应用和云服务控制台应用等多种场景，为开发者提供了快速启动项目的便利。跨平台的前端工具化CLI工具： TinyCLI提供了一系列开发套件及工程插件，覆盖了前端开发的整个链路。这些工具不仅保证了团队开发过程的一致性和可复制性，还显著提升了前端开发效率。强大的主题配置系统： OpenTiny提供了一款旨在提高开发效率的主题配置系统Tiny SEAM，让开发者可以轻松应对Web应用的多变风格需求。通过简单的配置即可实现样式的快速切换和定制。支持国际化： OpenTiny支持国际化功能，使得开发的应用能够轻松适应不同语言和地区的用户需求。这一特性对于构建全球化应用尤为重要。实际应用场景OpenTiny框架适用于各种企业级前端应用场景，如企业门户、后台管理系统、CRM系统、ERP系统等。其丰富的组件和强大的功能能够帮助开发者快速构建高效、美观、稳定的前端应用，提升用户体验和业务效率。上手难度与社区支持OpenTiny的官方文档详尽且易于理解，提供了丰富的代码示例和上手教程。此外，华为云社区也提供了大量的技术文章和实战分享，帮助开发者更好地掌握OpenTiny的使用技巧。同时，OpenTiny作为华为云开源项目之一，得到了广泛的社区支持和关注。开发者可以在社区中分享经验、提出问题、获取帮助，共同推动OpenTiny的发展。总结OpenTiny作为华为云出品的企业级前端UI组件库，凭借其跨端跨框架、组件丰富、支持配置式组件和周边生态齐全等核心特点，成为了企业级前端开发的新选择。无论是初创公司还是个人开发者，都可以通过OpenTiny快速构建出稳定、美观、功能丰富的Web应用。随着前端技术的不断发展和应用场景的不断拓展，OpenTiny将继续发挥其在前端开发领域的优势，为开发者提供更加高效、稳定、可靠的前端开发工具。我正在参加【有奖征文 第31期】体验OpenTiny带来的前端开发创新模式 链接：cid:link_0

破防了！家人们！参与这个活动到底有多简单？加入OpenTiny开源社区 ，到底是种什么样的体验？原来，使用项目不仅有社群技术答疑，还能送紧箍咒等天命人好礼！班味太浓，是时候该去去班味了~这个活动，就等你来参加啦~活动说明：有奖问卷调研！！！填写你对于 OpenTiny 项目的真实使用情况，我们会根据问卷内容，针对填写优质问卷的小伙伴赠送相应礼物~友好用户（<=10位）赠送OpenTiny定制棒球帽或紧箍咒；积极用户（<=10位）赠送OpenTiny 定制胶囊充电宝或紧箍咒；优质用户（<=5位）赠送OpenTiny定制双肩包或紧箍咒；问卷链接：cid:link_3 活动结束后，工作人员将对问卷进行人工审核，审核通过后，将会联系您获得奖品收货地址~礼品详情： 关于 OpenTiny OpenTiny官网：cid:link_5TinyVue 源码：cid:link_2（欢迎 Star ⭐）TinyEngine 源码：cid:link_1（欢迎 Star ⭐）B站：cid:link_4欢迎加入 OpenTiny 开源社区。添加微信小助手 opentiny-official 一起参与交流前端技术～（温馨提示：OpenTiny CCF开源创新大赛也在持续报名中，欢迎大家一起报名参赛，赢取10W奖金：cid:link_0）

一、引言在Web开发领域，Cookie和Token是两种常见的用于处理用户认证和会话管理的技术。它们各自具有不同的特点和应用场景，并且在现代Web应用中发挥着重要作用。本文将详细介绍Cookie和Token之间的区别，以及它们在现代Web应用中的使用情况，最后探讨为什么Cookie至今仍未被废弃。二、Cookie与Token的区别定义与存储方式Cookie：是在客户端存储的小型文本文件，由服务器在HTTP响应头中设置并发送到客户端，客户端收到后自动存储在本地。Token：是一段经过加密处理的字符串，通常存储在客户端的浏览器缓存、localStorage或sessionStorage中，也可以存储在服务器的数据库中。安全性Cookie：存储在客户端，容易被窃取或篡改，因此需要对内容进行加密或签名保护。Token：采用加密算法进行加密和签名，确保传输过程中的安全性，并防止信息被篡改。可扩展性Cookie：只能存储有限的信息，如用户ID、过期时间、域名等。Token：可以存储更多的信息，如用户角色、权限、访问时间等，更加灵活，适合大规模的应用程序。跨域支持Cookie：只能存储在设置Cookie的域名下，不能跨域使用。Token：可以跨域使用，适用于分布式系统或跨域API请求。服务器压力Cookie：每次请求都需要将Cookie发送给服务器，服务器需要验证并响应请求，如果Cookie过多，服务器的压力会非常大。Token：服务器只需验证Token的有效性即可，可以大大减轻服务器的压力。时效性Cookie：通常需要设置过期时间，过期后需要重新获取。Token：可以设置长时间的有效期，减少频繁获取的次数，提高应用程序的性能。三、Cookie与Token的应用场景Cookie的应用场景用户登录状态保持：在用户计算机中存储一个包含用户身份验证信息的Cookie，以便在用户下一次访问时自动识别用户并保持其登录状态。购物车管理：在电子商务网站中，使用Cookie来管理用户的购物车信息。个性化推荐：跟踪用户的浏览行为并提供个性化的推荐内容。Token的应用场景用户授权：在用户输入密码和帐号后，系统验证后生成一个Token，后续服务使用者只需携带该Token即可访问相关服务。敏感接口调用：在调用关键接口或敏感接口时，使用Token进行身份验证和授权。开放平台授权：在开放平台中，对外部站点提供授权服务，发放Token以便外部站点访问服务。四、为什么Cookie未被废弃尽管Cookie存在一些潜在的安全风险，但由于其是HTTP协议支持的，几乎所有浏览器在开发时就完成了数据存储与传输过程中所需功能的提前封装。这使得Cookie在Web开发中具有天然的优势。另外，尽管有一些替代方案被提出，如HTML5中的localStorage特性，但这些方案需要开发者额外部署代码，操作更加繁琐，并且可能带来更多的风险。因此，尽管Cookie在某些方面已经不太合时宜，但在现有的Web技术下，它仍然是实现客户端状态或数据存储的最优解，短时间内不太可能被完全替代。

Lodash官网为：cid:link_0Lodash库在JavaScript中是一个广泛使用的实用工具库，它提供了大量的函数来简化JavaScript编程的复杂性。以下是Lodash库的主要用途和特点：简化编程任务：Lodash提供了丰富的函数集，用于处理数组、对象、字符串、数字等常见的数据类型。这些函数涵盖了映射、过滤、归约、合并、防抖、节流等多种操作，可以大大简化日常开发中的编码工作。高性能：Lodash专注于提供高性能的函数，这些函数经过优化以在各种JavaScript运行环境中提供最佳性能。这意味着使用Lodash可以加快代码的执行速度，提高应用程序的性能。模块化：Lodash采用了模块化的架构，允许开发者按需导入需要的函数。这种模块化设计可以减小项目的体积，提高代码的复用性和可维护性。跨浏览器兼容性：Lodash在各种现代浏览器和Node.js等JavaScript运行环境中都能正常工作，并提供了对ES6+特性的良好支持。这使得Lodash成为了一个跨平台的解决方案，可以在不同的环境中使用。易于学习和使用：Lodash的API设计简洁清晰，易于学习和记忆。开发者可以快速掌握Lodash的使用方法，并将其应用到实际项目中。具体来说，Lodash中的一些常用函数包括：_.get(object, path, [defaultValue])：获取对象指定路径上的值，如果路径不存在则返回默认值。_.set(object, path, value)：设置对象指定路径上的值。_.cloneDeep(value)：深拷贝一个对象或数组。_.isEmpty(value)：判断一个值是否为空，包括空对象、空数组、空字符串以及undefined和null。_.isEqual(value, other)：比较两个值是否相等，支持比较对象和数组。_.debounce(func, wait, [options])：创建一个函数，该函数在调用时最多只会执行一次（或者在wait时间内只会执行一次），可以用来处理频繁触发的事件。_.throttle(func, wait, [options])：创建一个函数，该函数在一段时间内最多只会执行一次，可以用来限制函数的执行频率。这些函数只是Lodash提供的一部分功能，实际上Lodash还包含了许多其他实用的函数和方法，可以帮助开发者更高效地编写JavaScript代码。总的来说，Lodash是一个功能强大、易于使用的JavaScript工具库，值得开发者在项目中使用。

avaScript 的异步编程已经从回调 (Callback) 演进到 Promise，再到如今广泛使用的 async/await 语法。后者不仅让异步代码更加简洁，而且更贴近同步代码的逻辑与结构，＊＊＊增强了代码的可读性与可维护性。在掌握了基础用法之后，下面将介绍一些高级用法，以便充分利用 async/await 实现更复杂的异步流程控制。1. async/await 与高阶函数当需要对数组中的元素执行异步操作时，可结合 async/await 与数组的高阶函数（如 map、filter 等）。2. 使用 async/await 优化递归递归函数是编程中的一种常用技术，async/await 可以很容易地使递归函数进行异步操作。3. 在 async 函数中使用 await 链式调用使用 await 可以直观地按顺序执行链式调用中的异步操作。4、使用 async/await 简化错误处理错误处理是异步编程中的重要部分。通过 async/await，可以将错误处理的逻辑更自然地集成到同步代码中。5、异步初始化类实例在 JavaScript 中，类的构造器（constructor）不能是异步的。但可以通过工厂函数模式来实现类实例的异步初始化。6、结合 async/await 和事件循环使用 async/await 可以更好地控制事件循环，像处理 DOM 事件或定时器等场合。通过以上 6 个 async/await 的高级用法，开发者可以在 JavaScript 中以更加声明式和直观的方式处理复杂的异步逻辑，同时保持代码整洁和可维护性。在实践中不断应用和掌握这些用法，能够有效地提升编程效率和项目的质量～

请问有什么好一点的 js 的计算线段的库，比如：计算线的长度，从线的起点偏移 变量，能在线段上找到点的坐标等？

中奖结果公示感谢各位小伙伴参与本次活动，本次活动获奖名单如下：请各位获奖的伙伴在10月16日之前点击此处填写收货地址，如逾期未填写视为弃奖。再次感谢各位小伙伴参与本次活动，欢迎关注华为云DTSE Tech Talk 技术直播更多活动~直播简介【直播主题】0基础玩转OpenTiny跨端跨框架组件库，实现一站式前端进阶【直播时间】2023年10月11日 16:30-18:00【直播专家】莫春辉 华为云前端开发 DTSE技术布道师【直播简介】你还在为构建web页面却不知道选哪个组件库而苦恼吗？ 你还在为从Vue2项目升级到Vue3的工作量大而惆怅吗？ 你还在为不同框架的组件库由于API不同，需要重复开发而薅头发吗？ 本期直播将聚焦于OpenTiny跨端、跨框架、跨版本的TinyVue组件库，其中包含了无渲染Renderless设计理念的实现方式，以及分析业务逻辑的思路及方法。让开发者能够通过一套代码在不同版本、不同框架、不同终端中使用，从而提升开发效率，保证用户在不同场景下的极致交互体验。直播链接：cid:link_1活动介绍【互动方式】直播前您可以在本帖留下您疑惑的问题，专家会在直播时为您解答。直播后您可以继续在本帖留言，与专家互动交流。我们会在全部活动结束后对参与互动的用户进行评选。【活动时间】即日起—2023年10月12日【奖励说明】评奖规则：活动1：直播期间在直播间提出与直播内容相关的问题，对专家评选为优质问题的开发者进行奖励。奖品：华为云定制U型按摩枕活动2：在本帖提出与直播内容相关的问题，由专家在所有互动贴中选出最优问题贴的开发者进行奖励。奖品：华为云定制POLO衫更多直播活动直播互动有礼：官网直播间发口令“华为云 DTSE”抽华为云定制棒球帽、填写问卷抽华为云定制长袖卫衣等好礼分享问卷有礼 ：邀请5位朋友以上完成问卷即可获得华为云定制飞盘。老观众专属福利：连续报名并观看DTT直播3期以上抽送华为云DTT定制T恤。【注意事项】1、所有参与活动的问题，如发现为复用他人内容，则取消获奖资格。2、为保证您顺利领取活动奖品，请您在活动公示奖项后2个工作日内私信提前填写奖品收货信息，如您没有填写，视为自动放弃奖励。3、活动奖项公示时间截止2023年10月13日，如未反馈邮寄信息视为弃奖。本次活动奖品将于奖项公示后30个工作日内统一发出，请您耐心等待。4、活动期间同类子活动每个ID（同一姓名/电话/收货地址）只能获奖一次，若重复则中奖资格顺延至下一位合格开发者，仅一次顺延。5、如活动奖品出现没有库存的情况，华为云工作人员将会替换等价值的奖品，获奖者不同意此规则视为放弃奖品。6、其他事宜请参考【华为云社区常规活动规则】。

一、小程序开发的背景和重要性 随着移动互联网的快速发展，移动应用的需求不断增加。传统的原生应用需要用户下载和安装，而小程序提供了一种无需下载和安装的解决方案，为用户提供了更便捷的应用体验。 小程序的兴起对于用户和开发者来说都具有重要意义： 用户角度： 无需下载和安装：用户可以直接访问小程序，无需下载和安装应用程序，节省了设备存储空间。 快速启动和使用：小程序体积小、启动速度快，用户可以快速启动和使用应用。 跨平台兼容性：小程序可以在不同的移动操作系统上运行，具有较好的兼容性，无需为不同平台开发不同版本的应用。 开发者角度： 开发成本低：小程序使用前端技术进行开发，无需学习和掌握多种移动开发技术，降低了开发成本。 快速迭代和更新：小程序可以实现快速迭代和更新，开发者可以及时修复问题和发布新功能。 方便分享和传播：用户可以通过扫码或分享链接来使用小程序，方便传播和推广应用。 二、HTML、CSS和JavaScript在小程序开发中的作用 HTML、CSS和JavaScript是构建小程序界面和实现交互逻辑的核心技术，它们分别负责小程序的结构、样式和交互。   HTML负责页面结构，CSS负责页面样式，JavaScript负责页面的交互逻辑和动态效果。开发者需要掌握这些技术基础，才能构建出功能完善、界面美观的小程序应用。  HTML（超文本标记语言）： 结构化页面：通过使用HTML标签和元素，开发者可以定义小程序页面的结构，如标题、段落、列表等。 数据展示：HTML可以结合数据绑定，将后端数据动态展示在小程序界面上，实现数据的呈现。 CSS（层叠样式表）： 页面样式：通过CSS样式规则，开发者可以设置小程序页面的颜色、字体、布局等样式，以实现更好的用户界面体验。 响应式布局：CSS提供了响应式布局的能力，可以根据设备的屏幕尺寸和方向，自适应调整小程序的布局。 JavaScript： 交互逻辑：JavaScript是实现小程序交互逻辑的主要语言，开发者可以使用JavaScript操作页面元素、处理用户输入、处理网络请求等。 动态效果：JavaScript可以实现小程序中的动画效果，如平滑滚动、渐变过渡等，提升用户体验。 三、HTML基础知识 1️⃣HTML的概念和基本结构 HTML（HyperText Markup Language）是一种用于创建网页和网页应用程序的标记语言。它使用标记来描述文档的结构和内容，并通过浏览器解析和渲染，呈现给用户。  HTML文档由一系列的HTML标签组成，每个标签用尖括号（<和>）包围。一个基本的HTML文档结构如下：  <!DOCTYPE html> <html> <head>   <title>页面标题</title> </head> <body>   <h1>页面标题</h1>   <p>这是一个段落。</p> </body> </html>