electron-vchat客户端聊天实例是基于electron+vue+vuex+Node+vue-router等技术开发的仿制微信pc桌面聊天项目。 034360截图20200108115113391.png 技术框架 框架技术:electron + electron-vue + vue 状态管理:Vuex 地址路由:Vue-router 字体图标: 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 electron主进程创建窗口 通过electron提供的BrowserWindow对象创建窗体,electron-vue构建项目后,主进程入口页面是src/main/index.js import electron实现自定义顶部最大/小化、关闭按钮、无外框窗口 electron 中配置 frame: false 后,就能去除原窗体顶部,原先的顶部操作栏就没有了,需要自定义配置。
就是有点像WINDOWS桌面,仿的而已,全程html编写,不过能和电脑一样可以拖拽和放大缩小,也能用手机打开网页,不过不能用IE浏览器打开,拿去装X吧! 修改桌面图标及点击链接请到源码js文件夹里面的shortcut.js里面修改! ? 本文章转自源码之家 vip333.cn win桌面
先搭建vue/cli脚手架应用 推荐4.x版本 vue create project-name 在cli目录下 执行下面代码 vue-cli-plugin-electron-builder文档链接 vue add electron-builder 项目运行 npm run electron:serve
前言 此前有给大家分享一个vite2+vant3开发h5手机端小视频实例。今分享一个最新开发的electron跨端聊天应用。 p4.gif 框架技术 vue3全家桶:vue3.0+vuex4+vue-router@4 electron框架:electron11.2.3 打包工具:vue-cli-plugin-electron-builde UI组件库:ant-design-vue2.0 (蚂蚁金服桌面端vue3组件库) 弹框组件:v3layer (vue3桌面端弹窗组件) 滚动条组件:v3scroll (vue3自定义美化滚动条) pp1 vue3组件库 antdv 蚂蚁金服团队推出的vue3桌面端pc组件库。 electron-builder打包配置 创建vue3项目的时候,根目录会有一个vue.config.js配置文件。可用来进行一些项目配置和electron打包配置。
haiyong.site/moyu/ 海拥开发文档:https://haiyong.site/doc/ GitHub 源码:https://github.com/wanghao221/moyu ---- HTML 实现仿 Windows 桌面主题特效 ✨ 项目基本结构 HTML 代码 CSS 代码 JS 代码 完整源码下载⬇ 在线演示地址:https://haiyong.site/win/ 源码可在文末免费获取 Jquery.aspx"/>
vite+vue3+electron桌面端开发 ps :踩坑踩了一个多小时 如果嫌麻烦可以直接拿走用 克隆代码仓库 1.https://gitee.com/dmhsq/vue3-vite-electron https://gitee.com/dmhsq/vue3-vite-electron.git 2.https://github.com/promiseHusky/vue3-vite-electron https://github.com/promiseHusky/vue3-vite-electron.git 同样你也可以使用脚手架 来快速的创建 还没写完 先用着仓库的吧 效果如下 这是打包生成的 [ 生成的logo像素至少为 256x256否则会在打包的时候报错 开发注意 因为这里使用的是高版本electron 如果你想在 vue文件中 引入remote 需要安装一个依赖包 @electron menu); }); Version 0.0.0 说明 刚刚搭建完成 可实现基础的 运行 打包 下个版本 更新时间预估为下个月 这个月忙 1.自动更新 2.更加丰富的菜单配置案例(持续,部分更新) 3.
Electron 基于 Chromium 和 Node.js, 可以理解为在软件中打包了一个浏览器以支持运行桌面应用,用开发web的方式进行开发,跨平台兼容 1环境搭建 1.1 先全局安装脚手架 (如已经安装,可以跳过) npm install -g electron npm install -g electron-forge (安装electron-forge模板) 1.2 用模板 创建项目 electron-forge init notepad(项目名) 1.3 安装依赖 (安装依赖时建议使用cnpm淘宝镜像 npm会有访问外国网站被卡) cd notepad npm install 1.4 运行 electron-forge start或 npm start 2.打包exe
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 electron 这里我是使用的全局 $ sudo cnpm install -g electron 创建应用 一个 Electron 应用的目录结构大致如下: myapp/ ├── package.json ├── main.js └── index.html main.js" } } main.js const {app, BrowserWindow} = require('electron'); const path = require('path' ,然后运行 $ electron . "scripts": { "start": "electron main.js" } 所以也可以使用 npm 来运行 $ npm install $ npm start
本文目录: 前言新建项目安装vue初始化一个electron-vue项目结语参考 前言 关于electron,前两天一番写了一个开头,搭建开发环境。今天一番尝试去开发一个小的例子,做一些修改。 网上搜了一下electron element ui,很多都是结合vue,一番也不是做前端的,只知道这个vue好像最近在前端挺火的。 前面一篇electron的文章我们已经安装了node和npm。 安装vue npm install -g vue-cli ? 运行 初始化完后,我们就可以进入项目目录运行这个electron-vue项目了。执行如下命令运行。 参考 electron-vue 集成 element-ui 一番雾语:方法很重要,方法的改进需要以好身体为基础的精气神。
本文目录: 前言js启动python创建python文件在index.js中调用python参考一番今日 前言 前面我们实践了用electron-vue和element-ui的开发环境搭建,实现了一个入门 demo,知道了怎么让这个程序运行起来,今天我们来探究下如何用electron里的js主程序调用python程序。 path.join(__dirname, 'py', 'gzh.py') let pypath = path.join(__dirname, 'py', '.env', 'scripts', 'python3. pyProc = null pyPort = null } app.on('ready', createPyProc) app.on('will-quit', exitPyProc) 参考 electron
本文目录: 前言js系统命令调用函数spawn调用`spawn`可能遇到的问题require函数参考一番今日 前言 上一篇electron的文章我们尝试了用在js里调用python,虽然一番之前没有接触过 也就是说无论我们用的是linux、mac还是windows,都可以用spawn函数来调用相应系统的命令。 感觉有点类似python的system函数。
本文目录: 前言python处理electron部分参考一番今日 前言 前一篇一番实现了在js里调用python程序,这一篇一番试图将electron页面上输入的一些参数传递给python程序。 ) print('start running on {}'.format(addr)) s.run() if __name__ == '__main__': main() electron } else { result.textContent = res } }) }) formula.dispatchEvent(new Event('input')) 参考 electron-vue 文档 electron作为python界面开发入门
Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 Electron 是开源的,由 GitHub 维护,有一个活跃的社区。最重要的是,Electron 应用服务构建和运行在 Mac,Windows 和 Linux。 安装Electron npm install electron-prebuilt -g //cnpm install electron-prebuilt -g 安装完毕后运行 electron -v //查看electron版本 # Clone this repository git clone https://github.com/electron/electron-quick-start # Go Electron应用包含三部分: 1、package.json依赖文件 2、index.html应用页面 3、main.js or renderer.js主进程or渲染进程 Electron应用由主进程和渲染进程组成
前言 今天接着上一篇electron的文章往下写。操作仍然是在win10下的powershell下进行的。主要记录element-ui的安装与使用。 src/main:electron主进程。 src/renderer:electron渲染进程,包含Vue的所有代码。 process.env.IS_WEB) Vue.use(require('vue-electron')) Vue.http = Vue.prototype. 参考 [electron-vue 集成 element-ui](https://blog.csdn.net/ucmir183/article/details/89277492) [Electron-vue 实战—搭建项目与安装Element UI](https://www.cnblogs.com/suRimn/p/11101671.html) [文档|Electron](https://electronjs.org
本文目录: 前言electron的地位electron中js通过web socket与python通信效果图参考一番今日 前言 今天该务实了。 electron的地位 如果我们在网上搜索electron相关的文章,发现很少。原因其实electron只是提供了一个运行js的框架,基本不用开发。 electron的地位就相当于浏览器的地位,electron就是一个封装了的浏览器。因此,我们做electron开发,其实就是做js前端开发。 当然,一番以前没有接触过前端开发,electron也没接触过,也许认知有些狭隘,但思路是这样的。 <body> <h3>WebSocketTest</h3>
几周之前有开发一款vite5+vue3网页web版聊天项目ViteWchat。这次带来全新跨平台electron31.x+vue3+vite5+element-plus仿微信电脑端聊天程序。 vite5-electron-wechat项目采用最新版跨端技术electron31结合vite5.x开发桌面端聊天框架。 项目结构整个项目采用vite5搭建项目模板,整合最新跨平台技术electron31框架,vue3 setup语法编码规范。electron+vue3朋友圈新开窗口。 electron+vue3短视频新开窗口。vue3入口文件main.js配置引入组件库、路由/状态管理、初始化窗口。import { createApp } from 'vue'import '. ${ext}" }}综上就是electron31+vue3开发桌面端聊天项目的一些分享,希望对小伙伴们有些帮助!
electron-react-os桌面管理系统,支持macOS和windows两种桌面风格。 项目特性提供macOS+windows两种桌面风格支持json格式配置桌面菜单+Dock菜单自研可拖拽桌面栅格卡片布局支持自定义桌面背景皮肤、采用高斯模糊毛玻璃效果提供图表、表格、列表、表单、编辑器等常用页面模板项目结构目录使用最新跨平台 +Arco+Zustand仿macOS风格webOS桌面系统electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38 Vite8+NaiveUI+Vue3+Echarts后台管理系统全新研发Flutter3.41桌面版OS系统最新款flutter3.41 & dart3.11仿写抖音app原创自研Flutter3.41 +vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板
AntDesignPro使用electron构建桌面应用 注意事项声明 所有 node 包必须使用 npm 安装不可使用 cnpm 使用 cnpm 安装的 node 包会导致打包时间无限可能 具体区别查看使用 // in an array if your app supports multi windows, this is the time // when you should delete and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on ('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', function () node 包或者内容较少可直接在当前操作, 省略 app 目录相关操作 安装 npm install electron-builder package.json添加命令 (打包windows) "electron-build
之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron / dooring-electron的技术栈笔者使用的是: koa2 + electron + react + umi3 接下来我将给大家介绍如何学习使用dooring-electron. dooring-electron 构建命令,输出安装包 npm run dist-mac // mac包 npm run dist-win // windows包 npm run dist-linux // linux包 npm run 如何快速学习electron 这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础: html + js + css 基础 熟悉nodejs基本api 有了以上基础
在这个生态系统中,有一个分类就是用来开发桌面应用,成为了桌面 GUI,比较著名的包括 NW.js 和 Electron,其中,Electron 更有名气,连微软都使用 Electron 开发自己的 IDE 在很多年前,微软的 Windows 系统是 PC 操作系统领域绝对的霸主,后来苹果公司的操作系统(Mac OS X),以它的创新性和专业性,削弱了 Windows 的统治地位。 Electron 可以让你重用 Web 应用的代码来构建桌面应用,不仅如此,构建出来的应用可以同时在 Windows、Mac OS X 和 Linux 上运行,这有一个非常大的好处:代码和技能都可以复用 Electron 桌面应用相对于 Web 应用的优势有哪些呢? 到现在为止,我们已经了解了 Electron 到底是做什么的,以及为什么要用 Electron 来构建桌面应用。