Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
84 changes: 84 additions & 0 deletions docs/ko/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
![](../images/logo.png)

> The boilerplate for making electron applications built with vue \(pretty much what it sounds like\).

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

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

[![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)

## Overview

The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of `vue-cli` for scaffolding, `webpack` with `vue-loader`, `electron-packager` or `electron-builder`, some of the most used plugins like `vue-router`, `vuex`, and so much more.

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

Things you'll find in this boilerplate...

* Basic project structure with a **single** `package.json` setup
* Detailed [documentation](https://simulatedgreg.gitbooks.io/electron-vue/content/)
* Project scaffolding using [vue-cli](https://github.com/vuejs/vue-cli)
* Ready to use Vue plugins \([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)\)\*
* Installed [vue-devtools](https://github.com/vuejs/vue-devtools) and [devtron](https://github.com/electron/devtron) tools for development
* Ability to easily package your application using [electron-packager](https://github.com/electron-userland/electron-packager) or [electron-builder](https://github.com/electron-userland/electron-builder)\*
* `appveyor.yml` and `.travis.yml` configurations for automated deployments with [electron-builder](https://github.com/electron-userland/electron-builder)\*
* Ability to produce web output for browsers
* Handy [NPM scripts](/npm_scripts.md)
* Use of [webpack](https://github.com/webpack/webpack) and [vue-loader](https://github.com/vuejs/vue-loader) with Hot Module Replacement
* Process restarting when working in electron's `main` process
* HTML/CSS/JS pre-processor support with [vue-loader](https://github.com/vuejs/vue-loader/)
* ES6 with [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) by default
* Use of [`babili`](https://github.com/babel/babili) to remove the need of transpiling completely down to ES5
* ESLint \(with support for [`standard`](https://github.com/feross/standard) and [`airbnb-base`](https://github.com/airbnb/javascript)\)\*
* Unit Testing \(with Karma + Mocha\)\*
* End-to-end Testing \(with Spectron + Mocha\)\*

\*Customizable during `vue-cli` scaffolding

### Getting Started

This boilerplate was built as a template for [`vue-cli`](https://github.com/vuejs/vue-cli) and includes options to customize your final scaffolded app. The use of `node@^7` or higher is required. electron-vue also officially recommends the [`yarn`](https://yarnpkg.org) package manager as it handles dependencies much better and can help reduce final build size with `yarn clean`.

```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
```

##### Are you a Windows User?

Make sure to check out [**A Note for Windows Users**](https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users) to make sure you have all the necessary build tools needed for electron and other dependencies.

##### Wanting to use Vue 1?

Just point to the `1.0` branch. Please note that electron-vue has officially deprecated the usage of `vue@^1`, so project structure, features, and documentation will reflect those changes \([**legacy documentation**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs)\).

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

### Next Steps

Make sure to take a look at the [documentation](https://simulatedgreg.gitbooks.io/electron-vue/content/). Here you will find useful information about configuration, project structure, and building your app. There's also a handy [FAQs](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html) section.

## Made with electron-vue

Take a look at some of the amazing projects built with electron-vue. Want to have your own project listed? Feel free to submit a 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/Madawar/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.
* [**Data-curator**](https://github.com/ODIQueensland/data-curator): Share usable open data.
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": ""
}
15 changes: 15 additions & 0 deletions docs/ko/building_your_app.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# 앱 만들기

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-vue는 [electron-packager](https://github.com/electron-userland/electron-packager)와 [electron-builder](https://github.com/electron-userland/electron-builder)를 모두 지원합니다.
생산 준비 애플리케이션을 제작하고 배포 할 수 있습니다.
두 가지 빌드 도구는 놀라운 [@electronic-userland](https://github.com/electron-userland) 커뮤니티에 의해 뒷받침되며 각각에는 자세한 문서가 있습니다. `vue-cli` 뼈대 구축 중에 어떤 빌더를 사용할지 묻습니다.

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

일렉트론 애플리케이션을 처음 사용하거나 간단한 실행 파일 만 만들 필요가 있다면 `electron-packager`가 당신의 필요에 완벽합니다.

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

전체 인스톨러, 자동 업데이트 지원, Travis CI 및 AppVeyor를 이용한 CI 구축, 또는 네이티브 노드 모듈 재구성 자동화를 원한다면 `electron-builder` 가 필요합니다.
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)
42 changes: 42 additions & 0 deletions docs/ko/debugging-production.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# 디버깅

### 메인 프로세스

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

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

### 프로덕션 빌드

###### Notice

프로덕션 환경에서 응용 프로그램을 디버그하는 것이 가능할 수도 있지만 개발 중에 발견 된 것과 비교하여 프로덕션 코드가 축소되어 읽을 수 없게됩니다.

##### `renderer` 프로세스

현재 개발중인 것보다 큰 차이점이 없습니다. [BrowserWindow APIs](https://electron.atom.io/docs/api/web-contents/#contentsopendevtoolsoptions)를 사용하여 개발자 도구를 간단하게 호출 할 수 있습니다. 초기 전자 - vue 셋업을 사용하여`src / main / index.js` 안에`new BrowserWindow` 구조 바로 뒤에 다음 코드 스 니펫을 추가하여 개발 도구를 실행시 강제로 열 수 있습니다.

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

##### `main` 프로세스

위에서 언급 한 것과 비슷하게 외부 디버거를`main` 프로세스에 연결하여 애플리케이션을 원격 디버깅 할 수도 있습니다.
프로덕션 환경에서 디버거를 활성화하려면 `src/main/index.js`에서 `app` 가져 오기 다음에 추적 스니펫을 추가하면됩니다. 그런 다음 Chrome을 탐색하여 `chrome://inspect`하고 연결할 수 있습니다.

```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 @@
# 개발

### 개발 설정 시작

`yarn` 이나 `npm install`로 npm 의존성을 설치했다면, 이후에 실행 ...

```bash
yarn run dev # 혹은 npm run dev
```

...그리고 붐! You now have a running electron-vue app.
![](../images/landing-page.jpg)

This boilerplate comes with a few landing-page components that are easily removable.

52 changes: 52 additions & 0 deletions docs/ko/end-to-end_testing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# 엔드 - 투 - 엔드 테스트

electron-vue는 [Spectron](http://electron.atom.io/spectron/)과 [Mocha](https://mochajs.org/)\([Chai](http://chaijs.com/)와 함께)엔드 - 투 - 엔드 테스트 프레임 워크를 사용합니다.
Mocha & Chai API는 `expect`,`should` 및`assert`를 포함하여 전 세계적으로 사용 가능합니다.

### 테스트 실행

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

##### Note

종단 간 테스트를 실행하기 전에 `npm run pack`을 호출하여 Spectron이 테스트 중에 소비 할 수있는 생산 빌드를 만듭니다.

### 파일 구조

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

**대부분의 경우 **`index.js`**를 무시하고 **`specs/`**작성에만 집중할 수 있습니다.**

#### `specs/`

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

이 디렉토리 안에는 실제 테스트가 작성되는 곳이 있습니다. `babel-register`의 힘으로 ES2015를 완벽하게 이용할 수 있습니다.

#### `index.js`

이 파일은 모카 (Mocha)의 주요 입력 항목으로 작동하며 테스트를 위해`specs /`로 작성된 모든 테스트를 수집합니다.

#### `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.

여기에 `specs/`에서 사용할 수있는 일반적인 함수가 있습니다. 기본 함수는 일렉트론 생성/파괴 프로세스를 처리하는`beforeEach`와`afterEach`를 포함합니다.

### Spectron 의 주제

Spectron은 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/)와 [WebDriverIO](http://webdriver.io/)를 모두 사용해 DOM 요소를 조작 하는 [electron](http://electron.atom.io)의 공식 테스트 프레임 워크입니다.

#### WebDriverIO 사용하기

Spectron [documentation](https://github.com/electron/spectron#client)에 명시된 바와 같이 [WebDriverIO API](http://webdriver.io/api.html)에 액세스하려면 `this.app.client`를 통해 액세스 할 수 있습니다. 단일 일렉트론-vue는 Mocha를 사용하기 때문에 `this`의 문맥은 `afterEach`,`beforeEach`,`it`에서 공유됩니다. 이 때문에 ES2015 화살표 함수는 `this`의 컨텍스트가 덮어 쓰여지므로 특정 상황에서 사용할 수 없다는 것을 알아 두는 것이 중요합니다. ([more info](https://mochajs.org/#arrow-functions) \).
57 changes: 57 additions & 0 deletions docs/ko/entry_indexhtml.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# `index.html` 등재

electron-vue는 프로덕션 빌드에서`index.html`을 만들기 위해 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin)을 사용합니다.
개발 중에`src/`디렉토리에`index.ejs`가 있습니다. 여기에서 입력 HTML 파일을 변경할 수 있습니다.

If you are unfamiliar with how this plugin works, then I'd encourage you take a look at its [documentation](https://www.npmjs.com/package/html-webpack-plugin). But in short, this plugin will automatically inject production assets including `renderer.js` and `styles.css` into a final minified `index.html`.

이 플러그인이 어떻게 작동하는지 익숙하지 않다면 [documentation](https://www.npmjs.com/package/html-webpack-plugin)을 살펴 보시기 바랍니다.
간단히 말해서,이 플러그인은`renderer.js`와`styles.css`를 포함한 프로덕션 자산을 최종 축소 된`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` 재품 중 \(미-압축\)

```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>
```

### CDN 사용에 관한 주제

CDN에서 제공된 자산을 사용하면 얻을 수있는 이점은 응용 프로그램의 최종 빌드 크기에 매우 유용 할 수 있지만, 이를 사용하지 않는 것이 좋습니다.
주된 이유는 응용 프로그램이 인터넷에 항상 액세스 할 수 있다고 가정하고 있기 때문입니다.
일렉트론 응용 프로그램의 경우는 항상 그렇지 않습니다.
부트 스트랩과 같은 CSS 프레임 워크에서는 인터넷 연결이 없다면 앱이 빠르게 엉성한 스타일이되어 버리기 때문에 이것이 중요한 문제가됩니다.

> "I don't care, I still want to use a CDN"

If you are determined to still use a CDN, then you can still do so by adding the tags to your `src/index.ejs` file. Just make sure to set up proper UI/UX flows for when you app is offline.

여전히 CDN을 사용하기로 결정했다면,`src/index.ejs` 파일에 태그를 추가하여 여전히 그렇게 할 수 있습니다.
앱이 오프라인 일 때 적절한 UI / UX 플로우를 설정하십시오.
Loading