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