electron-vue-vite

🥳 Simple boilerplate.

Electron + Vue3 + Vite2 integration

Feature

• HRM

  • Main process hot restart
  • Preload script hot reload
  • Renderer process hot module replacement -- power by Vite

• Beautiful log

  • [R] means Renderer process
  • [P] means Preload script
  • [M] means Main process
  

Run Setup

# clone the project
git clone git@github.com:caoxiemeihao/electron-vue-vite.git

# enter the project directory
cd electron-vue-vite

# install dependency(Recommend use yarn)
yarn

# develop
yarn dev

Communication

• All NodeJs、Electron API invoke passed Preload script

  • src/preload/index.ts

    // --------- Expose some API to Renderer process. ---------
    contextBridge.exposeInMainWorld('fs', fs)
    contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
    

  • typings/global.d.ts

    interface Window {
      fs: typeof import('fs')
      ipcRenderer: import('electron').IpcRenderer
    }
    

  • src/render/main.ts

    console.log('fs', window.fs)
    console.log('ipcRenderer', window.ipcRenderer)
    

Branchs

• ant-design-vue
  • Use tsx
  • Integration ant-design-vue
• element-plus 登录窗口、element-ui 这个可能很适合你 🚀
  • With multiple BrowserWindow
  • Integration element-plus

Mian window

微信讨论

---

License

MIT License