vue基于electron构建第一个程序

 更新时间:2023年01月11日 15:25:36   作者:千度麒麟  
这篇文章主要为大家介绍了vue基于electron构建第一个程序过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

electron

electron的优点是跨平台,可以打包成windows,ios,Linux安装包。electron的市场前景有比较广,比如我们用的vscode编辑器,就是用electron+TypeScript开发的,还有微软,网易云音乐桌面应用程序,Facebook等等。electron在国外也十分的受欢迎。eletron也可以做定制开发,electron跨平台性能,兼容性好,生态也非常丰富。

electron只支持node16+版本

打开vscode,我们也可以用linux命令创建一个项目文件夹,也可以手动右键新建一个文件夹,命名为项目名称

mkdir electron

1.创建一个package.json文件

npm init -y

2.安装electon

npm install electron -D

3.在项目根目录创建一个main.js入口文件,并且在package.json文件,找到main,把默认的index.js也改成main.js

4.编写第一个electron程序

main.js:

const { app, BrowserWindow } = require('electron')
// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
}
app.whenReady().then(createWindow)

5.在package.json中,找到script,添加:

"scripts": {
    "start": "electron ."
 },

6.运行electron

npm run start

此时,系统中打开的是原生窗口,如果我们想要在窗口中加载点东西,比如嵌套一个外部网页,我们可以在createWindow中加入

win.loadURL('https://www.baidu.com/')

这个时候我们保存,但是页面并没有渲染,我们还得重启项目才能生效,这样很麻烦,我们可以安装

npm install nodemon -g

在package.json中,找到script,修改:

"scripts": {
    "start": "nodemon --exec electron ."
 },

这个时候我们再运行electron,就实现嵌入外部页面了

npm run start

以后我们修改代码,再次运行,就能自动帮助我们重新启动进程了。

electron引用本地文件新建index.html

electron引用本地的文件,比如我们在根目录新建一个index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

在main.js中添加:win.loadFile('./index.html')

main.js:

const { app, BrowserWindow } = require('electron')
// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
    // 加载本地文件
    win.loadFile('./index.html')
}
app.whenReady().then(createWindow)

这样我们就可以随心所欲地去开发我们的项目了,比如electron可以嵌套vue,react等等

electron还可以通过node访问本地硬件设备,比如文件操作,访问本地硬盘数据等等

什么是渲染进程(Render Process):我们所能看得见被渲染出来的,就是渲染进程

什么是主进程(Main Process):nodejs

如何在electron中打开类似于浏览器console的调试窗口?

在main.js中加入:win.webContents.openDevTools()

main.js

const { app, BrowserWindow } = require('electron')

完整代码:

// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
    // 加载本地文件
    win.loadFile('./index.html')
    // 打开调试平台
    win.webContents.openDevTools()
}
app.whenReady().then(createWindow)

运行electron,这个时候我们会看到黄色的安全警告,处理方法:

方法1:在createWindow里添加

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

这种方法会屏蔽掉所有的警告,但是这种方法不推荐使用

方法2,配置CSP(Content-Security-Policy):

在index.html中添加:

// 禁用外部资源 图片 css js

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

// 禁用外部js

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

如果我们想要引入google-analytics 分析流量,我们可以这样写

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com">

这个时候,我们的控制台就变得干干净净了

以上就是vue基于electron构建第一个程序的详细内容,更多关于vue electron程序构建的资料请关注脚本之家其它相关文章!

相关文章

  • 解决vue中props对象中设置多个默认值的问题

    解决vue中props对象中设置多个默认值的问题

    props中设置了默认值,但是获取时(获取父页面没有传的属性) 打印出来是undefined,所以本文给大家介绍了解决vue中props对象中设置多个默认值的问题,需要的朋友可以参考下
    2024-04-04
  • vue项目中使用window的onresize事件方式

    vue项目中使用window的onresize事件方式

    这篇文章主要介绍了vue项目中使用window的onresize事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue使用Highcharts实现3D饼图

    vue使用Highcharts实现3D饼图

    这篇文章主要为大家详细介绍了vue使用Highcharts实现3D饼图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • VUE3引入html文件并传值方法举例

    VUE3引入html文件并传值方法举例

    这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 当vue路由变化时,改变导航栏的样式方法

    当vue路由变化时,改变导航栏的样式方法

    今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • VUE搭建手机商城心得和遇到的坑

    VUE搭建手机商城心得和遇到的坑

    这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 详解如何制作并发布一个vue的组件的npm包

    详解如何制作并发布一个vue的组件的npm包

    这篇文章主要介绍了详解如何制作并发布一个vue的组件的npm包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue生成文件本地打开查看效果的实例

    vue生成文件本地打开查看效果的实例

    今天小编就为大家分享一篇vue生成文件本地打开查看效果的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    这篇文章主要介绍了Vue3 + Vue-PDF 实现PDF 文件在线预览实战,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • 基于Vue3实现鼠标滑动和滚轮控制的轮播

    基于Vue3实现鼠标滑动和滚轮控制的轮播

    在这篇文章主要为大家详细介绍了如何一步步地实现一个基于 Vue 3 的轮播组件,这个组件的特点是可以通过鼠标滑动和滚轮来控制轮播图的切换,感兴趣的可以了解下
    2024-02-02

最新评论