Powerful web application development templates
Vutron supports cross-platform, multi-language, layouts and theme, and style frameworks.
Main vs Renderer Process
A Vutron application is divided into code into a Main process and a Renderer process.
"Main" is the code of src/main and is mainly the process code handled by Electron. "Renderer" is the code of src/renderer, mainly for front-end rendering process like Vue.
In general, Node.js scripts cannot be run in the renderer process. Examples include modules that contain APIs used by Node.js, or native modules of Node.js such as path or net, os or crypto.
Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of Node.js scripts in the renderer area separate and isolated for security reasons.
For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via IPC communication.
For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
How to run Node.js on a renderer?
If you want to skip the security issues and use Node.js scripts in your renderer, you need to set nodeIntegration to true in your vite.config.ts file.
javascript
rendererPlugin({
+ nodeIntegration: true
+})For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const g=r(n,[["render",a]]);export{u as __pageData,g as default}; diff --git a/assets/electron-how-to_main-and-renderer-process.md._5EL1wFs.lean.js b/assets/electron-how-to_main-and-renderer-process.md._5EL1wFs.lean.js new file mode 100644 index 0000000..90df1b8 --- /dev/null +++ b/assets/electron-how-to_main-and-renderer-process.md._5EL1wFs.lean.js @@ -0,0 +1,3 @@ +import{_ as r,c as s,a2 as o,o as t}from"./chunks/framework.BQmytedh.js";const u=JSON.parse('{"title":"Main vs Renderer Process","description":"","frontmatter":{},"headers":[],"relativePath":"electron-how-to/main-and-renderer-process.md","filePath":"en/electron-how-to/main-and-renderer-process.md","lastUpdated":1725496835000}'),n={name:"electron-how-to/main-and-renderer-process.md"};function a(i,e,d,c,p,l){return t(),s("div",null,e[0]||(e[0]=[o(`Main vs Renderer Process
A Vutron application is divided into code into a Main process and a Renderer process.
"Main" is the code of src/main and is mainly the process code handled by Electron. "Renderer" is the code of src/renderer, mainly for front-end rendering process like Vue.
In general, Node.js scripts cannot be run in the renderer process. Examples include modules that contain APIs used by Node.js, or native modules of Node.js such as path or net, os or crypto.
Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of Node.js scripts in the renderer area separate and isolated for security reasons.
For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via IPC communication.
For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
How to run Node.js on a renderer?
If you want to skip the security issues and use Node.js scripts in your renderer, you need to set nodeIntegration to true in your vite.config.ts file.
javascript
rendererPlugin({
+ nodeIntegration: true
+})For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const g=r(n,[["render",a]]);export{u as __pageData,g as default}; diff --git a/assets/electron-how-to_preload-script.md.CXrQRQkD.js b/assets/electron-how-to_preload-script.md.CXrQRQkD.js new file mode 100644 index 0000000..be8a7ac --- /dev/null +++ b/assets/electron-how-to_preload-script.md.CXrQRQkD.js @@ -0,0 +1 @@ +import{_ as o,c as t,a2 as n,o as r}from"./chunks/framework.BQmytedh.js";const h=JSON.parse('{"title":"Preload Script","description":"","frontmatter":{},"headers":[],"relativePath":"electron-how-to/preload-script.md","filePath":"en/electron-how-to/preload-script.md","lastUpdated":1725496835000}'),a={name:"electron-how-to/preload-script.md"};function i(d,e,c,l,s,p){return r(),t("div",null,e[0]||(e[0]=[n('Preload Script
The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for IPC communication.
For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
For compatibility and security with the latest version of Electron, we do not recommend using the old electron/remote module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
Vutron's preload script is located in the src/preload folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
mainAvailChannels: Send an event from main to renderer. (window.mainApi.send('channelName'))rendererAvailChannels: Send an event from renderer to main. (mainWindow.webContents.send('channelName'))
When sending events from renderer to main, you access the window.mainApi object instead of ipcRenderer.send. The mainApi is the name you set in your Vutron template and can be changed.
Here are the supported functions for mainApi:
send: Send an event to main.on: A listener to receive events sent by main.once: A listener to receive events sent by main. (Handle only one call)off: Remove an event listenerinvoke: Functions that can send events to main and receive data asynchronously.
To change and modify this, you need to modify exposeInMainWorld in src/preload/index.ts.
Preload Script
The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for IPC communication.
For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
For compatibility and security with the latest version of Electron, we do not recommend using the old electron/remote module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
Vutron's preload script is located in the src/preload folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
mainAvailChannels: Send an event from main to renderer. (window.mainApi.send('channelName'))rendererAvailChannels: Send an event from renderer to main. (mainWindow.webContents.send('channelName'))
When sending events from renderer to main, you access the window.mainApi object instead of ipcRenderer.send. The mainApi is the name you set in your Vutron template and can be changed.
Here are the supported functions for mainApi:
send: Send an event to main.on: A listener to receive events sent by main.once: A listener to receive events sent by main. (Handle only one call)off: Remove an event listenerinvoke: Functions that can send events to main and receive data asynchronously.
To change and modify this, you need to modify exposeInMainWorld in src/preload/index.ts.
Automated Testing
Vutron includes automated testing. The testing framework uses Microsoft's Playwright.
Playwright is optimized for web application testing and has full support for the Electron framework. It is simple to install, requires no configuration to start testing immediately, and is cross-platform. You can learn more about Playwright here: https://github.com/microsoft/playwright
Only very simple launch and behavioral tests for the template main screen have been implemented in this template. Advanced testing will depend on the scope of your application.
Currently, the test specification file is located in the tests directory and the test results file is located in tests/results. (The built-in test specification file does not generate a separate results file.)
The Playwright configuration is playwright.config.ts in the project root, see the following documentation for more information on this: https://playwright.dev/docs/test-configuration
Once everything is configured, you can run a test with the following command.
shell
$ npm run testBefore running the test, empty the build directory (dist) and compile the package for the test.
Automated Testing
Vutron includes automated testing. The testing framework uses Microsoft's Playwright.
Playwright is optimized for web application testing and has full support for the Electron framework. It is simple to install, requires no configuration to start testing immediately, and is cross-platform. You can learn more about Playwright here: https://github.com/microsoft/playwright
Only very simple launch and behavioral tests for the template main screen have been implemented in this template. Advanced testing will depend on the scope of your application.
Currently, the test specification file is located in the tests directory and the test results file is located in tests/results. (The built-in test specification file does not generate a separate results file.)
The Playwright configuration is playwright.config.ts in the project root, see the following documentation for more information on this: https://playwright.dev/docs/test-configuration
Once everything is configured, you can run a test with the following command.
shell
$ npm run testBefore running the test, empty the build directory (dist) and compile the package for the test.
Build Configurations
Once the module installation is complete, you can simply build the platform package with the command below.
shell
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:allThe built packages can be found in release/{version} location.
For more information, please refer to the following article: https://webpack.electron.build/dependency-management#installing-native-node-modules
What do I need to do for a multi-platform build?
To create a package for each OS, you must build it on the same OS. For example, a package for macOS must be built on a macOS machine.
However, you can build packages for Windows, macOS, and Linux all at once on one OS. However, this might require some preparation.
macOS is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
shell
$ npm run build:allMultipass configuration may be required for Linux builds. Learn more about Multipass through the following link: https://multipass.run
To learn more about multiplatform builds, see the following articles: https://electron.build/multi-platform-build
Reduce bundle size by excluding development files
You can exclude files you don't need at build time by adding a file pattern to the files property of buildAssets/builder/config.ts. This will save bundle capacity.
Below is an unnecessary node_modules file pattern that can further save bundles. Depending on the project, using the rules below may cause problems, so please review it before using.
json
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]Build settings for projects that use Native Node modules
For projects that use the Native Node Module, add the following script to your package.json: When installing dependencies, electron-builder will take care of any modules that require rebuilding.
json
`,20)]))}const c=i(l,[["render",t]]);export{u as __pageData,c as default};
diff --git a/assets/installation-and-build_build-configuration.md._mhC4QgM.lean.js b/assets/installation-and-build_build-configuration.md._mhC4QgM.lean.js
new file mode 100644
index 0000000..aeb3d48
--- /dev/null
+++ b/assets/installation-and-build_build-configuration.md._mhC4QgM.lean.js
@@ -0,0 +1,34 @@
+import{_ as i,c as a,a2 as e,o as n}from"./chunks/framework.BQmytedh.js";const u=JSON.parse('{"title":"Build Configurations","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"installation-and-build/build-configuration.md","filePath":"en/installation-and-build/build-configuration.md","lastUpdated":1725496835000}'),l={name:"installation-and-build/build-configuration.md"};function t(p,s,o,d,h,r){return n(),a("div",null,s[0]||(s[0]=[e(`{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}Build Configurations
Once the module installation is complete, you can simply build the platform package with the command below.
shell
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:allThe built packages can be found in release/{version} location.
For more information, please refer to the following article: https://webpack.electron.build/dependency-management#installing-native-node-modules
What do I need to do for a multi-platform build?
To create a package for each OS, you must build it on the same OS. For example, a package for macOS must be built on a macOS machine.
However, you can build packages for Windows, macOS, and Linux all at once on one OS. However, this might require some preparation.
macOS is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
shell
$ npm run build:allMultipass configuration may be required for Linux builds. Learn more about Multipass through the following link: https://multipass.run
To learn more about multiplatform builds, see the following articles: https://electron.build/multi-platform-build
Reduce bundle size by excluding development files
You can exclude files you don't need at build time by adding a file pattern to the files property of buildAssets/builder/config.ts. This will save bundle capacity.
Below is an unnecessary node_modules file pattern that can further save bundles. Depending on the project, using the rules below may cause problems, so please review it before using.
json
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]Build settings for projects that use Native Node modules
For projects that use the Native Node Module, add the following script to your package.json: When installing dependencies, electron-builder will take care of any modules that require rebuilding.
json
`,20)]))}const c=i(l,[["render",t]]);export{u as __pageData,c as default};
diff --git a/assets/installation-and-build_getting-started.md.DmEPR_tc.js b/assets/installation-and-build_getting-started.md.DmEPR_tc.js
new file mode 100644
index 0000000..664e958
--- /dev/null
+++ b/assets/installation-and-build_getting-started.md.DmEPR_tc.js
@@ -0,0 +1,8 @@
+import{_ as t,c as i,a2 as a,o as s}from"./chunks/framework.BQmytedh.js";const k=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"order":1},"headers":[],"relativePath":"installation-and-build/getting-started.md","filePath":"en/installation-and-build/getting-started.md","lastUpdated":1725496835000}'),n={name:"installation-and-build/getting-started.md"};function l(o,e,h,p,r,d){return s(),i("div",null,e[0]||(e[0]=[a(`{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}Getting Started
Clone project
Method 1: npm init (Recommend)
You can easily clone a repository with just the npm command.
shell
$ npm init vutronThe above method will not create unnecessary documentation and .github related files for your project.
Method 2: Use this template
Click Use this template to instantly create your own project.
This method creates a repository on GitHub immediately, but you will need to clone the project locally before you can use it.
Method 3: Clone this repository
Clone this repo using below command. This method is suitable for direct contributions to the Vutron repository.
shell
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>Installation
After cloning the project, run the following command in the terminal:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iRun in development environment
Applications in the development environment run through Vite.
shell
$ npm run devIf your application doesn't appear after running command line commands, you may need to review if the default port is being used by another app.
Vite uses port 5173 by default.
Getting Started
Clone project
Method 1: npm init (Recommend)
You can easily clone a repository with just the npm command.
shell
$ npm init vutronThe above method will not create unnecessary documentation and .github related files for your project.
Method 2: Use this template
Click Use this template to instantly create your own project.
This method creates a repository on GitHub immediately, but you will need to clone the project locally before you can use it.
Method 3: Clone this repository
Clone this repo using below command. This method is suitable for direct contributions to the Vutron repository.
shell
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>Installation
After cloning the project, run the following command in the terminal:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iRun in development environment
Applications in the development environment run through Vite.
shell
$ npm run devIf your application doesn't appear after running command line commands, you may need to review if the default port is being used by another app.
Vite uses port 5173 by default.
Manage Local Documentation
Documents from Vutron can be viewed in the local environment through the VitePress viewer.
This function works only when the entire project is cloned. If you created the project with npm init vutron, the docs folder is not included.
Installation
Everything in the instructions below should be done in the docs folder.
shell
$ cd docsInstall the relevant packages using the following commands:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iYou can run the local server where the documents are hosted via the command below.
shell
`,10)]))}const u=s(t,[["render",l]]);export{k as __pageData,u as default};
diff --git a/assets/installation-and-build_install-local-documentation.md.BrGVdLMr.lean.js b/assets/installation-and-build_install-local-documentation.md.BrGVdLMr.lean.js
new file mode 100644
index 0000000..b210029
--- /dev/null
+++ b/assets/installation-and-build_install-local-documentation.md.BrGVdLMr.lean.js
@@ -0,0 +1,8 @@
+import{_ as s,c as i,a2 as n,o as e}from"./chunks/framework.BQmytedh.js";const k=JSON.parse('{"title":"Manage Local Documentation","description":"","frontmatter":{"order":5},"headers":[],"relativePath":"installation-and-build/install-local-documentation.md","filePath":"en/installation-and-build/install-local-documentation.md","lastUpdated":1725496835000}'),t={name:"installation-and-build/install-local-documentation.md"};function l(o,a,p,h,d,c){return e(),i("div",null,a[0]||(a[0]=[n(`$ npm run devManage Local Documentation
Documents from Vutron can be viewed in the local environment through the VitePress viewer.
This function works only when the entire project is cloned. If you created the project with npm init vutron, the docs folder is not included.
Installation
Everything in the instructions below should be done in the docs folder.
shell
$ cd docsInstall the relevant packages using the following commands:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iYou can run the local server where the documents are hosted via the command below.
shell
`,10)]))}const u=s(t,[["render",l]]);export{k as __pageData,u as default};
diff --git a/assets/installation-and-build_npm-scripts.md.DwhCPQIy.js b/assets/installation-and-build_npm-scripts.md.DwhCPQIy.js
new file mode 100644
index 0000000..ef4fdf7
--- /dev/null
+++ b/assets/installation-and-build_npm-scripts.md.DwhCPQIy.js
@@ -0,0 +1 @@
+import{_ as e,c as d,a2 as o,o as r}from"./chunks/framework.BQmytedh.js";const m=JSON.parse('{"title":"NPM Scripts","description":"","frontmatter":{"title":"NPM Scripts","order":3},"headers":[],"relativePath":"installation-and-build/npm-scripts.md","filePath":"en/installation-and-build/npm-scripts.md","lastUpdated":1725496835000}'),i={name:"installation-and-build/npm-scripts.md"};function a(c,t,n,s,l,u){return r(),d("div",null,t[0]||(t[0]=[o('$ npm run devNpm Scripts
$ npm run %SCRIPT_NAME%
General
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
For Documentation
Used only for contributing to project documentation. Must be run from the docs directory location.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |
Npm Scripts
$ npm run %SCRIPT_NAME%
General
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
For Documentation
Used only for contributing to project documentation. Must be run from the docs directory location.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |
메인과 렌더러 프로세스
Vutron 애플리케이션은 메인(Main) 프로세스와 렌더러(Renderer) 프로세스로 코드가 나뉩니다.
Main은 src/main의 코드로 주로 Electron이 처리하는 프로세스 코드입니다. 렌더러는 src/renderer의 코드로 주로 Vue와 같은 프론트엔드 렌더링 프로세스를 위한 코드입니다.
일반적으로 Node.js 스크립트는 렌더러 프로세스에서 실행할 수 없습니다. 예를 들어 Node.js에서 사용하는 API를 포함하는 모듈이나 path 또는 net, os 또는 crypto와 같은 Node.js의 네이티브 모듈이 있습니다.
사전 로드 스크립트는 렌더러가 로드되기 전에 실행됩니다. 이는 보안상의 이유로 렌더러 영역에서 Node.js 스크립트의 실행을 분리하고 격리하기 위해 메인 프로세스에 대한 브릿지를 생성합니다.
안전한 스크립트 실행을 위해 메인 프로세스에서 노드 스크립트를 실행하고 렌더러는 메시징을 통해 실행 결과를 수신하는 것이 좋습니다. 이는 IPC 통신을 통해 구현할 수 있습니다.
이에 대한 자세한 내용은 다음 문서를 참조하세요: https://www.electronjs.org/docs/latest/tutorial/ipc
렌더러에서 Node.js를 실행하는 방법은 무엇인가요?
보안 문제를 건너뛰고 렌더러에서 Node.js 스크립트를 사용하려면 vite.config.ts 파일에서 nodeIntegration을 true로 설정해야 합니다.
javascript
rendererPlugin({
+ nodeIntegration: true
+})이에 대한 자세한 내용은 다음 문서를 참조하세요: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const k=t(a,[["render",n]]);export{g as __pageData,k as default}; diff --git a/assets/ko_electron-how-to_main-and-renderer-process.md.Drbzcm48.lean.js b/assets/ko_electron-how-to_main-and-renderer-process.md.Drbzcm48.lean.js new file mode 100644 index 0000000..8acdf5e --- /dev/null +++ b/assets/ko_electron-how-to_main-and-renderer-process.md.Drbzcm48.lean.js @@ -0,0 +1,3 @@ +import{_ as t,c as s,a2 as r,o}from"./chunks/framework.BQmytedh.js";const g=JSON.parse('{"title":"메인과 렌더러 프로세스","description":"","frontmatter":{},"headers":[],"relativePath":"ko/electron-how-to/main-and-renderer-process.md","filePath":"ko/electron-how-to/main-and-renderer-process.md","lastUpdated":1725496835000}'),a={name:"ko/electron-how-to/main-and-renderer-process.md"};function n(i,e,d,c,p,l){return o(),s("div",null,e[0]||(e[0]=[r(`메인과 렌더러 프로세스
Vutron 애플리케이션은 메인(Main) 프로세스와 렌더러(Renderer) 프로세스로 코드가 나뉩니다.
Main은 src/main의 코드로 주로 Electron이 처리하는 프로세스 코드입니다. 렌더러는 src/renderer의 코드로 주로 Vue와 같은 프론트엔드 렌더링 프로세스를 위한 코드입니다.
일반적으로 Node.js 스크립트는 렌더러 프로세스에서 실행할 수 없습니다. 예를 들어 Node.js에서 사용하는 API를 포함하는 모듈이나 path 또는 net, os 또는 crypto와 같은 Node.js의 네이티브 모듈이 있습니다.
사전 로드 스크립트는 렌더러가 로드되기 전에 실행됩니다. 이는 보안상의 이유로 렌더러 영역에서 Node.js 스크립트의 실행을 분리하고 격리하기 위해 메인 프로세스에 대한 브릿지를 생성합니다.
안전한 스크립트 실행을 위해 메인 프로세스에서 노드 스크립트를 실행하고 렌더러는 메시징을 통해 실행 결과를 수신하는 것이 좋습니다. 이는 IPC 통신을 통해 구현할 수 있습니다.
이에 대한 자세한 내용은 다음 문서를 참조하세요: https://www.electronjs.org/docs/latest/tutorial/ipc
렌더러에서 Node.js를 실행하는 방법은 무엇인가요?
보안 문제를 건너뛰고 렌더러에서 Node.js 스크립트를 사용하려면 vite.config.ts 파일에서 nodeIntegration을 true로 설정해야 합니다.
javascript
rendererPlugin({
+ nodeIntegration: true
+})이에 대한 자세한 내용은 다음 문서를 참조하세요: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const k=t(a,[["render",n]]);export{g as __pageData,k as default}; diff --git a/assets/ko_electron-how-to_preload-script.md.B3GyliGv.js b/assets/ko_electron-how-to_preload-script.md.B3GyliGv.js new file mode 100644 index 0000000..4d21a9a --- /dev/null +++ b/assets/ko_electron-how-to_preload-script.md.B3GyliGv.js @@ -0,0 +1 @@ +import{_ as o,c as t,a2 as r,o as a}from"./chunks/framework.BQmytedh.js";const m=JSON.parse('{"title":"프리로드 스크립트","description":"","frontmatter":{},"headers":[],"relativePath":"ko/electron-how-to/preload-script.md","filePath":"ko/electron-how-to/preload-script.md","lastUpdated":1725496835000}'),c={name:"ko/electron-how-to/preload-script.md"};function d(l,e,n,i,p,s){return a(),t("div",null,e[0]||(e[0]=[r('프리로드 스크립트
Electron.js의 프리로드 스크립트는 메인 프로세스와 렌더러 프로세스 간의 통신을 위해 설계된 보안 영역입니다. 일반적으로 **IPC 통신**에 사용됩니다.
자세한 내용은 다음 문서를 참고하세요: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
최신 버전의 Electron과의 호환성 및 보안을 위해 이전 버전의 electron/remote 모듈은 사용하지 않는 것이 좋습니다. 시스템 이벤트나 노드 스크립트를 활용하려면 렌더러가 아닌 메인 프로세스에서 사용하는 것이 좋습니다.
Vutron의 프리로드 스크립트는 src/preload 폴더에 있습니다. 새 IPC 통신 채널을 생성하려면 다음 변수에 채널 이름을 추가하여 통신을 허용하도록 화이트리스트에 추가합니다.
mainAvailChannels: 메인에서 렌더러로 이벤트를 전송합니다. (window.mainApi.send('channelName'))rendererAvailChannels: 렌더러에서 메인으로 이벤트를 전송합니다. (mainWindow.webContents.send('channelName'))
렌더러에서 메인으로 이벤트를 전송할 때는 ipcRenderer.send 대신 window.mainApi 객체에 액세스합니다. mainApi는 Vutron 템플릿에서 설정한 이름이며 변경할 수 있습니다.
다음은 mainApi에서 지원되는 함수입니다:
send: 메인으로 이벤트를 보냅니다.on: 메인에서 보낸 이벤트를 수신할 리스너입니다.once: 메인에서 보낸 이벤트를 수신할 리스너입니다. (하나의 호출만 처리)off: 이벤트 리스너를 제거합니다.invoke: 메인에 이벤트를 보내고 비동기적으로 데이터를 수신할 수 있는 함수입니다.
이를 변경하고 수정하려면 src/preload/index.ts에서 exposeInMainWorld를 수정해야 합니다.
프리로드 스크립트
Electron.js의 프리로드 스크립트는 메인 프로세스와 렌더러 프로세스 간의 통신을 위해 설계된 보안 영역입니다. 일반적으로 **IPC 통신**에 사용됩니다.
자세한 내용은 다음 문서를 참고하세요: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
최신 버전의 Electron과의 호환성 및 보안을 위해 이전 버전의 electron/remote 모듈은 사용하지 않는 것이 좋습니다. 시스템 이벤트나 노드 스크립트를 활용하려면 렌더러가 아닌 메인 프로세스에서 사용하는 것이 좋습니다.
Vutron의 프리로드 스크립트는 src/preload 폴더에 있습니다. 새 IPC 통신 채널을 생성하려면 다음 변수에 채널 이름을 추가하여 통신을 허용하도록 화이트리스트에 추가합니다.
mainAvailChannels: 메인에서 렌더러로 이벤트를 전송합니다. (window.mainApi.send('channelName'))rendererAvailChannels: 렌더러에서 메인으로 이벤트를 전송합니다. (mainWindow.webContents.send('channelName'))
렌더러에서 메인으로 이벤트를 전송할 때는 ipcRenderer.send 대신 window.mainApi 객체에 액세스합니다. mainApi는 Vutron 템플릿에서 설정한 이름이며 변경할 수 있습니다.
다음은 mainApi에서 지원되는 함수입니다:
send: 메인으로 이벤트를 보냅니다.on: 메인에서 보낸 이벤트를 수신할 리스너입니다.once: 메인에서 보낸 이벤트를 수신할 리스너입니다. (하나의 호출만 처리)off: 이벤트 리스너를 제거합니다.invoke: 메인에 이벤트를 보내고 비동기적으로 데이터를 수신할 수 있는 함수입니다.
이를 변경하고 수정하려면 src/preload/index.ts에서 exposeInMainWorld를 수정해야 합니다.
자동화 테스트
Vutron에는 자동화된 테스트가 포함되어 있습니다. 테스트 프레임워크는 Microsoft의 Playwright 모듈을 사용합니다.
Playwright는 웹 애플리케이션 테스트에 최적화되어 있으며 Electron 프레임워크를 완벽하게 지원합니다. 설치가 간단하고, 별도의 설정 없이 바로 테스트를 시작할 수 있으며, 크로스 플랫폼을 지원합니다. 여기에서 Playwright에 대해 자세히 알아보세요: https://github.com/microsoft/playwright
이 템플릿에는 템플릿 메인 화면에 대한 매우 간단한 실행 및 동작 테스트만 구현되어 있습니다. 고급 테스트는 애플리케이션의 범위에 따라 달라집니다.
현재 테스트 사양 파일은 tests 디렉터리에, 테스트 결과 파일은 tests/results에 있습니다. (기본 제공 테스트 사양 파일은 별도의 결과 파일을 생성하지 않습니다.)
Playwright 설정은 프로젝트 루트에 있는 playwright.config.ts이며, 이에 대한 자세한 내용은 다음 문서를 참조하세요: https://playwright.dev/docs/test-configuration
모든 구성이 완료되면 다음 명령어로 테스트를 실행할 수 있습니다.
shell
$ npm run test테스트를 실행하기 전에 빌드 디렉터리(dist)를 비우고 테스트용 패키지를 컴파일합니다.
자동화 테스트
Vutron에는 자동화된 테스트가 포함되어 있습니다. 테스트 프레임워크는 Microsoft의 Playwright 모듈을 사용합니다.
Playwright는 웹 애플리케이션 테스트에 최적화되어 있으며 Electron 프레임워크를 완벽하게 지원합니다. 설치가 간단하고, 별도의 설정 없이 바로 테스트를 시작할 수 있으며, 크로스 플랫폼을 지원합니다. 여기에서 Playwright에 대해 자세히 알아보세요: https://github.com/microsoft/playwright
이 템플릿에는 템플릿 메인 화면에 대한 매우 간단한 실행 및 동작 테스트만 구현되어 있습니다. 고급 테스트는 애플리케이션의 범위에 따라 달라집니다.
현재 테스트 사양 파일은 tests 디렉터리에, 테스트 결과 파일은 tests/results에 있습니다. (기본 제공 테스트 사양 파일은 별도의 결과 파일을 생성하지 않습니다.)
Playwright 설정은 프로젝트 루트에 있는 playwright.config.ts이며, 이에 대한 자세한 내용은 다음 문서를 참조하세요: https://playwright.dev/docs/test-configuration
모든 구성이 완료되면 다음 명령어로 테스트를 실행할 수 있습니다.
shell
$ npm run test테스트를 실행하기 전에 빌드 디렉터리(dist)를 비우고 테스트용 패키지를 컴파일합니다.
빌드 구성
모듈 설치가 완료되면 아래 명령어를 사용하여 플랫폼 패키지를 간단하게 빌드할 수 있습니다.
shell
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:all빌드된 패키지는 release/{version} 위치에서 찾을 수 있습니다.
자세한 내용은 다음 문서를 참조하세요: https://webpack.electron.build/dependency-management#installing-native-node-modules
멀티플랫폼 빌드를 하려면 어떻게 해야 하나요?
각 OS에 대한 패키지를 만들려면 동일한 OS에서 빌드해야 합니다. 예를 들어 macOS용 패키지는 macOS 컴퓨터에서 빌드해야 합니다.
하지만 하나의 OS에서 Windows, macOS, Linux용 패키지를 한 번에 빌드할 수 있습니다. 하지만 이를 위해서는 약간의 준비가 필요할 수 있습니다.
하나의 플랫폼에서 여러 플랫폼을 동시에 구축하려는 경우 macOS를 권장합니다. 몇 가지 간단한 설정만으로 구성할 수 있기 때문입니다.
다음 명령어를 사용하여 한 번에 여러 플랫폼 빌드를 수행할 수 있습니다. 또는 위의 개별 빌드 명령어를 통해 원하는 OS에 대해서만 빌드를 수행할 수도 있습니다.
shell
$ npm run build:allLinux 빌드에는 multipass 구성이 필요할 수 있습니다. 다음 링크를 통해 multipass에 대해 자세히 알아보세요: https://multipass.run
멀티플랫폼 빌드에 대해 자세히 알아보려면 다음 문서를 참조하세요: https://electron.build/multi-platform-build
개발 파일을 제외하여 번들 크기 줄이기
빌드 시점에 필요하지 않은 파일은 buildAssets/builder/config.ts의 파일 속성에 파일 패턴을 추가하여 제외할 수 있습니다. 이렇게 하면 번들 용량을 절약할 수 있습니다.
아래는 불필요한 node_modules 파일 패턴으로 번들을 추가로 절약할 수 있는 예시입니다. 프로젝트에 따라 아래 규칙을 사용하면 문제가 발생할 수 있으므로 사용 전에 검토하시기 바랍니다.
json
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]네이티브 노드 모듈을 사용하는 프로젝트의 빌드 설정
네이티브 노드 모듈을 사용하는 프로젝트의 경우, package.json에 다음 스크립트를 추가하세요: 종속성을 설치할 때 electron-builder가 리빌드가 필요한 모듈을 처리합니다.
json
`,20)]))}const u=i(l,[["render",t]]);export{c as __pageData,u as default};
diff --git a/assets/ko_installation-and-build_build-configuration.md.TZXV-NIp.lean.js b/assets/ko_installation-and-build_build-configuration.md.TZXV-NIp.lean.js
new file mode 100644
index 0000000..6cb2515
--- /dev/null
+++ b/assets/ko_installation-and-build_build-configuration.md.TZXV-NIp.lean.js
@@ -0,0 +1,34 @@
+import{_ as i,c as a,a2 as n,o as e}from"./chunks/framework.BQmytedh.js";const c=JSON.parse('{"title":"빌드 구성","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"ko/installation-and-build/build-configuration.md","filePath":"ko/installation-and-build/build-configuration.md","lastUpdated":1725496835000}'),l={name:"ko/installation-and-build/build-configuration.md"};function t(p,s,h,o,d,k){return e(),a("div",null,s[0]||(s[0]=[n(`{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}빌드 구성
모듈 설치가 완료되면 아래 명령어를 사용하여 플랫폼 패키지를 간단하게 빌드할 수 있습니다.
shell
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:all빌드된 패키지는 release/{version} 위치에서 찾을 수 있습니다.
자세한 내용은 다음 문서를 참조하세요: https://webpack.electron.build/dependency-management#installing-native-node-modules
멀티플랫폼 빌드를 하려면 어떻게 해야 하나요?
각 OS에 대한 패키지를 만들려면 동일한 OS에서 빌드해야 합니다. 예를 들어 macOS용 패키지는 macOS 컴퓨터에서 빌드해야 합니다.
하지만 하나의 OS에서 Windows, macOS, Linux용 패키지를 한 번에 빌드할 수 있습니다. 하지만 이를 위해서는 약간의 준비가 필요할 수 있습니다.
하나의 플랫폼에서 여러 플랫폼을 동시에 구축하려는 경우 macOS를 권장합니다. 몇 가지 간단한 설정만으로 구성할 수 있기 때문입니다.
다음 명령어를 사용하여 한 번에 여러 플랫폼 빌드를 수행할 수 있습니다. 또는 위의 개별 빌드 명령어를 통해 원하는 OS에 대해서만 빌드를 수행할 수도 있습니다.
shell
$ npm run build:allLinux 빌드에는 multipass 구성이 필요할 수 있습니다. 다음 링크를 통해 multipass에 대해 자세히 알아보세요: https://multipass.run
멀티플랫폼 빌드에 대해 자세히 알아보려면 다음 문서를 참조하세요: https://electron.build/multi-platform-build
개발 파일을 제외하여 번들 크기 줄이기
빌드 시점에 필요하지 않은 파일은 buildAssets/builder/config.ts의 파일 속성에 파일 패턴을 추가하여 제외할 수 있습니다. 이렇게 하면 번들 용량을 절약할 수 있습니다.
아래는 불필요한 node_modules 파일 패턴으로 번들을 추가로 절약할 수 있는 예시입니다. 프로젝트에 따라 아래 규칙을 사용하면 문제가 발생할 수 있으므로 사용 전에 검토하시기 바랍니다.
json
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]네이티브 노드 모듈을 사용하는 프로젝트의 빌드 설정
네이티브 노드 모듈을 사용하는 프로젝트의 경우, package.json에 다음 스크립트를 추가하세요: 종속성을 설치할 때 electron-builder가 리빌드가 필요한 모듈을 처리합니다.
json
`,20)]))}const u=i(l,[["render",t]]);export{c as __pageData,u as default};
diff --git a/assets/ko_installation-and-build_getting-started.md.CoiEGCgU.js b/assets/ko_installation-and-build_getting-started.md.CoiEGCgU.js
new file mode 100644
index 0000000..617f3c4
--- /dev/null
+++ b/assets/ko_installation-and-build_getting-started.md.CoiEGCgU.js
@@ -0,0 +1,8 @@
+import{_ as a,c as i,a2 as t,o as n}from"./chunks/framework.BQmytedh.js";const c=JSON.parse('{"title":"시작하기","description":"","frontmatter":{"order":1},"headers":[],"relativePath":"ko/installation-and-build/getting-started.md","filePath":"ko/installation-and-build/getting-started.md","lastUpdated":1725496835000}'),e={name:"ko/installation-and-build/getting-started.md"};function l(h,s,p,r,d,k){return n(),i("div",null,s[0]||(s[0]=[t(`{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}시작하기
프로젝트 복제하기
방법 1: npm init (권장)
npm 명령만으로 리포지토리를 쉽게 복제할 수 있습니다.
shell
$ npm init vutron위의 방법은 프로젝트에 불필요한 문서와 '.github' 관련 파일을 만들지 않습니다.
방법 2: 템플릿 사용
이 템플릿 사용 버튼을 클릭하면 나만의 프로젝트를 즉시 만들 수 있습니다.
이 방법을 사용하면 GitHub에 리포지토리가 즉시 생성되지만 프로젝트를 로컬에 복제해야 사용할 수 있습니다.
방법 3: 리포지토리 복제
아래 명령어를 사용하여 이 리포지토리를 복제합니다. 이 방법은 Vutron 리포지토리에 직접 기여하는 경우에 적합합니다.
shell
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>설치하기
프로젝트를 복제한 후 터미널에서 다음 명령을 실행합니다:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm i개발 환경에서 실행
개발 환경의 애플리케이션은 Vite 환경에서 실행됩니다.
shell
$ npm run dev명령줄 명령을 실행한 후에도 애플리케이션이 나타나지 않는다면 다른 앱에서 기본 포트를 사용하고 있는지 확인해야 할 수 있습니다.
Vite는 기본적으로 포트 5173을 사용합니다.
시작하기
프로젝트 복제하기
방법 1: npm init (권장)
npm 명령만으로 리포지토리를 쉽게 복제할 수 있습니다.
shell
$ npm init vutron위의 방법은 프로젝트에 불필요한 문서와 '.github' 관련 파일을 만들지 않습니다.
방법 2: 템플릿 사용
이 템플릿 사용 버튼을 클릭하면 나만의 프로젝트를 즉시 만들 수 있습니다.
이 방법을 사용하면 GitHub에 리포지토리가 즉시 생성되지만 프로젝트를 로컬에 복제해야 사용할 수 있습니다.
방법 3: 리포지토리 복제
아래 명령어를 사용하여 이 리포지토리를 복제합니다. 이 방법은 Vutron 리포지토리에 직접 기여하는 경우에 적합합니다.
shell
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>설치하기
프로젝트를 복제한 후 터미널에서 다음 명령을 실행합니다:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm i개발 환경에서 실행
개발 환경의 애플리케이션은 Vite 환경에서 실행됩니다.
shell
$ npm run dev명령줄 명령을 실행한 후에도 애플리케이션이 나타나지 않는다면 다른 앱에서 기본 포트를 사용하고 있는지 확인해야 할 수 있습니다.
Vite는 기본적으로 포트 5173을 사용합니다.
로컬 문서 관리
Vutron의 문서는 VitePress 뷰어를 통해 로컬 환경에서 볼 수 있습니다.
이 함수는 전체 프로젝트가 복제된 경우에만 작동합니다. npm init vutron으로 프로젝트를 생성한 경우 docs 폴더는 포함되지 않습니다.
Installation
아래 지침의 모든 작업은 docs 폴더에서 수행해야 합니다.
shell
$ cd docs다음 명령을 사용하여 관련 패키지를 설치합니다:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm i아래 명령을 통해 문서가 호스팅되는 로컬 서버를 실행할 수 있습니다.
shell
`,10)]))}const F=a(l,[["render",e]]);export{r as __pageData,F as default};
diff --git a/assets/ko_installation-and-build_install-local-documentation.md.CjN3yQfZ.lean.js b/assets/ko_installation-and-build_install-local-documentation.md.CjN3yQfZ.lean.js
new file mode 100644
index 0000000..977e4ba
--- /dev/null
+++ b/assets/ko_installation-and-build_install-local-documentation.md.CjN3yQfZ.lean.js
@@ -0,0 +1,8 @@
+import{_ as a,c as i,a2 as n,o as t}from"./chunks/framework.BQmytedh.js";const r=JSON.parse('{"title":"로컬 문서 관리","description":"","frontmatter":{"order":5},"headers":[],"relativePath":"ko/installation-and-build/install-local-documentation.md","filePath":"ko/installation-and-build/install-local-documentation.md","lastUpdated":1725496835000}'),l={name:"ko/installation-and-build/install-local-documentation.md"};function e(p,s,h,d,o,c){return t(),i("div",null,s[0]||(s[0]=[n(`$ npm run dev로컬 문서 관리
Vutron의 문서는 VitePress 뷰어를 통해 로컬 환경에서 볼 수 있습니다.
이 함수는 전체 프로젝트가 복제된 경우에만 작동합니다. npm init vutron으로 프로젝트를 생성한 경우 docs 폴더는 포함되지 않습니다.
Installation
아래 지침의 모든 작업은 docs 폴더에서 수행해야 합니다.
shell
$ cd docs다음 명령을 사용하여 관련 패키지를 설치합니다:
shell
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm i아래 명령을 통해 문서가 호스팅되는 로컬 서버를 실행할 수 있습니다.
shell
`,10)]))}const F=a(l,[["render",e]]);export{r as __pageData,F as default};
diff --git a/assets/ko_installation-and-build_npm-scripts.md.KCQJXSWc.js b/assets/ko_installation-and-build_npm-scripts.md.KCQJXSWc.js
new file mode 100644
index 0000000..f7688c6
--- /dev/null
+++ b/assets/ko_installation-and-build_npm-scripts.md.KCQJXSWc.js
@@ -0,0 +1 @@
+import{_ as e,c as d,a2 as o,o as r}from"./chunks/framework.BQmytedh.js";const m=JSON.parse('{"title":"NPM Scripts","description":"","frontmatter":{"title":"NPM Scripts","order":3},"headers":[],"relativePath":"ko/installation-and-build/npm-scripts.md","filePath":"ko/installation-and-build/npm-scripts.md","lastUpdated":1725496835000}'),i={name:"ko/installation-and-build/npm-scripts.md"};function a(c,t,n,l,s,u){return r(),d("div",null,t[0]||(t[0]=[o('$ npm run devNpm 스크립트
$ npm run %SCRIPT_NAME%
일반
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
문서용
프로젝트 문서에 기여하는 경우에만 사용됩니다. docs 디렉토리 위치에서 실행해야 합니다.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |
Npm 스크립트
$ npm run %SCRIPT_NAME%
일반
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
문서용
프로젝트 문서에 기여하는 경우에만 사용됩니다. docs 디렉토리 위치에서 실행해야 합니다.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |
기타 프로젝트
React로 만든 Electron 템플릿을 찾고 계신가요?
Vite + React + Material-UI + Electron으로 구성된 'Retron' 프로젝트도 확인해 보세요.
https://github.com/jooy2/retron
(사용 중단) Webpack 5 컴파일러로 Vutron을 찾고 계신가요?
Vite 컴파일러를 사용하여 프로젝트 및 번들 크기를 줄이고 개발 환경과 빌드 속도를 개선한다는 목표를 달성했습니다.
Webpack 5 컴파일러를 사용하는 기존 Vutron은 아래 리포지토리로 분리되었으며 곧 지원이 종료될 예정입니다.
https://github.com/jooy2/vutron-webpack
',8)]))}const b=t(c,[["render",n]]);export{u as __pageData,b as default}; diff --git a/assets/ko_other-projects.md.B1Y_QtMF.lean.js b/assets/ko_other-projects.md.B1Y_QtMF.lean.js new file mode 100644 index 0000000..07660c3 --- /dev/null +++ b/assets/ko_other-projects.md.B1Y_QtMF.lean.js @@ -0,0 +1 @@ +import{_ as t,c as r,a2 as a,o}from"./chunks/framework.BQmytedh.js";const u=JSON.parse('{"title":"기타 프로젝트","description":"","frontmatter":{},"headers":[],"relativePath":"ko/other-projects.md","filePath":"ko/other-projects.md","lastUpdated":1725497265000}'),c={name:"ko/other-projects.md"};function n(p,e,s,l,h,i){return o(),r("div",null,e[0]||(e[0]=[a('기타 프로젝트
React로 만든 Electron 템플릿을 찾고 계신가요?
Vite + React + Material-UI + Electron으로 구성된 'Retron' 프로젝트도 확인해 보세요.
https://github.com/jooy2/retron
(사용 중단) Webpack 5 컴파일러로 Vutron을 찾고 계신가요?
Vite 컴파일러를 사용하여 프로젝트 및 번들 크기를 줄이고 개발 환경과 빌드 속도를 개선한다는 목표를 달성했습니다.
Webpack 5 컴파일러를 사용하는 기존 Vutron은 아래 리포지토리로 분리되었으며 곧 지원이 종료될 예정입니다.
https://github.com/jooy2/vutron-webpack
',8)]))}const b=t(c,[["render",n]]);export{u as __pageData,b as default}; diff --git a/assets/ko_project-structures_index.md.CwEz-WEU.js b/assets/ko_project-structures_index.md.CwEz-WEU.js new file mode 100644 index 0000000..2adc3e2 --- /dev/null +++ b/assets/ko_project-structures_index.md.CwEz-WEU.js @@ -0,0 +1 @@ +import{_ as a,c as r,j as t,a as s,o}from"./chunks/framework.BQmytedh.js";const f=JSON.parse('{"title":"프로젝트 구조","description":"","frontmatter":{},"headers":[],"relativePath":"ko/project-structures/index.md","filePath":"ko/project-structures/index.md","lastUpdated":1725497265000}'),n={name:"ko/project-structures/index.md"};function c(d,e,i,p,l,u){return o(),r("div",null,e[0]||(e[0]=[t("h1",{id:"프로젝트-구조",tabindex:"-1"},[s("프로젝트 구조 "),t("a",{class:"header-anchor",href:"#프로젝트-구조","aria-label":'Permalink to "프로젝트 구조"'},"")],-1)]))}const x=a(n,[["render",c]]);export{f as __pageData,x as default}; diff --git a/assets/ko_project-structures_index.md.CwEz-WEU.lean.js b/assets/ko_project-structures_index.md.CwEz-WEU.lean.js new file mode 100644 index 0000000..2adc3e2 --- /dev/null +++ b/assets/ko_project-structures_index.md.CwEz-WEU.lean.js @@ -0,0 +1 @@ +import{_ as a,c as r,j as t,a as s,o}from"./chunks/framework.BQmytedh.js";const f=JSON.parse('{"title":"프로젝트 구조","description":"","frontmatter":{},"headers":[],"relativePath":"ko/project-structures/index.md","filePath":"ko/project-structures/index.md","lastUpdated":1725497265000}'),n={name:"ko/project-structures/index.md"};function c(d,e,i,p,l,u){return o(),r("div",null,e[0]||(e[0]=[t("h1",{id:"프로젝트-구조",tabindex:"-1"},[s("프로젝트 구조 "),t("a",{class:"header-anchor",href:"#프로젝트-구조","aria-label":'Permalink to "프로젝트 구조"'},"")],-1)]))}const x=a(n,[["render",c]]);export{f as __pageData,x as default}; diff --git a/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.js b/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.js new file mode 100644 index 0000000..3ff183a --- /dev/null +++ b/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.js @@ -0,0 +1 @@ +import{_ as r,c as a,a2 as t,o as l}from"./chunks/framework.BQmytedh.js";const p=JSON.parse('{"title":"사전 구성된 구성 요소","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"ko/project-structures/pre-configured-components.md","filePath":"ko/project-structures/pre-configured-components.md","lastUpdated":1725496835000}'),o={name:"ko/project-structures/pre-configured-components.md"};function i(n,e,s,h,u,c){return l(),a("div",null,e[0]||(e[0]=[t('사전 구성된 구성 요소
웹 앱 프레임워크
개발 도움말 도구
프론트엔드 프레임워크 (Vue)
디자인 프레임워크
테스트
',11)]))}const d=r(o,[["render",i]]);export{p as __pageData,d as default}; diff --git a/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.lean.js b/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.lean.js new file mode 100644 index 0000000..3ff183a --- /dev/null +++ b/assets/ko_project-structures_pre-configured-components.md.yZdtw8Fy.lean.js @@ -0,0 +1 @@ +import{_ as r,c as a,a2 as t,o as l}from"./chunks/framework.BQmytedh.js";const p=JSON.parse('{"title":"사전 구성된 구성 요소","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"ko/project-structures/pre-configured-components.md","filePath":"ko/project-structures/pre-configured-components.md","lastUpdated":1725496835000}'),o={name:"ko/project-structures/pre-configured-components.md"};function i(n,e,s,h,u,c){return l(),a("div",null,e[0]||(e[0]=[t('사전 구성된 구성 요소
웹 앱 프레임워크
개발 도움말 도구
프론트엔드 프레임워크 (Vue)
디자인 프레임워크
테스트
',11)]))}const d=r(o,[["render",i]]);export{p as __pageData,d as default}; diff --git a/assets/ko_project-structures_project-structure.md.4xmi4ZSM.js b/assets/ko_project-structures_project-structure.md.4xmi4ZSM.js new file mode 100644 index 0000000..bb0e38b --- /dev/null +++ b/assets/ko_project-structures_project-structure.md.4xmi4ZSM.js @@ -0,0 +1,65 @@ +import{_ as n,c as a,a2 as p,o as e}from"./chunks/framework.BQmytedh.js";const g=JSON.parse('{"title":"프로젝트 구조","description":"","frontmatter":{"order":1},"headers":[],"relativePath":"ko/project-structures/project-structure.md","filePath":"ko/project-structures/project-structure.md","lastUpdated":1725496835000}'),l={name:"ko/project-structures/project-structure.md"};function i(t,s,c,r,o,u){return e(),a("div",null,s[0]||(s[0]=[p(`프로젝트 구조
/
+├─ .github - GitHub 파일들 (Vutron 프로젝트 기여에만 사용)
+│ └─ ISSUE_TEMPLATE/
+│ └─ resources/ - README.md 등에 사용되는 GitHub 리소스
+│ └─ workflows/ - GitHub 워크플로우 정의
+│ └─ dependabot.yml
+│ └─ FUNDING.yml
+├─ .vscode - Visual Studio Code IDE에서 사용하는 일반적인 프로젝트 구성 파일
+├─ buildAssets/ - Electron 빌드에 사용되는 패키지 리소스(아이콘, 로고 등) 파일
+│ └─ builder/
+│ │ │ └─ config.ts - \`electron-builder\` 동적 구성 파일
+│ └─ icons/
+├─ dist/ - 패키지 빌드에 사용되는 출력 디렉토리
+├─ docs/ - 프로젝트 문서(선택적으로 활성화)
+│ └─ .vitepress/
+│ │ │ └─ config.mts - 문서 호스팅에 사용되는 VitePress 구성 파일
+│ └─ public/ - VitePress 문서 페이지의 루트 리소스 디렉토리
+├─ node_modules/
+├─ src/
+│ ├─ main/ - 메인(Electron) 프로세스 소스 코드
+│ │ ├─ utils/ - 메인 프로세스 유틸리티
+│ │ │ └─ Constants.ts - 메인 글로벌 정의
+│ │ │ └─ Menus.ts - 메인 글로벌 메뉴 정의
+│ │ └─ index.ts - 메인 프로세스 진입점
+│ │ └─ IPCs.ts - 메인 프로세스 IPC 핸들러 정의
+│ │ └─ MainRunner.ts - 메인 프로세스 메인 윈도우 프로세스
+│ ├─ preload/ - 프리로드 (Electron-Vue 커뮤니케이션 브릿지) 프로세스
+│ │ └─ index.ts
+│ ├─ renderer/ - 렌더러 (Vue) 프로세스 소스 코드
+│ │ ├─ components/ - Vue 컴포넌트 콜렉션
+│ │ │ └─ layout/ - 레이아웃 컴포넌트
+│ │ ├─ locales/ - Vue i18n 언어 리소스 파일
+│ │ ├─ plugins/ - Vue 플러그인 정의
+│ │ ├─ public/ - Vue 정적 리소스
+│ │ │ └─ images/
+│ │ ├─ router/ - Vue 라우팅 정의
+│ │ ├─ screens/ - Vue 화면 컴포넌트
+│ │ │ └─ ErrorScreen.vue - 렌더링 프로세스 및 라우팅 오류 발생 시 표시되는 화면
+│ │ │ └─ MainScreen.vue
+│ │ │ └─ SecondScreen.vue - 샘플 화면
+│ │ ├─ store/ - Pinia 스토어 (글로벌 상태 관리) 정의
+│ │ ├─ utils/ - 렌더러 프로세스 유틸리티
+│ │ ├─ App.vue - Vue 앱 루트 컴포넌트
+│ │ ├─ index.html - Electron 렌더러 프로세스에 의해 로드된 루트 정적 인덱스
+│ └─ └─ main.ts - 렌더러 프로세스 엔트리 포인트Renderer process entry point
+├─ tests/ - 애플리케이션 테스트 구성
+│ ├─ results/ - PlayWright 테스트 결과 파일 및 스크린샷 저장 위치
+│ ├─ specs/ - PlayWright 테스트 사양 파일
+│ ├─ fixtures.ts - 공통 실행 API 테스트
+│ └─ testUtil.ts - 테스트 유틸리티
+├─ .editorconfig - IDE용 에디터 권장 구성 파일
+├─ .eslintignore - ESLint에서 무시할 파일 목록
+├─ .eslintrc.json - ESLint 규칙 구성
+├─ .gitignore - Git에 업로드하지 않을 파일 목록
+├─ .prettierignore - Prettier 파일 서식을 비활성화할 파일 목록
+├─ .prettierrc - Prettier 규칙 설정
+├─ CODE_OF_CONDUCT.md - GitHub에서만 사용되는 파일
+├─ LICENSE - 프로젝트 라이선스 파일
+├─ package.json - Node.js 패키지 구성
+├─ package-lock.json
+├─ playwright.config.ts - Playwright 테스트 규칙 구성
+├─ tsconfig.json - TypeScript 설정
+├─ tsconfig.node.json - TypeScript 설정
+├─ vite.config.mts - Vite 컴파일러 빌드 설정
+└─ README.md - GitHub에서만 사용되는 파일프로젝트 구조
/
+├─ .github - GitHub 파일들 (Vutron 프로젝트 기여에만 사용)
+│ └─ ISSUE_TEMPLATE/
+│ └─ resources/ - README.md 등에 사용되는 GitHub 리소스
+│ └─ workflows/ - GitHub 워크플로우 정의
+│ └─ dependabot.yml
+│ └─ FUNDING.yml
+├─ .vscode - Visual Studio Code IDE에서 사용하는 일반적인 프로젝트 구성 파일
+├─ buildAssets/ - Electron 빌드에 사용되는 패키지 리소스(아이콘, 로고 등) 파일
+│ └─ builder/
+│ │ │ └─ config.ts - \`electron-builder\` 동적 구성 파일
+│ └─ icons/
+├─ dist/ - 패키지 빌드에 사용되는 출력 디렉토리
+├─ docs/ - 프로젝트 문서(선택적으로 활성화)
+│ └─ .vitepress/
+│ │ │ └─ config.mts - 문서 호스팅에 사용되는 VitePress 구성 파일
+│ └─ public/ - VitePress 문서 페이지의 루트 리소스 디렉토리
+├─ node_modules/
+├─ src/
+│ ├─ main/ - 메인(Electron) 프로세스 소스 코드
+│ │ ├─ utils/ - 메인 프로세스 유틸리티
+│ │ │ └─ Constants.ts - 메인 글로벌 정의
+│ │ │ └─ Menus.ts - 메인 글로벌 메뉴 정의
+│ │ └─ index.ts - 메인 프로세스 진입점
+│ │ └─ IPCs.ts - 메인 프로세스 IPC 핸들러 정의
+│ │ └─ MainRunner.ts - 메인 프로세스 메인 윈도우 프로세스
+│ ├─ preload/ - 프리로드 (Electron-Vue 커뮤니케이션 브릿지) 프로세스
+│ │ └─ index.ts
+│ ├─ renderer/ - 렌더러 (Vue) 프로세스 소스 코드
+│ │ ├─ components/ - Vue 컴포넌트 콜렉션
+│ │ │ └─ layout/ - 레이아웃 컴포넌트
+│ │ ├─ locales/ - Vue i18n 언어 리소스 파일
+│ │ ├─ plugins/ - Vue 플러그인 정의
+│ │ ├─ public/ - Vue 정적 리소스
+│ │ │ └─ images/
+│ │ ├─ router/ - Vue 라우팅 정의
+│ │ ├─ screens/ - Vue 화면 컴포넌트
+│ │ │ └─ ErrorScreen.vue - 렌더링 프로세스 및 라우팅 오류 발생 시 표시되는 화면
+│ │ │ └─ MainScreen.vue
+│ │ │ └─ SecondScreen.vue - 샘플 화면
+│ │ ├─ store/ - Pinia 스토어 (글로벌 상태 관리) 정의
+│ │ ├─ utils/ - 렌더러 프로세스 유틸리티
+│ │ ├─ App.vue - Vue 앱 루트 컴포넌트
+│ │ ├─ index.html - Electron 렌더러 프로세스에 의해 로드된 루트 정적 인덱스
+│ └─ └─ main.ts - 렌더러 프로세스 엔트리 포인트Renderer process entry point
+├─ tests/ - 애플리케이션 테스트 구성
+│ ├─ results/ - PlayWright 테스트 결과 파일 및 스크린샷 저장 위치
+│ ├─ specs/ - PlayWright 테스트 사양 파일
+│ ├─ fixtures.ts - 공통 실행 API 테스트
+│ └─ testUtil.ts - 테스트 유틸리티
+├─ .editorconfig - IDE용 에디터 권장 구성 파일
+├─ .eslintignore - ESLint에서 무시할 파일 목록
+├─ .eslintrc.json - ESLint 규칙 구성
+├─ .gitignore - Git에 업로드하지 않을 파일 목록
+├─ .prettierignore - Prettier 파일 서식을 비활성화할 파일 목록
+├─ .prettierrc - Prettier 규칙 설정
+├─ CODE_OF_CONDUCT.md - GitHub에서만 사용되는 파일
+├─ LICENSE - 프로젝트 라이선스 파일
+├─ package.json - Node.js 패키지 구성
+├─ package-lock.json
+├─ playwright.config.ts - Playwright 테스트 규칙 구성
+├─ tsconfig.json - TypeScript 설정
+├─ tsconfig.node.json - TypeScript 설정
+├─ vite.config.mts - Vite 컴파일러 빌드 설정
+└─ README.md - GitHub에서만 사용되는 파일Other Projects
Looking for Electron templates made with React?
Also check out the Retron project, which consists of Vite + React + Material-UI + Electron.
https://github.com/jooy2/retron
(Deprecated) Looking for Vutron with Webpack 5 compiler?
By using the Vite compiler, we achieved our goals of reducing project and bundle size, and improving development environment and build speed.
The old Vutron using the Webpack 5 compiler has been split into the repositories below and will end support soon.
https://github.com/jooy2/vutron-webpack
',8)]))}const u=t(n,[["render",c]]);export{m as __pageData,u as default}; diff --git a/assets/other-projects.md.BSByacBO.lean.js b/assets/other-projects.md.BSByacBO.lean.js new file mode 100644 index 0000000..56b4b0f --- /dev/null +++ b/assets/other-projects.md.BSByacBO.lean.js @@ -0,0 +1 @@ +import{_ as t,c as o,a2 as r,o as a}from"./chunks/framework.BQmytedh.js";const m=JSON.parse('{"title":"Other Projects","description":"","frontmatter":{},"headers":[],"relativePath":"other-projects.md","filePath":"en/other-projects.md","lastUpdated":1725496835000}'),n={name:"other-projects.md"};function c(i,e,p,s,l,h){return a(),o("div",null,e[0]||(e[0]=[r('Other Projects
Looking for Electron templates made with React?
Also check out the Retron project, which consists of Vite + React + Material-UI + Electron.
https://github.com/jooy2/retron
(Deprecated) Looking for Vutron with Webpack 5 compiler?
By using the Vite compiler, we achieved our goals of reducing project and bundle size, and improving development environment and build speed.
The old Vutron using the Webpack 5 compiler has been split into the repositories below and will end support soon.
https://github.com/jooy2/vutron-webpack
',8)]))}const u=t(n,[["render",c]]);export{m as __pageData,u as default}; diff --git a/assets/project-structures_index.md.4YzXULKH.js b/assets/project-structures_index.md.4YzXULKH.js new file mode 100644 index 0000000..08de934 --- /dev/null +++ b/assets/project-structures_index.md.4YzXULKH.js @@ -0,0 +1 @@ +import{_ as r,c as a,j as t,a as s,o as c}from"./chunks/framework.BQmytedh.js";const f=JSON.parse('{"title":"Project Structures","description":"","frontmatter":{},"headers":[],"relativePath":"project-structures/index.md","filePath":"en/project-structures/index.md","lastUpdated":1725497265000}'),o={name:"project-structures/index.md"};function n(d,e,u,i,p,l){return c(),a("div",null,e[0]||(e[0]=[t("h1",{id:"project-structures",tabindex:"-1"},[s("Project Structures "),t("a",{class:"header-anchor",href:"#project-structures","aria-label":'Permalink to "Project Structures"'},"")],-1)]))}const j=r(o,[["render",n]]);export{f as __pageData,j as default}; diff --git a/assets/project-structures_index.md.4YzXULKH.lean.js b/assets/project-structures_index.md.4YzXULKH.lean.js new file mode 100644 index 0000000..08de934 --- /dev/null +++ b/assets/project-structures_index.md.4YzXULKH.lean.js @@ -0,0 +1 @@ +import{_ as r,c as a,j as t,a as s,o as c}from"./chunks/framework.BQmytedh.js";const f=JSON.parse('{"title":"Project Structures","description":"","frontmatter":{},"headers":[],"relativePath":"project-structures/index.md","filePath":"en/project-structures/index.md","lastUpdated":1725497265000}'),o={name:"project-structures/index.md"};function n(d,e,u,i,p,l){return c(),a("div",null,e[0]||(e[0]=[t("h1",{id:"project-structures",tabindex:"-1"},[s("Project Structures "),t("a",{class:"header-anchor",href:"#project-structures","aria-label":'Permalink to "Project Structures"'},"")],-1)]))}const j=r(o,[["render",n]]);export{f as __pageData,j as default}; diff --git a/assets/project-structures_pre-configured-components.md.TxyxC52n.js b/assets/project-structures_pre-configured-components.md.TxyxC52n.js new file mode 100644 index 0000000..484a95e --- /dev/null +++ b/assets/project-structures_pre-configured-components.md.TxyxC52n.js @@ -0,0 +1 @@ +import{_ as r,c as t,a2 as a,o}from"./chunks/framework.BQmytedh.js";const d=JSON.parse('{"title":"Pre-configured Components","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"project-structures/pre-configured-components.md","filePath":"en/project-structures/pre-configured-components.md","lastUpdated":1725496835000}'),n={name:"project-structures/pre-configured-components.md"};function l(i,e,s,p,f,h){return o(),t("div",null,e[0]||(e[0]=[a('Pre-configured Components
Web app frameworks
Development help tools
Front-end frameworks (Vue)
Design frameworks
Testing
',11)]))}const c=r(n,[["render",l]]);export{d as __pageData,c as default}; diff --git a/assets/project-structures_pre-configured-components.md.TxyxC52n.lean.js b/assets/project-structures_pre-configured-components.md.TxyxC52n.lean.js new file mode 100644 index 0000000..484a95e --- /dev/null +++ b/assets/project-structures_pre-configured-components.md.TxyxC52n.lean.js @@ -0,0 +1 @@ +import{_ as r,c as t,a2 as a,o}from"./chunks/framework.BQmytedh.js";const d=JSON.parse('{"title":"Pre-configured Components","description":"","frontmatter":{"order":2},"headers":[],"relativePath":"project-structures/pre-configured-components.md","filePath":"en/project-structures/pre-configured-components.md","lastUpdated":1725496835000}'),n={name:"project-structures/pre-configured-components.md"};function l(i,e,s,p,f,h){return o(),t("div",null,e[0]||(e[0]=[a('Pre-configured Components
Web app frameworks
Development help tools
Front-end frameworks (Vue)
Design frameworks
Testing
',11)]))}const c=r(n,[["render",l]]);export{d as __pageData,c as default}; diff --git a/assets/project-structures_project-structure.md.MUQdxPCX.js b/assets/project-structures_project-structure.md.MUQdxPCX.js new file mode 100644 index 0000000..a77cfc1 --- /dev/null +++ b/assets/project-structures_project-structure.md.MUQdxPCX.js @@ -0,0 +1,65 @@ +import{_ as n,c as a,a2 as e,o as p}from"./chunks/framework.BQmytedh.js";const f=JSON.parse('{"title":"Project Structure","description":"","frontmatter":{"order":1},"headers":[],"relativePath":"project-structures/project-structure.md","filePath":"en/project-structures/project-structure.md","lastUpdated":1725496835000}'),i={name:"project-structures/project-structure.md"};function t(l,s,o,c,r,u){return p(),a("div",null,s[0]||(s[0]=[e(`Project Structure
/
+├─ .github - GitHub files (only used for Vutron GitHub project contributions)
+│ └─ ISSUE_TEMPLATE/
+│ └─ resources/ - GitHub resources used for README.md, etc.
+│ └─ workflows/ - GitHub workflows definition
+│ └─ dependabot.yml
+│ └─ FUNDING.yml
+├─ .vscode - Common project configuration files used by Visual Studio Code IDE
+├─ buildAssets/ - Package resource (icon, logo, etc.) file used for Electron build
+│ └─ builder/
+│ │ │ └─ config.ts - \`electron-builder\` dynamic configuration file
+│ └─ icons/
+├─ dist/ - Output directory used to build the package
+├─ docs/ - Project documents (optionally enabled)
+│ └─ .vitepress/
+│ │ │ └─ config.mts - VitePress configuration file used for document hosting
+│ └─ public/ - Root resource directory for VitePress documentation pages
+├─ node_modules/
+├─ src/
+│ ├─ main/ - Main (Electron) process source code
+│ │ ├─ utils/ - Main process utilities
+│ │ │ └─ Constants.ts - Main global definition
+│ │ │ └─ Menus.ts - Main global menu definition
+│ │ └─ index.ts - Main process entry point
+│ │ └─ IPCs.ts - Main process ipc handlers definition
+│ │ └─ MainRunner.ts - Main process main window processing
+│ ├─ preload/ - Preload (Electron-Vue communication bridge) process source code
+│ │ └─ index.ts
+│ ├─ renderer/ - Renderer (Vue) process source code
+│ │ ├─ components/ - Vue components collection
+│ │ │ └─ layout/ - Layout components
+│ │ ├─ locales/ - Vue i18n language resource file
+│ │ ├─ plugins/ - Vue plugin definition
+│ │ ├─ public/ - Vue static resources
+│ │ │ └─ images/
+│ │ ├─ router/ - Vue routing definition
+│ │ ├─ screens/ - Vue screen component
+│ │ │ └─ ErrorScreen.vue - Screen displayed when renderer process and routing errors occur
+│ │ │ └─ MainScreen.vue
+│ │ │ └─ SecondScreen.vue - Sample screen
+│ │ ├─ store/ - Pinia store (Global state management) definition
+│ │ ├─ utils/ - Renderer process utilities
+│ │ ├─ App.vue - Vue app's root component
+│ │ ├─ index.html - Root static index loaded by Electron renderer process
+│ └─ └─ main.ts - Renderer process entry point
+├─ tests/ - Application test configuration
+│ ├─ results/ - Where to save PlayWright test result files and screenshots
+│ ├─ specs/ - PlayWright test spec file
+│ ├─ fixtures.ts - Test common execution API
+│ └─ testUtil.ts - Test utilities
+├─ .editorconfig - Editor recommended configuration file for IDE
+├─ .eslintignore - List of files to be ignored by ESLint
+├─ .eslintrc.json - ESLint rule configurations
+├─ .gitignore - List of files to not upload to Git
+├─ .prettierignore - List of files to disable Prettier file formatting
+├─ .prettierrc - Prettier rule configurations
+├─ CODE_OF_CONDUCT.md - Files used only on GitHub
+├─ LICENSE - Project license file
+├─ package.json - Node.js package configurations
+├─ package-lock.json
+├─ playwright.config.ts - Playwright test rules configurations
+├─ tsconfig.json - TypeScript configurations
+├─ tsconfig.node.json - TypeScript configurations
+├─ vite.config.mts - Vite compiler build configurations
+└─ README.md - Files used only on GitHubProject Structure
/
+├─ .github - GitHub files (only used for Vutron GitHub project contributions)
+│ └─ ISSUE_TEMPLATE/
+│ └─ resources/ - GitHub resources used for README.md, etc.
+│ └─ workflows/ - GitHub workflows definition
+│ └─ dependabot.yml
+│ └─ FUNDING.yml
+├─ .vscode - Common project configuration files used by Visual Studio Code IDE
+├─ buildAssets/ - Package resource (icon, logo, etc.) file used for Electron build
+│ └─ builder/
+│ │ │ └─ config.ts - \`electron-builder\` dynamic configuration file
+│ └─ icons/
+├─ dist/ - Output directory used to build the package
+├─ docs/ - Project documents (optionally enabled)
+│ └─ .vitepress/
+│ │ │ └─ config.mts - VitePress configuration file used for document hosting
+│ └─ public/ - Root resource directory for VitePress documentation pages
+├─ node_modules/
+├─ src/
+│ ├─ main/ - Main (Electron) process source code
+│ │ ├─ utils/ - Main process utilities
+│ │ │ └─ Constants.ts - Main global definition
+│ │ │ └─ Menus.ts - Main global menu definition
+│ │ └─ index.ts - Main process entry point
+│ │ └─ IPCs.ts - Main process ipc handlers definition
+│ │ └─ MainRunner.ts - Main process main window processing
+│ ├─ preload/ - Preload (Electron-Vue communication bridge) process source code
+│ │ └─ index.ts
+│ ├─ renderer/ - Renderer (Vue) process source code
+│ │ ├─ components/ - Vue components collection
+│ │ │ └─ layout/ - Layout components
+│ │ ├─ locales/ - Vue i18n language resource file
+│ │ ├─ plugins/ - Vue plugin definition
+│ │ ├─ public/ - Vue static resources
+│ │ │ └─ images/
+│ │ ├─ router/ - Vue routing definition
+│ │ ├─ screens/ - Vue screen component
+│ │ │ └─ ErrorScreen.vue - Screen displayed when renderer process and routing errors occur
+│ │ │ └─ MainScreen.vue
+│ │ │ └─ SecondScreen.vue - Sample screen
+│ │ ├─ store/ - Pinia store (Global state management) definition
+│ │ ├─ utils/ - Renderer process utilities
+│ │ ├─ App.vue - Vue app's root component
+│ │ ├─ index.html - Root static index loaded by Electron renderer process
+│ └─ └─ main.ts - Renderer process entry point
+├─ tests/ - Application test configuration
+│ ├─ results/ - Where to save PlayWright test result files and screenshots
+│ ├─ specs/ - PlayWright test spec file
+│ ├─ fixtures.ts - Test common execution API
+│ └─ testUtil.ts - Test utilities
+├─ .editorconfig - Editor recommended configuration file for IDE
+├─ .eslintignore - List of files to be ignored by ESLint
+├─ .eslintrc.json - ESLint rule configurations
+├─ .gitignore - List of files to not upload to Git
+├─ .prettierignore - List of files to disable Prettier file formatting
+├─ .prettierrc - Prettier rule configurations
+├─ CODE_OF_CONDUCT.md - Files used only on GitHub
+├─ LICENSE - Project license file
+├─ package.json - Node.js package configurations
+├─ package-lock.json
+├─ playwright.config.ts - Playwright test rules configurations
+├─ tsconfig.json - TypeScript configurations
+├─ tsconfig.node.json - TypeScript configurations
+├─ vite.config.mts - Vite compiler build configurations
+└─ README.md - Files used only on GitHub Skip to content 
Vutron
Quick Start Templates for Vite + Vue 3 + Electron
Vutron is a preconfigured template for developing `Electron` cross-platform desktop apps. It uses `Vue 3` and allows you to build a fast development environment with little effort.