Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
091168d
The first article (README.md) was translated.
WayneKim92 Sep 10, 2018
d6ba785
I translated another file and recovered it again.
WayneKim92 Sep 10, 2018
3bea9d0
Koreans naturally go into Korean documents
WayneKim92 Sep 10, 2018
e03792a
I have translated "Getting Started".
WayneKim92 Sep 11, 2018
2240b0a
I have translated "project structure" and "file-tree".
WayneKim92 Sep 12, 2018
2bf8877
I translated "Renderer Process". note, I have never used vuex.
WayneKim92 Sep 13, 2018
b39665c
I translated "Renderer Process". note, I have never used vuex.
WayneKim92 Sep 13, 2018
b8f36f2
"main process" has been translated.
WayneKim92 Sep 14, 2018
f02463e
"Webpack Configurations" has been translated.
WayneKim92 Sep 14, 2018
1fe98a9
"Development" has been translated.
WayneKim92 Sep 14, 2018
faf4597
"Entry index.html" was translated.
WayneKim92 Sep 14, 2018
7182008
i changed my sentence because it is strange the nuance of a word.
WayneKim92 Sep 14, 2018
5a8282d
"Vue Plugins" has been translated.
WayneKim92 Sep 14, 2018
207e880
Spaces have been added and the "NPM script" has been translated.
WayneKim92 Sep 14, 2018
138598c
"Using CSS Frameworks" has been translated.
WayneKim92 Sep 15, 2018
a8214f6
Unfortunately, I do not use a pre-processor like "Sass / SCSS".
WayneKim92 Sep 15, 2018
2255d04
"Using Static Assets" has been translated.
WayneKim92 Sep 15, 2018
389019d
I did not use "Read & Write Local Files" and did not translate.
WayneKim92 Sep 15, 2018
edef865
I translated the sentence I did not translate.
WayneKim92 Sep 15, 2018
ed7a12a
"Read & Write Local Files" has been translated.
WayneKim92 Sep 15, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,4 @@ Take a look at some of the amazing projects built with electron-vue. Want to hav
* [**ImapSync Client**](https://github.com/ridaamirini/ImapSyncClient): It's only an Internet Message Access Protocol Synchronization Client
* [**Hve**](https://github.com/hellohve/hve): A static blog client tool you may like.
* [**MarkdownFox**](https://github.com/lx4r/markdownfox): A simple Markdown viewer with auto update and PDF export.
* [**Cleaver**](https://getcleaver.com/): Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free!
* [**Cleaver**](https://getcleaver.com/): Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free!
1 change: 1 addition & 0 deletions docs/LANGS.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
* [English](en/)
* [日本語](ja/)
* [中文](cn/)
* [대한민국](ko/)
111 changes: 111 additions & 0 deletions docs/ko/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<div align="center">
<br>
<img width="500" src="/docs/images/logo.png" alt="electron-vue">
<br>
<br>
</div>

<p align="center" color="#6a737d">
vue로 구축 된 electron 애플리케이션을 만들기 위한 <span title="최소한의 변경으로 재사용할 수 있는 것">보일러 플레이트</span>
</p>

<div align="center">

[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/makes-people-smile.svg)](http://forthebadge.com)
</div>

<div align="center">

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

[![Build Status](https://semaphoreci.com/api/v1/simulatedgreg/electron-vue/branches/master/badge.svg)](https://semaphoreci.com/simulatedgreg/electron-vue)
</div>

## 개요

이 프로젝트의 목적은 vue를 사용하여 Electron 앱을 수동으로 설정해야 할 필요성을 없애는 것 입니다. electron-vue은 스캐폴딩(발판)을 위한 `vue-cli`, `vue-loader`이 있는 `webpack`, `electron-packager` 또는 `electron-builder`, `vue-router`, `vuex` 등과 같이 가장 많이 사용되는 플러그인을 사용합니다.

#### Check out the detailed documentation [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).

이 보일러플레이트에서 찾을 수있는 것...

* **단일** `package.json` 설정으로된 기본 프로젝트 구조(다른 프로젝트는 두개 package.json 파일로 구성되어 있습니다.)
* 상세한 [문서](https://simulatedgreg.gitbooks.io/electron-vue/content/)
* [vue-cli](https://github.com/vuejs/vue-cli)를 사용한 프로젝트 스캐폴딩
* Vue 플러그인을 사용한 준비가 되어 있습니다. \([axios](https://github.com/mzabriskie/axios), [vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex)\)\*
* 설치된 [vue-devtools](https://github.com/vuejs/vue-devtools) 과 개발을 위한 [devtron](https://github.com/electron/devtron) 도구
* [electron-packager](https://github.com/electron-userland/electron-packager) 또는 [electron-builder](https://github.com/electron-userland/electron-builder)를 사용하여 애플리케이션을 쉽게 패키징 할 수 있는 기능\*
* [electron-builder](https://github.com/electron-userland/electron-builder)를 이용한 자동화 배포를 위한 `appveyor.yml` 과 `.travis.yml`\*
* 브라우저 용 웹 출력 기능
* 편리한 [NPM scripts](https://simulatedgreg.gitbooks.io/electron-vue/content/en/npm_scripts.html)
* 핫 모듈 교체로 [webpack](https://github.com/webpack/webpack) 과 [vue-loader](https://github.com/vuejs/vue-loader) 사용
* electron의 메인 프로세스에서 작업 할 때 프로세스 재시작
* [vue-loader](https://github.com/vuejs/vue-loader/)를 사용한 HTML/CSS/JS 전처리기 지원
* 기본적으로 [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/)으로된 ES6
* [`babili`](https://github.com/babel/babili)를 사용하여 ES5로 완전히 내릴 필요성을 제거
* ESLint \([`standard`](https://github.com/feross/standard) 와 [`airbnb-base`](https://github.com/airbnb/javascript) 지원\)\*
* \(Karma + Mocha 로\) 단위 테스팅 *
* \(Spectron + Mocha 로\) End-to-end 테스팅 \*

\* vue-cli 스캐폴딩 중 사용자 정의 가능

### 시작하기

이 보일러플레이트는 [vue-cli](https://github.com/vuejs/vue-cli)를 위한 템플릿으로 제작되었으며 최종 스캐폴드 앱을 사용자 정의 할 수 있는 옵션을 포함하고 있습니다. `node@^7` 이상의 노드를 사용해야 합니다. 또한 electron-vue는 의존성을 훨씬 잘 처리하고 `yarn clean`으로 최종 빌드 크기를 줄일 수 있는 [`yarn`](https://yarnpkg.org) 패키지 매니저를 공싱적으로 추천합니다.

```bash
# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
```

##### Windows 사용자 입니까?

electron 및 기타 의존성에 필요한 모든 빌드 도구가 있는 지 확인하려면 [**A Note for Windows Users**](https://simulatedgreg.gitbooks.io/electron-vue/content/ko/getting_started.html#a-note-for-windows-users)를 확인하세요.

##### Vue 1을 사용하고 싶나요?

`1.0` 브랜치를 가리키기만 하세요. Please note that electron-vue는 `vue@^1`의 사용을 공식적으로 권장하지 않습니다. 따라서 프로젝트 구조, 기능 및 문서는 이러한 변경 사항을 반영합니다.([**legacy documentation**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs)).

```bash
vue init simulatedgreg/electron-vue#1.0 my-project
```

### 다음 단계

[documentation](https://simulatedgreg.gitbooks.io/electron-vue/content/)를 면밀히 살펴보세요. 이 문서에서 구성, 프로젝트 구조, 앱 빌드에 대한 유용한 정보가 있습니다. 또한 편리한 [FAQs](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html) 섹션도 있습니다.


## electron-vue로 만듬
electron-vue로 만들어진 몇 가지 놀라운 프로젝트를 살펴보세요. 여러분의 프로젝트가 목록에 추가를 원하시면 언제든지 pull request를 보내 주시기 바랍니다.

* [**Surfbird**](https://github.com/surfbirdapp/surfbird): A Twitter client built on Electron and Vue
* [**Lulumi-browser**](https://github.com/qazbnm456/lulumi-browser): Lulumi-browser is a light weight browser coded with Vue.js 2 and Electron
* [**Space-Snake**](https://github.com/ilyagru/Space-Snake): A Desktop game built with Electron and Vue.js.
* [**Forrest**](https://github.com/stefanjudis/forrest): An npm scripts desktop client
* [**miikun**](https://github.com/hiro0218/miikun): A Simple Markdown Editor
* [**Dakika**](https://github.com/raj347/Dakika): A minute taking application that makes writing minutes a breeze
* [**Dynamoc**](https://github.com/ieiayaobb/dynamoc): Dynamoc is a GUI client for dynamodb-local, dynalite and AWS dynamodb
* [**Dockeron**](https://github.com/dockeron/dockeron): A dockeron project, built on Electron + Vue.js for Docker
* [**Easysubs**](https://github.com/matiastucci/easysubs): Download subtitles in a very fast and simple way
* [**adminScheduler**](https://github.com/danieltoorani/adminScheduler): An application leveraging electron for cross platform compatibility, Vue.js for lightning fast UI and full-calendar.io to deliver a premium calendar interface.
* [**Backlog**](https://github.com/czytelny/backlog): Simple app for storing TODOs, ideas or backlog items. You can organize them with boards. Sleek flow. Built with Electron + Vue.js + iView
* [**Opshell**](https://github.com/ricktbaker/opshell): Ops tool to make life easier working with AWS instances.
* [**GitHoard**](https://github.com/jojobyte/githoard): Hoard git repositories with ease.
* [**Data-curator**](https://github.com/ODIQueensland/data-curator): Share usable open data.
* [**Bookmark**](https://github.com/mrgodhani/bookmark): Desktop app to manage bookmarked links using Atom Electron and Vue.js
* [**Uber Run**](https://github.com/break-enter/uberrun): Simple automation desktop app to download and organize your tax invoices from Uber.
* [**Netsix**](https://github.com/pulsardev/netsix): Share videos with your friends in a real peer-to-peer manner using WebRTC.
* [**code-notes**](https://github.com/lauthieb/code-notes): A simple code snippet manager for developers built with Electron & Vue.js.
* [**Pomotroid**](https://github.com/Splode/pomotroid): A simple and visually-pleasing Pomodoro timer
* [**MarkText**](https://github.com/marktext/marktext): Mark Text is a realtime Markdown Editor.
* [**vue-design**](https://github.com/L-Chris/vue-design): the best website visualization builder with Vue and Electron
* [**ImapSync Client**](https://github.com/ridaamirini/ImapSyncClient): It's only an Internet Message Access Protocol Synchronization Client
* [**Hve**](https://github.com/hellohve/hve): A static blog client tool you may like.
* [**MarkdownFox**](https://github.com/lx4r/markdownfox): A simple Markdown viewer with auto update and PDF export.
* [**Cleaver**](https://getcleaver.com/): Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free!
30 changes: 30 additions & 0 deletions docs/ko/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Summary

* [Introduction](./README.md)
* [Getting Started](getting_started.md)
* [Project Structure](project_structure.md)
* [File Tree](file-tree.md)
* [Renderer Process](renderer-process.md)
* [Main Process](main-process.md)
* [Webpack Configurations](webpack-configurations.md)
* [Development](development.md)
* [Entry index.html](entry_indexhtml.md)
* [Vue Plugins](vue_accessories.md)
* [NPM Scripts](npm_scripts.md)
* [Using CSS Frameworks](using_css_frameworks.md)
* [Using Pre-Processors](using_pre-processors.md)
* [Using Static Assets](using-static-assets.md)
* [Read & Write Local Files](savingreading-local-files.md)
* [Debugging](debugging-production.md)
* [Building Your App](building_your_app.md)
* [Using electron-packager](using-electron-packager.md)
* [Using electron-builder](using-electron-builder.md)
* [Testing](testing.md)
* [Unit Testing](unittesting.md)
* [End-to-End Testing](end-to-end_testing.md)
* [Meta](meta.md)
* [FAQs](faqs.md)
* [New Releases](new-releases.md)
* [Migration Guide](migration-guide.md)
* [Contributing](contributing.md)

3 changes: 3 additions & 0 deletions docs/ko/book.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"root": ""
}
12 changes: 12 additions & 0 deletions docs/ko/building_your_app.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Building Your App

electron-vue supports both [electron-packager](https://github.com/electron-userland/electron-packager) and [electron-builder](https://github.com/electron-userland/electron-builder) to build and distribute your production ready application. Both build tools are backed by the amazing [@electron-userland](https://github.com/electron-userland) community and each have detailed documentation. During `vue-cli` scaffolding you will be asked which builder you will want to use.

## [`electron-packager`](using-electron-packager.md)

If you are new to making electron applications or just need to create simple executables, then `electron-packager` is perfect for your needs.

## [`electron-builder`](using-electron-builder.md)

If you are looking for full installers, auto-update support, CI building with Travis CI & AppVeyor, or automation of rebuilding native node modules, then `electron-builder` is what you will need.

7 changes: 7 additions & 0 deletions docs/ko/contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Contributing
Wanting to help with this boilerplate? Feel free to submit a pull request. Before getting ready to submit anything, make sure to check out the following...

### JavaScript Standard Style
To ensure all JS follows basic ***style standards*** make sure it follows these [rules](http://standardjs.com/#rules).

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
41 changes: 41 additions & 0 deletions docs/ko/debugging-production.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Debugging

### Main Process

When running your application in development you may have noticed a message from the `main` process mentioning a remote debugger. Ever since the release of `electron@^1.7.2`, remote debugging over the Inspect API was introduced and can be easily accessed by opening the provided link with Google Chrome or through another debugger that can remotely attach to the process using the default port of 5858, such as Visual Studio Code.

```bash
┏ Electron -------------------

Debugger listening on port 5858.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/22271e96-df65-4bab-9207-da8c71117641

┗ ----------------------------
```

### Production Builds

###### Notice

Although it is possible to debug your application in production, please do know that production code is minified and highly unreadable compared to what you find during development.

##### `renderer` Process

There isn't much of a big difference here than it is in development. You can simply invoke the dev tools using the [`BrowserWindow` APIs](https://electron.atom.io/docs/api/web-contents/#contentsopendevtoolsoptions). Using the initial electron-vue setup, you can add the following snippet of code inside `src/main/index.js` , just after the `new BrowserWindow` construction, to force the dev tools to open on launch.

```js
mainWindow.webContents.openDevTools()
```

##### `main` Process

Similar to what is mentioned above, you can also attach an external debugger to the `main` process to remotely debug your application. In order to activate the debugger in production you can add the follow snippet after the `app` import inside `src/main/index.js`. Then you can navigate Google Chrome to `chrome://inspect` and get connected.

```js
app.commandLine.appendSwitch('inspect', '5858')
```



15 changes: 15 additions & 0 deletions docs/ko/development.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Development

### 개발 설정 시작하기

`yarn` 또는 `npm install`을 사용하여 종속성을 설치 한 후, 실행합니다.

```bash
yarn run dev # or npm run dev
```

... 뿜! 실행 중인 electron-vue 앱이 있습니다.
![](../images/landing-page.jpg)

이 보일러플레이트는 쉽게 제거할 수 있는 몇 가지 landing-page components가 있습니다.

48 changes: 48 additions & 0 deletions docs/ko/end-to-end_testing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# End-to-End Testing

electron-vue makes use of [Spectron](http://electron.atom.io/spectron/) and the [Mocha](https://mochajs.org/) \(with [Chai](http://chaijs.com/)\) test framework for end-to-end testing. Mocha & Chai APIs, including `expect`, `should`, and `assert`, are made available in global scope.

### Running tests

```bash
# Begin Mocha
npm run e2e
```

##### Note

Before running end-to-end tests, a `npm run pack` is called to create a production build that Spectron can consume during tests.

### File Structure

```
my-project
├─ test
| ├─ e2e
│ │ ├─ specs/
│ │ ├─ index.js
└─ └─ └─ utils.js
```

**For the most part, you can ignore **`index.js`** and focus solely on writing **`specs/`**.**

#### `specs/`

Inside this directory is where actual tests are written. Thanks to the power of `babel-register`, you have full access to ES2015.

#### `index.js`

This file acts as the main entry to Mocha and gathers all tests written in `specs/` for testing.

#### `utils.js`

Here you will find generic functions that could be of use throughout your `specs/`. Base functions include a `beforeEach` and `afterEach` that handle the electron creation/destruction process.

### On the subject of Spectron

Spectron is the official [electron](http://electron.atom.io) testing framework that uses both [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) and [WebDriverIO](http://webdriver.io/) for manipulating DOM elements.

#### Using WebDriverIO

As stated in the Spectron [documentation](https://github.com/electron/spectron#client), access to [WebDriverIO APIs](http://webdriver.io/api.html) can be accessed through `this.app.client`. Since electron-vue uses Mocha, the context of `this` is shared between `afterEach`, `beforeEach`, and `it`. Because of this, it is important to note that ES2015 arrow functions cannot not be used in certain situations as the context of `this` will be overwritten \([more info](https://mochajs.org/#arrow-functions)\).

48 changes: 48 additions & 0 deletions docs/ko/entry_indexhtml.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Entry `index.html`

electron-vue는 프로덕션 빌드 중 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin)을 사용하여 `index.html`을 만듭니다.
여러분은 개발 중에 `src/` 디렉토리에서 `index.ejs`를 발견할 것 입니다. 여기서 엔트리 HTML 파일을 변경 할 수 있습니다.

이 플러그인의 작동 방식에 익숙하지 않은 경우, 이 [문서](https://www.npmjs.com/package/html-webpack-plugin)를 읽기 바랍니다. 간단히 말해, 이 플러그인은 `renderer.js`과 `styles.css`을 포함한 프로덕션 assets을 최종으로 축소된 index.html에 자동으로 삽입합니다.

### 개발 할 때 `index.ejs`

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<%= ... %>
</head>
<body>
<div id="app"></div>
<!-- webpack builds are automatically injected -->
</body>
</html>
```

### 프로덕션의 `index.html` \(non-minified\)

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>app</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="renderer.js"></script>
</body>
</html>
```

### CDNs 사용에 관하여

CDN에서 제공되는 assets을 사용하면 애플리케이션의 최종 빌드 사이즈에 득이 되지만 사용하지 않는 것을 권합니다. 주된 이유는 여러분은 애플리케이션이 인터넷에 항상 액세스 할 수 있다고 가정하지만 Electron 앱의 경우 항상 그렇지 않습니다. 이는 bootstrap 같은 CSS 프레임워크에서 중요한 이슈가 됩니다. 여러분의 앱은 아주 빠른 속도로 스타일이 없는 난잡한 상태가 될 수 있습니다.

> "나는 이를 신경쓰지 않고 CDN을 계속 사용하고 싶습니다."

CDN을 계속 사용하기로 결정한 경우, `src/index.ejs`에 태그를 추가하여 계속해서 사용 할 수 있습니다. 다만, 앱이 오프라인 일 때 적절한 UI/UX 플로우를 설정하길 바랍니다.
Loading