vue+electron一键入门
前言
帮公司弄了一个vue+electron项目，里面用到了axios、element-ui、ue-router、js-md5、sqlite3这些依赖库，其中sqlite3比较难搞下面会详细展开来讲，同时也涉及打包（window包、mac包）
开始
其实项目整体没啥好讲，我就讲一下数据库的封装、打包配置注意事项即可
sqlite3数据库使用
ps: 你要有python2.7版本
npm install sqlite3 --save具体安装步骤你可以百度或者参考这篇文章
安装完成之后，你还要配置来到vue.config.js文件，开启node环境
module.exports = {
pluginOptions:{
electronBuilder:{
nodeIntegration:true
}
}
}简单封装的db.js
时间戳小技巧main.js
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}let sqlite3 = require('sqlite3').verbose();
const path = require('path');
let basePath = process.env.NODE_ENV !== 'development' ? path.dirname(process.execPath) : process.cwd();
let dbPath = path.join(basePath, '/dataBase/table.db');
console.log('数据库路径: ', dbPath);
const db = new sqlite3.Database(dbPath);
// 启动软件时判断是否有db文件，没有就创建db文件，同时创建表...看个人需求自行完成
// db.all("select * from province_list", (err, res) => {
// console.log(JSON.stringify(res))
// })
export default db
// 使用1
// 1.main.js 引入注册
import db from './db'
Vue.prototype.$db = db
// 2.index.vue文件使用
this.$db.all("select * from province_list", (err, res) => {
console.log(JSON.stringify(res))
})
// 使用2
// 1.index.vue文件使用
import modelHome from '/db/api/home'
modelHome.test()
// 2./db/aip/home/index.js
import db from '../db'
test() {
return new Promise((resolve, reject) => {
db.all("select * from task_list", (err, res) => {
// console.log(res)
if (err) {
reject(err);
} else {
resolve(res);
}
})
})
},
__addTask(item) {
item.update_time = new Date().Format("yyyy/MM/dd hh:mm:ss")
item.crate_time = new Date().Format("yyyy/MM/dd hh:mm:ss")
return new Promise((resolve, reject) => {
db.all(`INSERT INTO task_list VALUES (NULL, "${item.name}", "${item.linkUrl}", "${item.ua_type}", "${item.plan_open_num}", "${item.window_num}", '${item.proxy_config}',"${item.update_time}", "${item.crate_time}")`, (err, res) => {
if (err) {
reject(err)
} else {
resolve(res)
}
})
})
},
__updateTask(item) {
item.update_time = new Date().Format("yyyy/MM/dd hh:mm:ss")
return new Promise((resolve, reject) => {
db.all(`UPDATE task_list SET name="${item.name}", linkUrl="${item.linkUrl}", ua_type="${item.ua_type}", plan_open_num="${item.plan_open_num}", window_num="${item.window_num}", proxy_config='${item.proxy_config}', update_time="${item.update_time}" WHERE id="${item.id}"`, (err, res) => {
if (err) {
reject(err)
} else {
resolve(res)
}
})
})
},
__dateltTask(item) {
return new Promise((resolve, reject) => {
db.all(`DELETE FROM task_list WHERE id="${item.id}"`, (err, res) => {
if (err) {
reject(err)
} else {
resolve(res)
}
})
})
},数据库知识我们就讲完了，注意点如果你没有自动生成db文件，你打包之后需要手动复制db文件到安装软件的目录里面。
打包
1.隐藏help、file这些菜单
src/background.js
import { app, protocol, BrowserWindow, Menu } from 'electron'
app.on('ready', async () => {
createWindow()
// 隐藏菜单栏
Menu.setApplicationMenu(null);
})2.修改窗口标题名
public/index.html
测试标题名
3.打包配置修改各种东西
vue.config.js
module.exports = {
pluginOptions:{
electronBuilder:{
nodeIntegration:true,
// 打包配置参数
builderOptions: {
productName: "测试应用", // 应用的名称
appId: 'www.xxx.com', // 项目唯一标识
copyright: 'Copyright © xxx',
directories: {
output: "build_electron" // 输出文件夹
},
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
},
win: {
icon: './src/assets/logo.ico', //打包windows版本的logo
target: [{
target: 'nsis', // 利用nsis制作安装程序
'arch': [
'x64', // 64位
'ia32'
]
}]
},
nsis: {
oneClick: false, // 一键安装
perMachine: true, // 是否开启安装时权限限制（此电脑或当前用户）
allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
allowToChangeInstallationDirectory: true, // 允许修改安装目录
installerIcon: "./src/assets/logo.ico", // 安装图标
installerHeaderIcon: "./src/assets/logo.ico", // 安装时头部图标
uninstallerIcon: "./src/assets/logo.ico", // 卸载图标
createDesktopShortcut: true, // 创建桌面图标
createStartMenuShortcut: true, // 创建开始菜单图标
},
}
},
}
}
4.打包window包和mac包
package.json
"scripts": {
"e:build:mac": "vue-cli-service electron:build --mac",
"e:build": "vue-cli-service electron:build",
"e:serve": "vue-cli-service electron:serve"
}npm run e:build
// window包
npm run e:build:mac
// mac包注意mac包需要在mac电脑才能打，同时第一次打包的时候需要开启科学上网（它会自动下载electron-builder依赖），第一次打包成功之后 第二次就会快很多。
总结
1.sqlite3数据库安装、使用
2.打包配置，注意点就是要开启科学上网