精易论坛

标题: 易语言 + WebView2 + Vue3 + Naive UI：打造极致轻量级无边框桌面.. [打印本页]

作者: 雨落无声 时间: 2025-4-26 19:41
标题: 易语言 + WebView2 + Vue3 + Naive UI：打造极致轻量级无边框桌面..
本帖最后由雨落无声于 2025-4-26 20:54 编辑

易语言 + WebView2 + Vue3 + Naive UI：打造极致轻量级无边框桌面应用

（媲美 Electron 的体验，内存占用减少 70%！）

项目背景

最近研究用 易语言 做桌面端开发，但官方 UI 太老旧，于是尝试结合：

WebView2（Chromium 内核，比 CEF 更轻量）

Vue3（前端响应式开发）

Naive UI（高颜值组件库）

成功实现了一个 无边框 的Windows桌面应用

核心特点

无边框窗口（支持拖拽、阴影、圆角）

完整 GPU 加速（WebView2 直接渲染）

内存占用小 (该应用占用1.3MB)

易语言后端通信（调用系统 API/硬件无压力）

技术组合

技术	用途
易语言	窗口操控/系统层交互（如托盘菜单）
WebView2	渲染 Vue3 前端（无需 Node.js）
Vue3	前端响应式开发 + 路由管理
Naive UI	高颜值 UI 组件（暗黑模式支持）

使用方式

vue项目打包后将vue-PathMigrate\dist目录下所有文件复制到根目录的html文件夹内！

下载地址

https://syx0226.lanzoum.com/iS3yt2ul1g2d

save1.gif (3.25 MB, 下载次数: 17)

Snipaste_2025-04-26_20-53-35.png (108.49 KB, 下载次数: 9)

浏览器和程序运行对比图

浏览器和程序运行对比图

作者: Daen 时间: 2025-4-26 19:48
感谢为易语言生态添砖加瓦

作者: ttggnn 时间: 2025-4-26 20:24
感谢分享

作者: 曦月 时间: 2025-4-26 20:54
论坛有你更精彩

作者: 屿东 时间: 2025-4-26 20:59
请问前后端交互是通过api接口吗

作者: 雨落无声 时间: 2025-4-26 21:02

屿东发表于 2025-4-26 20:59
请问前后端交互是通过api接口吗

webview2自带的webMessage！

作者: 没事瞎琢磨 时间: 2025-4-26 21:16
感谢分享

作者: pipicool 时间: 2025-4-26 21:21
学习一下

作者: xuangeylw 时间: 2025-4-26 21:33
太牛了太牛了太牛了太牛了太牛了太牛了太牛了

作者: fengyewl 时间: 2025-4-26 21:50
感谢分享，很给力！~

作者: 小虎来了 时间: 2025-4-26 22:37
支持开源~！感谢分享

作者: 无敌灰灰 时间: 2025-4-26 23:43
webui确实好看，不过看代码写起来也蛮麻烦的。。。

作者: maozaiba 时间: 2025-4-26 23:54
题外话
WebView2 就是个EGDE浏览器，怎么会比精简过的CEF更轻量。

作者: renhe2018 时间: 2025-4-27 00:02
感谢你祖宗N代啊。太赞了。

作者: 笨江 时间: 2025-4-27 00:56
支持开源~！感谢分享

作者: kenan236 时间: 2025-4-27 01:14
666666666666666666

作者: hezeyu 时间: 2025-4-27 02:17

感谢分享，很给力！~

作者: lrbf810 时间: 2025-4-27 02:57
很好很强大

作者: year1970 时间: 2025-4-27 08:16
感谢分享

作者: 昆山星期五 时间: 2025-4-27 08:22

感谢分享

作者: kingchain 时间: 2025-4-27 08:32
支持开源~！感谢分享

作者: Fate 时间: 2025-4-27 08:34
我这运行上面有边框而且不能点击会穿透..

成品跟直接运行源码都这样

作者: 雨落无声 时间: 2025-4-27 08:59
本帖最后由雨落无声于 2025-4-27 09:06 编辑

Fate 发表于 2025-4-27 08:34
我这运行上面有边框而且不能点击会穿透.. 成品跟直接运行源码都这样 ...

我是Win11，其它版本系统没做测试！应该是WM_NCCALCSIZE的问题！你是高DPI？

作者: 小虎来了 时间: 2025-4-27 09:02
感谢分享啊

作者: lipzzzz 时间: 2025-4-27 09:03

感谢分享啊

作者: mgfz 时间: 2025-4-27 09:31
感谢分享。

作者: jysoft2022 时间: 2025-4-27 10:23
谢谢分享

作者: 神奇的哆啦A梦 时间: 2025-4-27 10:25
此处应该有鼓励~

作者: 各在天一涯 时间: 2025-4-27 10:47
此处应该有鼓励~

作者: heize 时间: 2025-4-27 11:02
win10还是有边框

PixPin_2025-04-27_11-02-10.png (36.99 KB, 下载次数: 0)

作者: 雨落无声 时间: 2025-4-27 11:21

heize 发表于 2025-4-27 11:02
win10还是有边框

我用win11！低版本窗口不一样没测试没适配！还得改！

作者: 卡卡1111 时间: 2025-4-27 11:40
支持开源~！感谢分享

作者: dongou 时间: 2025-4-27 12:04
此处应该有掌声~

作者: a3363558 时间: 2025-4-27 12:22
支持开源~！感谢分享

作者: benyu168 时间: 2025-4-27 12:23
感谢分享

作者: jykhjylk 时间: 2025-4-27 13:27
高手在民间，此处应该有掌声

作者: 雨落无声 时间: 2025-4-27 14:51

heize 发表于 2025-4-27 11:02
win10还是有边框

win10比较特殊！估计得单独处理！

作者: Fate 时间: 2025-4-27 17:25

雨落无声发表于 2025-4-27 08:59
我是Win11，其它版本系统没做测试！应该是WM_NCCALCSIZE的问题！你是高DPI？

我是win10 精简版系统 1920 1080分辨率

作者: 雨落无声 时间: 2025-4-27 17:30

Fate 发表于 2025-4-27 17:25
我是win10 精简版系统 1920 1080分辨率

win10系统比较特殊，需要特别处理！看37楼回复！

作者: 皮皮君 时间: 2025-4-28 00:06
感谢你八倍祖宗~！为E的事业添砖加瓦

作者: 世事如常态 时间: 2025-4-28 00:13
这是咋做到混合开发的？易语言也能跟Vue一起的嘛

作者: Fate 时间: 2025-4-28 08:28

雨落无声发表于 2025-4-27 17:30
win10系统比较特殊，需要特别处理！看37楼回复！

好的期待修复

作者: tyler998 时间: 2025-4-28 14:25
这是咋做到混合开发的？易语言也能跟Vue一起的嘛

作者: kyo9766 时间: 2025-4-28 14:50
很漂亮，感谢分享

作者: 禁回忆 时间: 2025-4-28 16:37

tyler998 发表于 2025-4-28 14:25
这是咋做到混合开发的？易语言也能跟Vue一起的嘛

窗口套个浏览框，跑网页代码

作者: fal8899 时间: 2025-4-28 16:41
支持开源~！感谢分享

作者: accet 时间: 2025-4-28 20:08
可惜就是 WebView2 太大了不适合用于win7 了. 还是用 miniblink + layui 弄起来兼容低系统些.

作者: SummerTail 时间: 2025-5-2 19:39
感谢大大对E做出的贡献，如果能封装成更简单的形式就更好了，打开源码的我一脸懵逼

作者: kiss0459 时间: 2025-5-16 21:56
win10运行有标题栏

作者: ljx111 时间: 2025-5-16 22:02
感谢分享

作者: sd3970566 时间: 2025-5-30 01:26
为什么 css 和js是加密的

作者: 雨落无声 时间: 2025-5-30 08:28

sd3970566 发表于 2025-5-30 01:26
为什么 css 和js是加密的

那是vue项目打包编译过后的代码！并不是加密！vue项目源代码就在vue开头那个文件夹里！

作者: 六先生 时间: 2025-6-3 11:41
感谢你给易语言造轮子！

作者: cybermoo 时间: 前天 19:37
这个是一条出路

作者: xiaoxiao2 时间: 前天 22:51
感谢分享

作者: a358498501 时间: 14 小时前
谢谢分享，学习了

作者: lxn2wyf 时间: 10 小时前
大神，请收下我的膝盖，膜拜你，真的很厉害！

欢迎光临精易论坛 (https://125.confly.eu.org/)

Powered by Discuz! X3.4