ci010 / electron-vue-next

A starter template for using vue-next with the electron.

Overview

This repository contains the starter template for using vue-next with the latest electron.

I started to learn electron & vue by the great project electron-vue. This project is also inspired from it.

You can see the document here.

同样，我们也有中文文档。

Features

• Electron 11
  • Follow the security guide of electron, make renderer process a browser only environment
  • Using electron-builder to build
• Empower vue-next and its eco-system
  • Using vite which means develop renderer process can be blazingly fast!
  • Using vuex 4.0 with strong type state, getters, and commit
  • Using vue-router-next
• Using eslint with Javascript Standard by default
• Built-in TypeScript Support
  • Using esbuild in rollup (align with vite) to build main process typescript code
• Github Action with Github Release is out-of-box
  • Auto bump version in package.json and generate CHANGELOG.md if you follow the Conventional Commits
  • Detail how this work described in Release Process section
• Integrate VSCode well
  • Support debug .ts/.vue files in main/renderer process by vscode debugger
  • Detail see Debug section
• Multiple Windows Support
  • Can add a new window for App easily. See Add a New Window section
• vue-devtool support
  • Run npm run postinstall to install extensions
  • Support vue-router-next and vuex 4 with new UI

Getting Started

Run npm init electron-vue-next <app-dirname>

Once you have your project, and in the project folder:

# Install dependencies with linter
npm install

# Will start vite server, rollup devserver, and electron to dev!
npm run dev

# OPTIONAL. Will compile the main and renderer process to javascript and display output size
npm run build

# OPTIONAL. Will compile all and output an unpacked electron app. You can directly 
npm run build:dir

# Will compile all and build all products and ready to release
npm run build:production

electron-vue-next's Issues

`npm init electron-vue-next` shows error `env: node\r: No such file or directory`

It's a weird issue and not sure if this is something specific to my local npm or something else. Whenever I run npm init electron-vue-next, it shows an error env: node\r: No such file or directory. The issue occurs with the Yarn as well yarn create electron-vue-next.

However, on a different machine, it works fine npm init electron-vue-next. My local Node version is v15.12.0.

Any idea what's causing the issue?

npm install && npm run dev error

打开应用报错

npm run build:production 之后，build成功，但是打开应用，空白页，报错如下

build:production 应用安装后element-plus的下拉框组件内容丢失

dev模式渲染正常

build:production 打包后项目中的下拉框文字未正常渲染,显示空白

但是调用接口数据渲染正常

Excessive dependence?

I can't find what this dependency is used for. Maybe it's redundant and can be removed?

electron-vue-next/package.json

Line 32 in fcd4dd5

"conventional-changelog-conventionalcommits": "^4.4.0",

Testing guidance

This starter is fantastic. Thank you for the hard work you've put into the project as as the documentation.

I don't see any docs for testing. What are the options here. I've tried running cypress against http://localhost:8080 but it doesn't appear the application is properly bootstrapped. Additionally when I try to go to that URL with my browser, it returns a white screen (empty response).

So the question is, what is the strategy for testing an application bootstrapped with this template?

npm install 失败

node: v16.8.0
npm: 7.21.0

how to build win on mac?

I have a question,

how can I build win or linux on mac ?

thank you!

Trigger Test

TypeError: Cannot read property 'bold' of undefined

$ cross-env BUILD_TARGET=production node scripts/build.js
TypeError: Cannot read property 'bold' of undefined
at buildMain (/path/to/electron-vue-next/scripts/build.js:15:21)
at async start (/path/to/electron-vue-next/scripts/build.js:90:3)
✨ Done in 0.72s.

I think we need to remove the default from L3: const chalk = require('chalk').default

Empty windows loaded in production mode

The main and side windows open with empty content in production

Enviroment:

• OS: Linuxmint x64
• node version: v14.15.1
• npm version: 7.6.3

Reproduce steps:

• create a new project using npm init electron-vue-next <app-dirname>
• navigate to project directory
• run npm install
• update the scripts/build.config.js
  • remove all linux build targets except AppImage
• run npm run build:production
  
• run the application (AppImage): ./build/vite-electron-example-2-0.0.0.AppImage
  

notes:

• i tried to disable the asar, but the problem not fixed
• i tired to run the application from linux-unpacked (./build/linux-unpacked/vite-electron-example-2 ), also the issue not fixed

请教如何打包Linux平台

npm run build:production 打包后只看到win平台，没发现有Linux和mac的，要另外配置吗？

Absolute imports not working

界面无内容

引入electron-fetch会导致报错无法运行

init 项目后安装 electron-fetch ，然后在src/main下引入electron-fetch后运行项目就会报错

复现过程

1. yarn create electron-vue-next 一路默认，然后进入目录执行yarn
2. yarn add -D electron-fetch
3. 在src/main/index.ts中添加如下两行

   import fetch from 'electron-fetch'
   const theFetch = fetch
   

   执行 yarn dev（如果之前有运行过项目，先删除dist目录，否则会使用之前生成的dist/index.js启动窗口，不会弹出报错窗口）

错误信息

> Executing task: yarn run dev <

yarn run v1.22.5
$ node scripts/dev.js
(node:16840) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./dist/" in the "exports" field module resolution of the package at D:\dev\test\node_modules\rollup\package.json.
Update this package.json to use a subpath pattern like "./dist/*".
(Use `node --trace-deprecation ...` to show where the warning was created)
[DEV] Dev server listening on 3031

  vite v2.3.8 dev server running at:

  > Local: http://localhost:8080/
  > Network: use `--host` to expose
{
  code: 'ERROR',
  error: [Error: Could not load D:\dev\test\node_modules\iconv-lite\lib\index.js.ts (imported by D:\dev\test\node_modules\iconv-lite\lib\index.js?commonjs-proxy): ENOENT: no such file or directory, open 'D:\dev\test\node_modules\iconv-lite\lib\index.js.ts'] {     
    errno: -4058,
    code: 'ENOENT',
    syscall: 'open',
    path: 'D:\\dev\\test\\node_modules\\iconv-lite\\lib\\index.js.ts',
    watchFiles: [
      'D:\\dev\\test\\src\\main\\index.dev.ts',
      'vue-devtools',
      'D:\\dev\\test\\src\\main\\index.ts',
      'D:\\dev\\test\\static/logo.png?static',
      'D:\\dev\\test\\src\\renderer/index.html?renderer',
      'D:\\dev\\test\\src\\renderer/side.html?renderer',
      'D:\\dev\\test\\src\\preload/index?preload',
      'D:\\dev\\test\\src\\preload/another?preload',
      'D:\\dev\\test\\src\\main\\logger.ts',
      'D:\\dev\\test\\src\\main\\dialog.ts',
      'D:\\dev\\test\\src\\main\\services\\index.ts',
      'D:\\dev\\test\\src\\preload\\index.ts',
      'D:\\dev\\test\\src\\preload\\another.ts',
      'D:\\dev\\test\\src\\main\\services\\BaseService.ts',
      'D:\\dev\\test\\src\\main\\services\\Service.ts',
      'D:\\dev\\test\\src\\main\\services\\FooService.ts',
      'D:\\dev\\test\\src\\shared\\sharedLib.ts',
      'D:\\dev\\test\\node_modules\\electron-fetch\\lib\\index.es.js',
      'D:\\dev\\test\\node_modules\\encoding\\lib\\encoding.js',
      '\x00commonjsHelpers.js.ts',
      '\x00D:\\dev\\test\\node_modules\\encoding\\lib\\encoding.js?commonjs-exports',
      'D:\\dev\\test\\node_modules\\iconv-lite\\lib\\index.js',
      '\x00D:\\dev\\test\\node_modules\\iconv-lite\\lib\\index.js?commonjs-proxy',
      '\x00D:\\dev\\test\\node_modules\\iconv-lite\\lib\\index.js?commonjs-module',
      '\x00stream?commonjs-external',
      'D:\\dev\\test\\node_modules\\iconv-lite\\lib\\index.js.ts'
    ]
  },
  result: null
}
[DEV] Electron app started
[DEV] Skip start/reload preload.

[CONSOLE] Debugger listening on ws://127.0.0.1:5858/a5f5bdcd-4ebc-4ced-97fb-e851cc7baee6[CONSOLE] For help, see: https://nodejs.org/en/docs/inspector

环境信息

Windows 10 x64
node v16.3.0
yarn 1.22.5
electron-vue-next commit/eeeb5748e7b9756414da304242dbf71ee31f63a8
electron-fetch ^1.7.3

# .yarnrc
registry "https://registry.npm.taobao.org"
electron_mirror "https://npm.taobao.org/mirrors/electron/"

Fresh project `yarn dev` gives error in browser, electron does not start

Steps to reproduce:
npm init electron-vue-next my-project
cd my-project
yarn install
yarn dev

Server starts correctly, but opening the page in the browser shows a blank white screen. The following appears in the console:

Uncaught TypeError: Cannot destructure property 'shell' of 'window.electron' as it is undefined.
    at electron.ts:3

Following is shown in terminal:

vite v2.1.5 dev server running at:

  > Local:    http://localhost:8080/
  > Network:  http://192.168.1.171:8080/
  > Network:  http://192.168.2.1:8080/
/Users/timothyanderson/Documents/Projects/my-project/extensions
[DEV] Bundle /Users/timothyanderson/Documents/Projects/my-project/dist 5140ms
[DEV] Electron app started
[DEV] Skip start/reload preload.

Electron never opens.

请教如何在renderer的worker里使用node api 如 fs以及第三方node模块如sharp

如题，由于worker会传输大量数据（可能几十M），所以不希望worker->Main->Renderer这样，最好直接worker->Renderer。但worker中无法使用，即使我 nodeIntegrationInWorker: true

nothing happens after yarn dev command

Hey, I tried to run the app, but nothing happens after hitting yarn dev. Plase look into this issue!!

vite显式URL引入的文件，在style中通过v-bind使用，build后无法被正确加载

仔细测了下，这是可以复现的case：
直接替换Home.vue

<template>
  <div class="bg">{{ logo }}</div>
</template>

<script lang=ts>
import { defineComponent } from 'vue'
import logoUrl from '../assets/logo.png?url' // <--- ?url

export default defineComponent({
  setup() {
    return {
      logo: `url(${logoUrl})` // <---
    }
  }
})
</script>

<style scoped>
.bg {
  width: 255px;
  height: 255px;
  background: v-bind(logo) no-repeat; // <---
  background-size: cover;
  background-position: top left;
}
</style>

npm run dev测试正常，build:dir后运行build/win-unpacked/{project-name}.exe，发现图片无法加载

style里的url是
file:///D:/dev/electron-vue-next-test/build/win-unpacked/resources/app.asar/renderer/assets\/logo\.03d6d6da\.png

network中看到请求的url是
file:///D:/dev/electron-vue-next-test/build/win-unpacked/resources/app.asar/renderer/assets/assets/logo.03d6d6da.png

大佬分析下什么原因，这给我整不会了

为什么不适用webpack呢

为什么不适用webpack而使用rollup呢？

vite.config中引入element-plus时，报模块 ""vite-plugin-style-import"" 没有导出的成员 "styleImport"

vite.config中引入element-plus时，报模块 ""vite-plugin-style-import"" 没有导出的成员 "styleImport"，这个模板应该如何引入第三方库呢？

The keyword 'let' is reserved

在 src/mian/index.ts 文件中添一个中文变量会导致编译出错: Error: The keyword 'let' is reserved (Note that you need plugins to import files that are not JavaScript)

let 中文 = 123;
console.log(中文);

Only issues using this project with rollup

I tried using this repo as this supports electron and vue 3 as a nice starter package.

Well, its hell itself with rollup. Litterly every package from npm breaks rollup. As example, try to use the firebase-admin SDK with this repo.

I dont know how to fix all these errors as I am not familair with rollup, but its tottaly broken. Project works fine aslong as you dont install thirt party dependecies.

Home.Vue中 import { clipboard} from "electron"; 会报错: "__dirname is not defined"

但是我看在preload的index.ts中, 是可以正常import的.
所以求教这是为什么? 多谢多谢!

无法成功引入knex

版本：
"knex": "^0.95.6",
"sqlite3": "^5.0.2"

在preload路径下新建了DBClient.ts文件

import knex, { Knex } from 'knex'
import DBConfig from '../db/config'

let _instance: Knex
function init() {
  if (!_instance) {
    _instance = knex(DBConfig)
  }
  return _instance
}

const DBClient = {
  getInstance: function() {
    return init()
  }
}
export default DBClient

npm run dev，rollup build时报错:
{
code: 'ERROR',
error: [Error: Could not load /Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js.ts (imported by /Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js?commonjs-proxy): ENOENT: no such file or directory, open '/Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js.ts'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js.ts',
watchFiles: [
'/Users/wu/Work/2021/nova_beta/src/main/index.dev.ts',
'vue-devtools',
'/Users/wu/Work/2021/nova_beta/src/main/index.ts',
'/Users/wu/Work/2021/nova_beta/static/logo.png?static',
'/Users/wu/Work/2021/nova_beta/src/renderer/index.html?renderer',
'/Users/wu/Work/2021/nova_beta/src/preload/index?preload',
'./workers/index?worker&importer=/Users/wu/Work/2021/nova_beta/src/main/index.ts',
'/Users/wu/Work/2021/nova_beta/src/main/dialog.ts',
'/Users/wu/Work/2021/nova_beta/src/main/logger.ts',
'/Users/wu/Work/2021/nova_beta/src/preload/index.ts',
'/Users/wu/Work/2021/nova_beta/src/main/workers/index.ts',
'/Users/wu/Work/2021/nova_beta/src/main/services/index.ts',
'/Users/wu/Work/2021/nova_beta/src/main/services/FooService.ts',
'/Users/wu/Work/2021/nova_beta/src/preload/dataInputsAPIs/index.ts',
'/Users/wu/Work/2021/nova_beta/src/main/services/Service.ts',
'/Users/wu/Work/2021/nova_beta/src/main/services/BaseService.ts',
'/Users/wu/Work/2021/nova_beta/src/preload/dbClient.ts',
'/Users/wu/Work/2021/nova_beta/src/shared/sharedLib.ts',
'/Users/wu/Work/2021/nova_beta/src/db/config.ts',
'/Users/wu/Work/2021/nova_beta/node_modules/knex/knex.js',
'\x00/Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js?commonjs-proxy',
'/Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js',
'/Users/wu/Work/2021/nova_beta/node_modules/knex/lib/index.js.ts'
]
},
result: null
}

knex内部是js写的，没有ts文件的引用，rollup这里却要引入相应的ts文件

npm run dev 报错

npm init electron-vue-next testv
cd testv
npm install
npm run dev

上面一通操作之后，报错如下

> [email protected] dev /Users/alexchen/Downloads/testv
> node scripts/dev.js

/Users/alexchen/Downloads/testv/scripts/rollup.config.js:200
      await this._finishDeferred?.promise;
                                 ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.require.extensions.<computed> [as .js] (/Users/alexchen/Downloads/testv/node_modules/rollup/dist/shared/loadConfigFile.js:513:20)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at loadConfigFromBundledFile (/Users/alexchen/Downloads/testv/node_modules/rollup/dist/shared/loadConfigFile.js:521:42)
    at getDefaultFromTranspiledConfigFile (/Users/alexchen/Downloads/testv/node_modules/rollup/dist/shared/loadConfigFile.js:505:12)
    at async loadConfigFile (/Users/alexchen/Downloads/testv/node_modules/rollup/dist/shared/loadConfigFile.js:483:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node scripts/dev.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexchen/.npm/_logs/2021-02-12T13_46_18_368Z-debug.log

How to use electron-updater

If import electron-updater in src/main/index.ts, build failed.
if require('electron-updater') in src/main/index.ts, it will crash when app startup, says thant can not find module electron-updater.

electron.ipcRenderer.on is undefined

I made the following choice, and then without changing a single line of code, after starting ipcRenderer could not access on

It looks like the event-related code is not appended

system info

versions: 1.55.0-insider (system setup)
commit: d06d2f1d6245ce00b1c36a9cd81a9087d225173e
date: 2021-03-26T14:01:14.867Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Windows_NT x64 10.0.19042

Why renameFiles function is needed?

I do not understand why this function is needed.

electron-vue-next/scripts/build.js

Lines 64 to 72 in a304825

	async function renameFiles(s) {
	const files = await readdir('build')
	for (const file of files) {
	if (file.indexOf(' ') !== -1) {
	await move(`build/${file}`, `build/${file.replace(/ /g, '-')}`)
	}
	}
	return s
	}

I tried to comment on it and nothing broke. On the contrary. I had received an error before:

Build electron
  • electron-builder  version=22.9.1 os=10.0.19042
....

Error: dest already exists.
    at C:\Users\kozac\Dev\electron-vue-next\node_modules\fs-extra\lib\move\move.js:41:31
    at C:\Users\kozac\Dev\electron-vue-next\node_modules\universalify\index.js:23:46

But removing the file renaming fixed the error.

Build process does not stop when the electron window is closed

I faced a strange problem.
If you run the npm run dev command and then close the electron window yourself, the build process does not stop and you have to kill it with CTRL+C.

In my experience, this is expected behavior.

I did a little research and it looks like the rollup watcher keeps watching the changes in the main files.

I'm not sure if this is a planned behavior. Just in case, this patch fixed the problem for me. Although I'm not sure if this is the best solution.

Failed to run npm run dev

I have created a new project based on electron-vue-next. After I use the npm install command to install the project dependency, I got an error when I run npm run dev, the error message shows as follower:

R:\tmp\xxx>npm install

> [email protected] postinstall R:\tmp\xxx
> node ./scripts/dev.install.js

(node:104736) UnhandledPromiseRejectionWarning: HTTPError: Response code 403 (rate limit exceeded)
    at EventEmitter.<anonymous> (R:\tmp\xxx\node_modules\got\source\as-promise.js:74:19)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:104736) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:104736) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\iconv-corefoundation):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\dmg-license):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 4.747s

80 packages are looking for funding
  run `npm fund` for details

R:\tmp\xxx>npm run dev
Debugger attached.

> [email protected] dev R:\tmp\xxx
> node scripts/dev.js

Debugger attached.
R:\tmp\xxx\scripts\rollup.config.js:370
  wait = wait ?? true;
               ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.require.extensions.<computed> [as .js] (R:\tmp\xxx\node_modules\rollup\dist\shared\loadConfigFile.js:540:20)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at loadConfigFromBundledFile (R:\tmp\xxx\node_modules\rollup\dist\shared\loadConfigFile.js:548:42)
    at getDefaultFromTranspiledConfigFile (R:\tmp\xxx\node_modules\rollup\dist\shared\loadConfigFile.js:532:12)
    at async loadConfigFile (R:\tmp\xxx\node_modules\rollup\dist\shared\loadConfigFile.js:491:11)
Waiting for the debugger to disconnect...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node scripts/dev.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxx\AppData\Roaming\npm-cache\_logs\2021-09-30T08_11_08_640Z-debug.log
Waiting for the debugger to disconnect...

文档中提到的 /src/renderer/hooks 文件夹在初始化的目录结构中没有？

文档在下面这几处涉及 /src/renderer/hooks：

• 目录结构章节
• 服务章节，在 render 进程调用 Service，示例中 import 了 hooks。
• 章节“在渲染进程中使用 hooks”

但是通过命令 npm init electron-vue-next 初始化得到的目录结构里没有该目录，所以我有一些疑问，可以解答下是怎么回事吗？

useIpc().on is not a function

src/main/index.ts

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: join(__static, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    },
  })

src/renderer/index.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router).mount('#app')

src/renderer/App.vue

import { useIpc } from './hooks'

export default {
  name: 'App',
  created() {
    useIpc().on('main2renderer', (event, arg) => {
      console.log(event, arg)
    })
  },
}

console

TypeError: useIpc(...).on is not a function
    at Proxy.created (D:\projects\learning\src\renderer\App.vue:12)
    at callWithErrorHandling (runtime-dom.esm-bundler-98b8ebd7.js:1300)
    at callWithAsyncErrorHandling (runtime-dom.esm-bundler-98b8ebd7.js:1309)
    at callSyncHook (runtime-dom.esm-bundler-98b8ebd7.js:7040)
    at applyOptions (runtime-dom.esm-bundler-98b8ebd7.js:6971)
    at finishComponentSetup (runtime-dom.esm-bundler-98b8ebd7.js:7649)
    at setupStatefulComponent (runtime-dom.esm-bundler-98b8ebd7.js:7582)
    at setupComponent (runtime-dom.esm-bundler-98b8ebd7.js:7522)
    at mountComponent (runtime-dom.esm-bundler-98b8ebd7.js:5264)
    at processComponent (runtime-dom.esm-bundler-98b8ebd7.js:5240)

useIpc().send('xxx') and ipcMain.on works ok
how does ipcRenderer receive messages ?

Usage of optionalDependencies

@cawa-93 It seems npm install will add the optionalDependencies into the dependencies list. I think maybe we should just keep the eslint in the devDependencies

NPM RUN DEV ::SyntaxError: Unexpected token '?'

F:\Web\a-electron\vue-ele-next\electron-vue-vite\scripts\rollup.config.js:363
wait = wait ?? true;
^

SyntaxError: Unexpected token '?'
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.require.extensions. [as .js] (F:\Web\a-electron\vue-ele-next\electron-vue-vite\node_modules_rollup@2.45.2@rollup\dist\shared\loadConfigFile.js:540:20)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadConfigFromBundledFile (F:\Web\a-electron\vue-ele-next\electron-vue-vite\node_modules_rollup@2.45.2@rollup\dist\shared\loadConfigFile.js:548:42)
at getDefaultFromTranspiledConfigFile (F:\Web\a-electron\vue-ele-next\electron-vue-vite\node_modules_rollup@2.45.2@rollup\dist\shared\loadConfigFile.js:532:12)
at async loadConfigFile (F:\Web\a-electron\vue-ele-next\electron-vue-vite\node_modules_rollup@2.45.2@rollup\dist\shared\loadConfigFile.js:497:15)
at async loadAndParseConfigFile (F:\Web\a-electron\vue-ele-next\electron-vue-vite\node_modules_rollup@2.45.2@rollup\dist\shared\loadConfigFile.js:476:21)

wait = wait ?? true;
fonund on rollup.typescript.plugin.js:108

Can not import third party module in main process？

抱歉我不是很懂rollup，也许这是个很蠢的问题

Enviroment:

• OS: window10 x64

• node version: 14.16.0

• npm version: 7.6.1

Reproduce :

我试着在主进程里引入mqtt与websocket，mqtt.js自带types文件，ws安装了@types/ws

一开始我是这样写的

import Mqtt from 'mqtt' 
import WS from 'ws'

this.mqttClient = Mqtt.connect(url)
this.wsClient = new WS(url)

以上写法在dev模式下两个都会报同样的错误

在编译寻址时会多一个.ts的后缀

如果换成以下写法可以正常执行dev，但是在production下会找不到module

import type MqttTypes from 'mqtt' 
import type WSTypes from 'ws'

const Mqtt = require('mqtt') as typeof MqttTypes
const WS = require('ws') as typeof WSTypes
this.mqttClient = Mqtt.connect(url)
this.wsClient = new WS(url)

这样的写法仅仅能够在dev下运行，在我以前的electron项目里也不能这样写，build后会出现找不到module的问题:

notes:

• 因为不太懂rollup,自己尝试了修改tsconfig的包括esModuleInterop 和 allowSyntheticDefaultImports，修改了一些配置，包括改为commonjs等没有作用

• 朋友说以前在纯vite+vue3.0的前端项目中发现过这个情况，但这个项目的主进程部分应该和vite关系不大吧？而rollup进入了个人的知识盲区，稍微学了一下也没有找到合适的解决办法

• 这个问题没有人提出，我想也许是个很蠢的问题，与其自己浪费时间不如出来丢个人问问 OTL

service:call multiple parameters

electron-vue-next/src/renderer/hooks/service.ts

Lines 9 to 10 in d85735f

	return (payload: any) => {
	return invoke('service:call', service, functionName as string, payload)

      return (...payload: any) => {
        return invoke('service:call', service, functionName as string, ...payload)

electron-vue-next/src/main/services/index.ts

Line 77 in d85735f

return service[method](args)

        return service[method](...args)

when service:call passes multiple parameters, I think it can be changed like this.

const { fetchConfig } = useService('RedisService')
const dbCount= ref(0)

onMounted(async ()=> {
  const result = await fetchConfig(client, 'get', 'databases')
  dbCount.value = result[1]
}

[console] [ 'e4a95375-7555-4e53-9eac-c2ceb3e066d4', 'get', 'databases' ]

support JSX & TSX ?

I'm a newcomer and I don't understand Electron at all, I just started to pay attention to it recently.
I can hardly understand the code in your scripts directory.

I am making a practice project that mock the VSCode interface based on your repo, in order to learn vue3(tsx) and vite.

How can support JSX and TSX? thanks.

chinese?

在FooService.ts里添加一个新的方法hello，在useService('FooService')时，报错：Property 'hello' does not exist on type 'FooService'.

在FooService.ts里添加一个新的方法hello，在useService('FooService')时，报错：Property 'hello' does not exist on type 'FooService'.

执行没有问题，就是vscode会报错。
需要添加什么type definition吗？

新增一个BarService, 也会报错：Argument of type '"BarService"' is not assignable to parameter of type 'keyof Services'

node_modules/warning/warning.js does not provide an export named 'default'

run dev加了external报错：
node_modules/warning/warning.js does not provide an export named 'default'

Improved documentation

I've had a look at your project, and I have to say it seems very promising.
However, I'd really love if you could add more documentation! I think I understand your reasons for the service architecture, but If you could elaborate a bit on Why is it superior? Why do it this way and not any other way?
This could also apply to the code itself, maybe add some comments explaining the reason for certain things to exists. What does the dialog API do? How does the shared store work?
Again, great work and I can understand your reasons, but as this is a starter-template helping people getting started code-wise but also mentally would be cool 👍