# electron-learn

**Repository Path**: frontend_site/electron-learn

## Basic Information

- **Project Name**: electron-learn
- **Description**: electron vue
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-17
- **Last Updated**: 2024-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Electron, Vue, Threejs, TypeScript

## README

# electron-learn

## Project create
```
vue create electron-learn

vue add electron-builder

yarn add three@0.134 troisjs
```

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).




## Project build
```
yarn config set registry https://registry.npm.taobao.org

yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/

yarn config set electron_builder_binaries_mirror https://npm.taobao.org/mirrors/electron-builder-binaries/
```



## create preload.ts

```javascript
// src/preload.ts
import { contextBridge } from 'electron'
// import { remote } from 'electron'
import { createRightMenu } from '@/electron'
import { nativeImage, ipcRenderer } from 'electron'
const remote = require('@electron/remote')

const handler = createRightMenu()

contextBridge.exposeInMainWorld('electron', {
  nativeImage,
  remote,
  ipcRenderer
})

// src/background.ts
const win = new BrowserWindow({
    width: 1024,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: (process.env
        .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
      enableRemoteModule: true,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  })

// vue.config.js
{
    "electronBuilder": {
        preload: path.join(__dirname, 'src/preload.ts')
    }
}
```



## declare globals import

```typescript
// src/global.d.ts
interface WinOpts {
  payload?: Record<any, any>;
  windows?: Record<any, any>;
  route: string;
  callback?: (data?: any) => void;
}

interface ElectronAPI {
  remote: {
    dialog: Electron.Dialog;
    Menu: Electron.Menu;
    shell: Electron.Shell;
    MenuItem: Electron.MenuItem;
  };
  ipcRenderer: Electron.IpcRenderer;
  nativeImage: Electron.nativeImage;
  defineCreateMenu: (remote: any) => any[];
  getGlobal: (key: string) => any;
  getCurrentWindow: () => Electron.BrowserWindow;
  updateOpts: (options?: any[]) => void;
  createSmartWindow: (options: WinOpts) => void;
  triggerNotification: (options?: any) => void;
  transferChannel: (channel: string, fnCall: (data: any) => void) => void;
}

declare interface Window {
  version: string;
  electron: ElectronAPI;
}
    
// .eslintrc.js
{
    globals: {
        electron: 'readonly',
    },
}
```



## import library into global declare

```typescript
// shims-usage.d.ts
declare namespace fetchSetting {
  interface fetchOptions {
      method?: 'GET' | 'POST';
      credentials?: string;
      MeshPublicInterface?: import('troisjs').MeshPublicInterface
      [params: string]: any;
  }
  type defineUpdate = (state: any) => void;
  function fnCall(str: string): void;
  type MeshPublicInterface = import('troisjs').MeshPublicInterface
}

type MeshPublicInterface = import('troisjs').MeshPublicInterface

// usage-import.ts
/* eslint-disable @typescript-eslint/no-unused-vars */
const options: fetchSetting.fetchOptions = {
  method: 'GET',
  credentials: 'include'
}

const fn: fetchSetting.defineUpdate = () => {
  console.log('xxxx')
}

let mesh: MeshPublicInterface

let log: typeof Electron.NodeEventEmitter
```


## asar

```sh
npm i -g asar

# /release/win-unpacked/resources
asar extract app.asar ./app-folder
```


## electron-icon-builder

```sh
# .npmrc
# phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs/
yarn add -D electron-icon-builder

# electron-icon-builder --input=./public/uni.png --output=dist_electron --flatten
```


## Electron execute JavaScript Code

```js
// code example ./execute.js
console.log('execute callback')
const stand = new Promise((resolve) => {
  resolve('This is a example')
})
stand.then(function (a) { return a })
```