Some interesting things you should know
阿新 • • 發佈:2018-12-21
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"