electronvue教程,Electron+Vue

　　electron-vue教程,Electron+Vue

　　这篇文章通过实例代码给大家介绍了某视频剪辑软件项目中添加电子的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

1.在package.json中添加

　　main: electron.js ，

　　在"脚本":{添加：

　　包装:电子包装机/appName -覆盖

　　在依赖项:{添加：

　　"电子共享记忆":^1.0.1,

　　"节点-石膏-建造":^4.3.0,

　　"照片预览":^1.1.3,

　　在"开发依赖项":{添加：

　　电子:^15.3.1,

　　"电子包装工":^15.4.0,

2.vue.config.js

　　在devServer: {修改：

　　//open: true，(之前是没有注释掉的，现在把他注释掉)

　　在代理服务器：{修改

　　/api: {

　　目标："电子渲染器",(只改了这个地方，之前是目标： http://localhost ，)

　　更改来源：真的，

　　路径重写：{

　　^/api:

　　}

　　}

3.main.js添加：

　　从“呜呜——照片-预览"导入预览

　　导入vue-照片-预览/距离/皮肤。 CSS

　　Vue.use(预览)

　　//解决电子报错

　　过程。env[ ELECTRON _ DISABLE _ SECURITY _ WARNINGS ]= TRUE

4.在vue.config.js同级添加electron.js

　　//控制应用程序生命周期和创建本机浏览器窗口的模块

　　const {app，BrowserWindow}=require(电子)

　　const path=require(path )

　　函数createWindow () {

　　//创建浏览器窗口。

　　const主窗口=新浏览器窗口({

　　宽度：1889,

　　身高：1000,

　　网首选项：{

　　preload: path.join(__dirname， preload.js )

　　}

　　})

　　//并加载应用的index.html .

　　//mainWindow.loadFile( ./dist/index.html )

　　主窗口。loadurl( http://172。16 .1 .155:7890/xjbd’)

　　//打开开发工具.

　　主窗口。网页内容。opendevtools()

　　}

　　//这个方法会在电子完成时被调用

　　//初始化并准备创建浏览器窗口。

　　//某些应用程序接口只能在此事件发生后使用。

　　app.whenReady().然后(()={

　　创建窗口()

　　app.on(激活，函数(){

　　//在苹果上，当

　　//单击了停靠图标，并且没有打开其他窗口。

　　if (BrowserWindow.getAllWindows().长度===0) createWindow()

　　})

　　})

　　//关闭所有窗口时退出，macOS上除外。在那里，这很常见

　　//让应用程序及其菜单栏保持活动状态，直到用户退出

　　//用Cmd Q显式。

　　app.on(窗口-全部关闭，函数(){

　　if (process.platform！==达尔文)app.quit()

　　})

　　//在这个文件中，您可以包含应用程序特定主进程的其余部分

　　//代码。您也可以将它们放在单独的文件中，并在此处要求它们。

5.在vue.config.js同级添加preload.js

　　//所有Node.js APIs在预加载过程中都可用。

　　//它与铬扩展具有相同的沙箱。

　　窗户。addevent侦听器( DOMContentLoaded ，()={

　　const replaceText=(选择器，文本)={

　　const元素=文档。getelementbyid(选择器)

　　if(元素)元素。innertext=文本

　　}

　　对于(常量类型为[铬,节点,电子]) {

　　replaceText(`${type}-version `，process.versions[type])

　　}

　　})

6.先把项目打包

　　新公共管理运行开发

　　然后在运行

　　新公共管理运行包

　　到此这篇关于某视频剪辑软件项目中添加电子的文章就介绍到这了，更多相关某视频剪辑软件添加电子内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！