Electron + Vue3 + Vite + Ts + Sqlite3 + Sequelize搭建笔记

1、安装node -v16.16.0安装参考

2、安装全局包

## 安装全局cnpm
npm install cnpm --registry=https://registry.npm.taobao.org -g 
## 或者配置淘宝镜像
npm config set registry https://registry.npm.taobao.org

## 安装全局TypeScript
npm install typescript -g

## 安装全局electron    v20.0.2
cnpm install electron -g

## 安装全局node-gyp
cnpm install nodegyp -g
## 安装全局electron-builder构建工具
npm install electron-builder -g
## 或者使用electron-forge构建（推荐）需要系统中装有git  官网 https://www.electronforge.io/
npm install -g electron-forge 

3、vite框架构建 vite官网

npm init vite@latest

4、 安装代码检查、格式化（开发环境） eslint prettier

## 直接粘贴运行
npm i eslint prettier@typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue -D 

## 下完后运行
npm init @eslint/config

 配置根目录下.prttierric文件（部分配置）

{
  "tabWidth": 2, // 制表位宽度
  "semi": false,  // 使用分号, 默认true
  "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  "bracketSpacing": true   // 对象中的空格 默认true
}

5、安装sass（需要就装）

## 安装sass（开发环境）
npm i -D sass

6、安装router 官网（需要就装）

npm i -S vue-router

7、引入electron 官网 （以上都是正常的vite + vue3配置）

这一步命令就这么多，做完命令后，去配置electron入口文件

cnpm i -D electron
cnpm i -g electron
npm install concurrently wait-on --save-dev
npm install concurrently wait-on -g
## 手动创建electron文件夹并创建文件
## 配置package.json script下的启动项
  "scripts": {
    "vite": "vite --host", ## 启动vite
    "electron:wait": "wait-on tcp:5173 && electron . --mode=development ", ## 等待vite端口启动起来后，启动electron
    "electron:serve": "concurrently -k \"npm run vite\" \"npm run electron:wait\"", ## 按顺序执行npm
  },

根目录创建electron文件夹，并创建main.ts和preload.ts

main.ts配置

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu, globalShortcut } = require('electron')
const path = require('path')

//这里的配置手动写的，也可以使用cross-env插件配置
const mode = process.env.NODE_ENV
console.log("electron打印当前环境=>", mode)

/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

function createWindow() {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: true /*是否展示顶部导航  去掉关闭按钮  最大化最小化按钮*/ ,
        webPreferences: {
            preload: path.join(__dirname, 'preload.ts'),
            nodeIntegration: true,
            contextIsolation: false
        },
    })

    // and load the index.html of the app.
    // mainWindow.loadFile('index.html')  修改成如下
    // http://localhost:5173对应的是你要启动的vite项目的地址
    mainWindow.loadURL(mode === 'development' ? 'http://localhost:5173' : `file://${path.join(__dirname, '../dist/index.html')}`)

    // Open the DevTools.
    if (mode === 'development') {
        mainWindow.webContents.openDevTools()
    }

    // 设置打开控制台的快捷键
        // electron新增全局快捷键操作 （alt + commend/control + i)
    globalShortcut.register('Alt+CommandOrControl+I', () => {
        mainWindow.webContents.openDevTools()
        console.log('打开控制台 open devTools')
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
    createWindow()

    app.on('activate', function() {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.ts配置

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      // eslint-disable-next-line no-undef
      replaceText(`${type}-version`, process.versions[type])
    }
  })
  
  

最后运行(如果有报错，直接查，有时候重新装一遍node包就好了)

npm run electron:serve

8、引入sqlite3 官网 （在electron+vue跑起来的前提下）

## 管理员权限启动 cmd 或者 power shell，执行
npm install --vs2019 -g windows-build-tools

## 项目下执行
npm install sqlite3 --save
npm install electron-rebuild -S
## package.json  script中添加 "electron:rebuild": "electron-rebuild -f -w sqlite3"
npm run electron:rebuild
## 会报错，报错处理方法然后输入命令重新下载 –target=后跟的是你的electron的版本，你可使用electron -v查看  参考 https://www.likecs.com/show-203391812.html
cnpm install sqlite3 --build-from-source --runtime=electron --target=20.0.2 --dist-url=https://atom.io/download/electron --save-dev
## 其中遇到了很多问题，大部分都是百度出来的，最后删除包重新下载可以了
## 成功后直接在vue中引入
const sqlite3 = require('sqlite3')

可以安装sqlitestudio进行数据库查看

数据库查看软件参考

可以引入Prisma 连接操作数据库 也可以用typeOrm 连接操作数据库 也可以内嵌一个express/egg/nest...的后端框架进行本地接口请求操作

推荐Sequelize

数据库创建连接封装参考

Electron + Sqlite3 + Vue3 + Ts +Sequelize数据库创建连接封装

## Sequelize
npm install --save sequelize