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

html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title>测试标题名title>
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
  body>
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.打包配置，注意点就是要开启科学上网