electron–vue教程,vue+electron
电子还可以快速将你的网站打包成原生应用并发布。本文主要介绍电子在Vue和React中快速使用的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
提示：前言1，前提2，在Vue和React 1中的快速使用。安装电子2。操作成功后，打包成软件总结。
提示：
本文只教你如何入门。电子本身就很强大，两者结合只能让你简单的实现一个桌面应用！如果需要复杂配置的电子，建议参考官网~
前言
对于我们来说，电子就相当于一个外壳，可以把写好的网页程序嵌入外壳，一个可以在桌面上运行的程序，把网页打包成桌面应用。也和我们平时做的5 app差不多。简单来说就是软件。电子因其Vscode而非常出名。如果想了解更多，可以查看官网的详细介绍。
提示：以下是本文的主要内容，以下案例可供参考。
一、前提
使用电子的前提是需要配备nodejs环境，所以请检查你的电脑是否安装了nodejs环境，可以使用node -v V在cmd或者powerShell中查看。
二、在Vue和React中快速使用
提示：应该在Vue和React成功打包的文件目录下！
完整的配置文件，我在这里上传了gitee，直接把文件复制粘贴到npm i里就行了！地址XLL/电子包
1. 安装Electron
在打包的根目录中，npm init否则，下一步安装的电子可能安装在外层vue项目中，在dist文件夹中创建main.js文件和package.json文件。以下内容是main.js，可以复制粘贴进去。下面是最简单的电子构型。如果想要复杂的配置，可以参考官网配置。
常数{
app，
浏览器窗口，
菜单
}=要求(电子)；//引入电子
让赢；
让windowConfig={
MinWidth: 1600，//最小宽度
MinHeight: 800，//最小身高
秀：假的，
可调整大小：false
//frame: false，
//全屏：false，
//titleBarStyle: hiddenInset ，
//titleBarOverlay: true
};//Window配置程序运行窗口的大小。
函数createWindow() {
win=new browser window(window config)；//创建一个窗口
win . loadurl(` file://$ { _ _ dirname }/index . html `)；//窗口中要显示的内容index.html是打包生成的index.html。
//win . web contents . opendevtools()；//打开调试工具
//隐藏菜单栏
Menu.setApplicationMenu(空)
//默认最大化
win.maximize()
win.show()
win.on(close ，()={
//回收BrowserWindow对象
win=null
});
win.on(resize ，()={
//默认刷新
//win . reload()；
})
}
app.on(就绪，create window)；
app.on(窗口-全部关闭，()={
if (process.platform！==达尔文){
app . quit()；
}
});
app.on(激活，()={
if (win==null) {
create window()；
}
});
//电子限制只能打开一个应用程序窗口。如果有窗户，窗户就会被唤醒。
const gott helock=app . requestsingleinstancelock()
如果(！gotTheLock) {
app.quit()
}否则{
app.on(二次实例，(事件)={
如果(赢){
if(win . is minimized())win . restore()
win.focus()
}
})
app.on(就绪，()={
//createWindow()
常数{
菜单
}=要求(电子)
menu . setapplicationmenu(null)//隐藏菜单栏
})
}
在package.json中修改，可以直接复制粘贴以下内容。电子限制版本号。复制粘贴以下内容后，dist根目录下的cmd会下载NPM I，如果你的版本号和我的版本号不一样，可能会打包失败！
{
姓名: xxx ，
产品名称: XXXXX ，
作者：“小叮当”，
版本: 1.0.0 ，
main: main.js ，
描述:项目描述，
脚本:{
pack: npx电子生成器- dir ，
dist: npx电子生成器，
安装后： npx电子生成器安装-应用程序-deps，
"开始":" npx电子。",
包装：npx电子包装机relay-platform=win32-arch=x64-icon=favicon。ico-out=./out-asar-app-version=1。0 .0-overwrite-ignore=node _ modules
},
建立:{
电子版本: 1.8.4 ,
win: {
requestedExecutionLevel : highestAvailable ，
目标:[
{
目标： nsis ，
arch: [
x64
]
}
]
},
appId“:”演示，
artifactName :演示-$ {版本}-${arch} .${ext} ，
nsis :
artifactName :演示-$ {版本}-${arch} .${ext}
},
外部资源:[
{
来自":"。/static/，
至:应用服务器，
过滤器:[
**/*
]
}
],
发布:[
{
提供者:泛型
}
]
},
依赖项:{
"核心-js":^2.4.1，
"创造鸡蛋":^2.0.1,
电子:^16.2.6,
"电子建造者":^22.14.13,
"电子包装":^0.1.0,
"电子包装工":^12.1.0,
"电子更新者":^2.22.1
}
}
执行命令：国家预防机制运行开始
执行成功，效果如下：(博主这里啥也没写，如果你写了的话，运行的界面应和你写的一致)
2. 运行成功后，打包成软件
执行命令：国家预防机制运行包
注意：我这里啥也没写所以是空的，你打包之后要是空的就是有问题啦！
总结
到此这篇关于某视频剪辑软件和反应中快速使用电子的文章就介绍到这了，更多相关VueReact使用电子内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。