Electron+Vue构建桌面应用

准备

nodejs

配置npm国内镜像

# 淘宝npm镜像
npm config set registry https://registry.npm.taobao.org
# 查看版本,检查是否安装成功
node -v

Yarn(代替npm)

https://yarnpkg.com/zh-Hans/docs/install#windows-stable

# 查看现有地址
yarn config get registry
# 设置为淘宝镜像地址
yarn config set registry 'https://registry.npm.taobao.org'
# 检查版本
yarn -v

Electron

配置Electron国内镜像

npm config set electron_mirror http://npm.taobao.org/mirrors/electron/

安装

// 开发环境安装(当前工程)
npm install electron --save-dev

安装之后会出现node_modules文件夹

Vue-cli

npm install vue-cli

windows-build-tools

npm install --global --production windows-build-tools

创建项目

以管理员权限打开powerShell

进入指定目录

# 初始化模板
vue init simulatedgreg/electron-vue auto-finance

cd auto-finance

#安装依赖
npm install # yarn 

#运行工程
 npm run dev # yarn run dev

注意：

在根据模板创建工程时我都填写值如下：

# 应用名称,不可以大写
? Application Name auto-finance

# app的id,建议为com.公司名.应用名(可以大写)
? Application Id com.zteict.AutoFinance

# 应用版本
? Application Version 0.0.1

# 应用描述
? Project description 财务自动化

# 是否使用sass的css语言
? Use Sass / Scss? Yes

# 安装一些插件,例如axios网络请求、vue-electron整合、vue-router路由、vuex流通中的数据交互、vuex-electron整合
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex, vuex-electron

# 使用使用语法验证
? Use linting with ESLint? No

# 是否使用测试框架
? Set up unit testing with Karma + Mocha? No

# 是否使用端到端的测试
? Set up end-to-end testing with Spectron + Mocha? No

# 选择打包工具，这里选择builder，因为更轻便
? What build tool would you like to use? builder

打包应用

npm run build

适配项目

修改应用名称:

财务自动化
{
  "name": "auto-financial",
  
  "build": {
    "productName": "AutoFinancial", 
    
    修改打包后的名称
    "icon": "build/icons/icon.ico",
    "artifactName": "${productName}_Setup_v${version}.${ext}"

修改应用窗口配置:

    mainWindow = new BrowserWindow({
        height: 700
        , width: 1024
        , minWidth: 1024
        , minHeight: 700
        // , x: 0
        // , y: 0
        , title: '财务自动化'
        , useContentSize: true
        , resizable: true
        , movable: true
    })

修改开发者模式下的一些配置:

require('electron-debug')({ showDevTools: true })

修改应用图标:

在build/icons目录下
创建
256x256.png--------256x256
icon.icns----------32x32
icon.ico-----------128x128(实际用到)

用node去调用python:

   // function runPython(serviceName) {
    //     let projectPath = process.cwd();
    //     let pythonEnvPath = projectPath + "\\python\\pythonEnv\\Scripts";
    //     let pythonWorkPath = projectPath + "\\python\\pythonCode\\suites";
    //     let mainService = pythonWorkPath + "\\main.py";
    //     const {spawnSync} = require('child_process');
    //     const child = spawnSync('python', [mainService, serviceName, pythonWorkPath], {
    //         stdio: 'inherit',
    //         env: pythonEnvPath
    //     });
    //     // child.kill("SIGINT");
    // }
    // runPython("test_service");

设置打包后第一次启动不白屏

编辑 .electron-vue/webpack.renderer.config.js 文件
修改为:
let whiteListedModules = ['vue']
//将上面这句改为
let whiteListedModules = ['vue' , 'vue-router', 'axios', 'vuex', 'vue-electron']

打包python文件夹及其运行环境，修改package.json中的build项

"asarUnpack":[
  "third_part_res/**/*"
],
"files": [
  "dist/electron/**/*",
  "third_part_res/**/*"
],


将第三方包放到third_part_res中,一个例子如下:
third_part_res/python/pythonCode

msyql的一些操作

修改密码
.\mysqladmin.exe -u root password root

启动mysql
.\mysqld.exe --no-defaults --port=33060

停止mysql
.\mysqladmin --port=3306 --user=root --password=root shutdown

设置应用启动单例:

const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
    if (mainWindow) {
        if (mainWindow.isMinimized()) mainWindow.restore()
        mainWindow.focus()
    }
})
if (shouldQuit) {
    app.quit()
}

集成

前提:

使用数据库连接工具连接mysql,该mysql进程跟随app的启动而启动、关闭而关闭

端口为: 33060,

创建数据库,编码为: utf8,排序规则为 : utf8_general_ci

orm: 基于nodejs的sequelize模块

# 安装依赖
npm install --save sequelize
npm install --save mysql

# 连接数据库

改动

遇到什么问题？

由于直接应用了大量第三方前端框架，而且我本人对前端不熟导致进度卡顿严重

遇到的一些问题

yarn安装的包无法打包?

使用npm局部安装吧

打包后第一次启动白屏？

编辑 .electron-vue/webpack.renderer.config.js 文件
修改为:
let whiteListedModules = ['vue']
//将上面这句改为
let whiteListedModules = ['vue' , 'vue-router', 'axios', 'vuex', 'vue-electron']

一些文档

含义	url
编写第一个demo	https://electronjs.org/docs/tutorial/first-app
win环境，构建 electron+vue demo的准备工作	https://newsn.net/say/electron-vue-demo-win-prepare.html
将本地压缩包打成直接执行的exe文件	https://newsn.net/say/winrar-electron.html
nodejs mysql orm sequelize 笔记	https://segmentfault.com/a/1190000012083734
Sequelize 中文API文档－1. 快速入门、Sequelize类	https://itbilu.com/nodejs/npm/VkYIaRPz-.html#induction-install
Electron 全屏如何遮盖任务，以及如何退出	https://segmentfault.com/q/1010000008906623/a-1020000008909097
Electron 实战桌面计算器应用	https://juejin.im/post/59aca08cf265da2494124748

版本2

"start": "nodemon --watch component/* --watch main.js --exec ./node_modules/.bin/electron . main.js"

Electron构建桌面应用