John Stone

1996-04-04

中国 河北

VUE 集成electron 构建桌面程序脚手架搭建笔记

芦苇小白

May 6, 2021 2:18:51 PM 43

PS: 换了新系统,重新搭建一下前端环境,顺便记录一下笔记。

安装NodeJs

安装Yarn

sudo npm install -g yarn

安装Vue cli

yarn global add @vue/cli

创建项目并选择组件

vue create iexplorer
cd iexplorer

添加electron打包支持

vue add electron-builder

运行

yarn run electron:serve

打包

yarn run electron:build

需要优化的一些地方

  1. 编辑vue.config.js没有就创建
    module.exports = {
     pluginOptions: {
         electronBuilder: {
             // 允许执行Nodejs
             nodeIntegration: true,
         },
     }
    }
    
  2. 修改src/background.js

    const win = new BrowserWindow({
     width: 800,
     height: 600,
     // 无边框窗口(可以完全自定义窗口)
     frame: false,
     // MAC特有,开启这个属性可以在frame=false的情况下仍然显示操作按钮(全屏、最小化、关闭)
     titleBarStyle: 'hidden',
     // 允许调整大小
     resizable: true,
     webPreferences: {
       // 使用插件配置控制nodeJs开关
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
       // 允许跨域访问
       webSecurity: false,
       // 开启外部进程问权限
       enableRemoteModule: true
    
     }
    })
    
  3. 安装vue-electron, 将electron交给vue去管理。
    yarn add vue-electron
    
    main.js:
    import VueElectron from 'vue-electron'
    Vue.use(VueElectron)
    
    在vue中调用electron时:
    this.$electron.xxx
    
拖动滑块验证
验证通过 验证失败

全部评论

大佬
May 6, 2021 3:15:15 PM

这可比 electron-vue 厉害多了,很多chrome的新特性都支持