营销型网站建设教学,wordpress relocate,网站开发checklist模板,深圳外贸网站商城一、介绍 #x1f606; #x1f601; #x1f609;
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需…一、介绍
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。
二、搭建ViteVue3TypeScript项目
根据vite官网文档 yarn create vite 项目创建完成后进入ts-super-procedure目录执行yarn安装相关依赖
三、安装Electron相关依赖
如果你自己安装过Electron的相关依赖想必你一定经历过失败、失败、失败。
这里需要借助一个网站检测服务器响应速度然后拿到最快响应的ip进行本地配置加快我们的域名解析。
通过该工具可以多个地点Ping服务器以检测服务器响应速度。检查github.com。我都选择国内的看自己想法选择啊。 修改 C:\Windows\System32\drivers\etc\hosts 20.27.177.113 github.com
安装electron依赖
yarn add -D electron electron-builder
根据官网提供的文档,需要创建一个BrowserWindow装载vite项目,你也可以写一个html页面。 这里我们启动vite项目以后就会产生一个连接正好把它装载到 BrowserWindow中。 因为src下面存放的使我们的vite项目所以在根目录下创建一个electron.ts你也可以叫man.ts名字随便起知道是干啥的就行。 配置完成以后分别启动yarn dev 和 yarn start出现以下窗口表示搭建成功了。 四、优化
因为现在需要启动两个服务比较麻烦可以借助concurrently插件整合。一个命令完成多个应用的启动。
yarn add concurrently -D 安装完成以后修改启动和打包命令
scripts: {dev: concurrently \vite\ \electron .\,build: yarn build:vite yarn build:electron,build:vite: vue-tsc vite build,build:electron: electron-builder,preview: vite preview
}, 执行yarn dev 进行检测出现下面的内容表示配置成功基础脚手架就已经搭建完成了。下面开启你的桌面应用开发旅程吧。我要过五一去了 我是Etc.End。如果文章对你有所帮助能否帮我点个免费的赞和收藏。
