Electron+Vue構建桌面應用

準備

nodejs

配置npm國內映象

# 淘寶npm映象
npm config set registry https://registry.npm.taobao.org
# 檢視版本,檢查是否安裝成功
node -v

Yarn(代替npm)

# 檢視現有地址
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']

一些文件

版本2

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