diff --git a/docs/ko/README.md b/docs/ko/README.md new file mode 100644 index 00000000..8cd29528 --- /dev/null +++ b/docs/ko/README.md @@ -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. diff --git a/docs/ko/SUMMARY.md b/docs/ko/SUMMARY.md new file mode 100644 index 00000000..08cd83ad --- /dev/null +++ b/docs/ko/SUMMARY.md @@ -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) + diff --git a/docs/ko/book.json b/docs/ko/book.json new file mode 100644 index 00000000..479629b7 --- /dev/null +++ b/docs/ko/book.json @@ -0,0 +1,3 @@ +{ + "root": "" +} diff --git a/docs/ko/building_your_app.md b/docs/ko/building_your_app.md new file mode 100644 index 00000000..20d9701f --- /dev/null +++ b/docs/ko/building_your_app.md @@ -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` 가 필요합니다. diff --git a/docs/ko/contributing.md b/docs/ko/contributing.md new file mode 100644 index 00000000..d8b839af --- /dev/null +++ b/docs/ko/contributing.md @@ -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) \ No newline at end of file diff --git a/docs/ko/debugging-production.md b/docs/ko/debugging-production.md new file mode 100644 index 00000000..338214d9 --- /dev/null +++ b/docs/ko/debugging-production.md @@ -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') +``` + + + diff --git a/docs/ko/development.md b/docs/ko/development.md new file mode 100644 index 00000000..e86fdb4d --- /dev/null +++ b/docs/ko/development.md @@ -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. + diff --git a/docs/ko/end-to-end_testing.md b/docs/ko/end-to-end_testing.md new file mode 100644 index 00000000..4693bfd3 --- /dev/null +++ b/docs/ko/end-to-end_testing.md @@ -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) \). \ No newline at end of file diff --git a/docs/ko/entry_indexhtml.md b/docs/ko/entry_indexhtml.md new file mode 100644 index 00000000..cadd7b77 --- /dev/null +++ b/docs/ko/entry_indexhtml.md @@ -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 + + + + + <%= htmlWebpackPlugin.options.title %> + <%= ... %> + + +
+ + + +``` + +### `index.html` 재품 중 \(미-압축\) + +```html + + + + + app + + + +
+ + + +``` + +### 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 플로우를 설정하십시오. \ No newline at end of file diff --git a/docs/ko/faqs.md b/docs/ko/faqs.md new file mode 100644 index 00000000..ae359957 --- /dev/null +++ b/docs/ko/faqs.md @@ -0,0 +1,55 @@ +# FAQs + +* [`npm run dev`를 실행 한 후 왜 일렉트론 애플리케이션이 비어 있습니까?](#why-is-my-electron-app-blank-after-running-npm-run-dev) +* [일렉트론 응용 프로그램에서 파일 탐색기가 나타나는 이유는 무엇입니까?](#why-does-my-electron-app-show-a-file-explorer) +* [`vue-devtools`/`devtron`이 누락 된 이유는 무엇입니까?](#why-is-vue-devtoolsdevtron-missing) +* [정적 자산은 어디에 두어야합니까?](#where-do-i-put-static-assets) +* [`npm run lint`가 오류로 끝나는 이유는 무엇입니까?](#why-did-npm-run-lint-end-with-an-error) +* [웹 브라우저에서 내 앱을로드 할 수없는 이유는 무엇입니까?](#why-cant-i-load-my-app-in-a-web-browser) +* [`jquery`를 어떻게 가져 옵니까?](#how-do-import-jquery) +* [`main` 프로세스를 어떻게 디버그 할 수 있습니까?](#how-can-i-debug-the-main-process) + +--- + +## `npm run dev`를 실행 한 후 왜 일렉트론 애플리케이션이 비어 있습니까? + +#### TL;DR + +`webpack-dev-server`를 조작 할 수있는 개인 **프록시** 설정이 없는지 확인하십시오. + +## 일렉트론 응용 프로그램에서 파일 탐색기가 나타나는 이유는 무엇입니까? + +#### TL;DR + +`src/renderer`에 오류\(s\)가 있습니다. 콘솔을 점검하고, 오류를 수정 한 다음,`Command Or Control+R`을 사용하여 일렉트론을 새로 고칩니다. + +##### Long answer + +오류\(s\)가 `src/renderer`에 존재하면, 이것은 처음 실행될 때 ESLint와 충돌을 일으킵니다. 차례로 `HtmlWebpackPlugin`이 `index.html`을 만들지 못하게하는 INVALID 웹팩`renderer.js`가 생성됩니다. `webpack-dev-server`는`index.html` 서비스를받을 준비가되어 있지 않기 때문에 서버는 파일 탐색기로 돌아갑니다. + +## `vue-devtools`/`devtron`이 누락 된 이유는 무엇입니까? + +처음 시작할 때 개발자 도구 패널을 닫았다가 다시 열어야합니다. 또한 터미널 검사에서 설치 중에 발생할 수있는 오류 메시지가 있는지 확인하십시오. + +## 정적 자산은 어디에 두어야합니까? + +[**Using Static Assets**](/using-static-assets.md) + +## `npm run lint`가 오류로 끝나는 이유는 무엇입니까? + +eslint의 기본 속성은 linting 에러를 콘솔에 출력하는 것이며, 발견 된 경우 스크립트는 0이 아닌 exit \(npm 에러를 생성합니다\)로 끝납니다. 이것은 정상적인 동작입니다. + +## 웹 브라우저에서 내 앱을로드 할 수없는 이유는 무엇입니까? + +[\#195](https://github.com/SimulatedGREG/electron-vue/issues/195) + +## `jquery`를 어떻게 가져 옵니까? + +`부트 스트랩 (bootstrap)`을 사용하고 싶다면, 바로 거기에서 멈춰야 할 것입니다. 동일한 환경에서`vue`와`jquery`를 모두 사용하는 것은 나쁜 습관이고 두 프레임 워크가 서로 충돌하게됩니다. 자바 스크립트 기능을 위해`vue`를 사용하는`부트 스트랩 (bootstrap)` 대안을 사용하는 것이 좋습니다. 몇 가지 권장 사항은 [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue)와 [`vue-strap`] (https://github.com/yuche/vue-strap) . 어떤 이유로 든`jquery`를 사용해야 만합니다.`ProvidePlugin`에 관한`webpack`의 문서에서 지침을 찾거나 [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192)를 참조하십시오. . + +## `main` 프로세스를 어떻게 디버그 할 수 있습니까? + +`electron @ ^ 1.7.2`을 사용하는 경우 Chrome을 열고 `chrome://inspect`로 이동 한 다음 응용 프로그램이 개발 모드에서 실행되는 동안 원격 일렉트론 프로세스를 열 수 있습니다. + +[Electron Documentation](https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md) + diff --git a/docs/ko/file-tree.md b/docs/ko/file-tree.md new file mode 100644 index 00000000..dc4a6bea --- /dev/null +++ b/docs/ko/file-tree.md @@ -0,0 +1,66 @@ +# 파일 나무 + +### 개발 도중 + +**Note**: 몇몇 파일 폴더는 `vue-cli` 스캐폴딩(뼈대구축) 때 선택한 설정에 근거한 기초와 다를 수 있다. + +``` +my-project +├─ .electron-vue +│ └─ .js files +├─ build +│ └─ icons/ +├─ dist +│ ├─ electron/ +│ └─ web/ +├─ node_modules/ +├─ src +│ ├─ main +│ │ ├─ index.dev.js +│ │ └─ index.js +│ ├─ renderer +│ │ ├─ components/ +│ │ ├─ router/ +│ │ ├─ store/ +│ │ ├─ App.vue +│ │ └─ main.js +│ └─ index.ejs +├─ static/ +├─ test +│ ├─ e2e +│ │ ├─ specs/ +│ │ ├─ index.js +│ │ └─ utils.js +│ ├─ unit +│ │ ├─ specs/ +│ │ ├─ index.js +│ │ └─ karma.config.js +│ └─ .eslintrc +├─ .babelrc +├─ .eslintignore +├─ .eslintrc.js +├─ .gitignore +├─ package.json +└─ README.md +``` + +#### 제품 구축 + +``` +app.asar +├─ dist +│ └─ electron +│ ├─ static/ +│ ├─ index.html +│ ├─ main.js +│ └─ renderer.js +├─ node_modules/ +└─ package.json +``` + +As you can probably tell, almost everything is stripped down in final production builds. This is almost mandatory when distributing electron apps, as you do not want your users to download bloated software with a large file size. + + + + + diff --git a/docs/ko/getting_started.md b/docs/ko/getting_started.md new file mode 100644 index 00000000..9f1a9004 --- /dev/null +++ b/docs/ko/getting_started.md @@ -0,0 +1,31 @@ +# Getting Started + +## Scaffolding + +This boilerplate was built as a template for [vue-cli](https://github.com/vuejs/vue-cli) and includes options to customize your final scaffolded application. 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 +``` + +#### On the subject of electron + +Although optional, it is recommended to lock in your electron version after scaffolding your project. This helps prevent other developers working on the same project from developing on a different version. Electron makes releases quite often so features are always subject to change. [More Info](http://electron.atom.io/docs/tutorial/electron-versioning/). + +#### A note for Windows Users + +If you run into errors during `npm install` about `node-gyp`, then you most likely do not have the proper build tools installed on your system. Build tools include items like Python and Visual Studio. Thanks to [@felixrieseberg](https://github.com/felixrieseberg), there are a few packages to help simplify this process. + +The first item we need to check is our npm version and ensure that it is not outdated. This can is accomplished using [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade). If you are using `yarn`, then you can skip this check. + +Once that is complete, we can then continue to setup the needed build tools. Using [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools), most of the dirty work is done for us. Installing this globally will in turn setup Visual C++ packages, Python, and more. + +At this point things should successfully install, but if not then you will need a clean installation of Visual Studio. Please note that these are not direct problems with electron-vue itself \(Windows can be difficult sometimes ¯\\\_\(ツ\)\_/¯\). + diff --git a/docs/ko/global_configuration.md b/docs/ko/global_configuration.md new file mode 100644 index 00000000..d3ec57a6 --- /dev/null +++ b/docs/ko/global_configuration.md @@ -0,0 +1,35 @@ +# Global Configuration + +electron-vue uses the [webpack](https://github.com/webpack/webpack) module loader system for pre-processing, bundling, and building your app. The default settings are rather common and should meet most of your needs. An additional `config.js` is provided in the root directory for quick adjustments. Further customization can be made by directly adjusting `webpack.main.config.js` and `webpack.renderer.config.js`. + +#### `config.js` +**Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. + +```js +{ + // Name of electron app + // Will be used in production builds + name: 'app', + + // Use ESLint + // Further changes can be made in `.eslintrc.js` + eslint: true, + + // webpack-dev-server port + port: 9080, + + // electron-packager options + // See `Building you app` for more info + building: { + arch: 'x64', + asar: true, + dir: path.join(__dirname, 'app'), + icon: path.join(__dirname, 'app/icons/icon'), + ignore: /\b(src|index\.ejs|icons)\b/, + name: pkg.name, + out: path.join(__dirname, 'builds'), + overwrite: true, + platform: process.env.PLATFORM_TARGET || 'all' + } +} +``` diff --git a/docs/ko/main-process.md b/docs/ko/main-process.md new file mode 100644 index 00000000..ae61a8b7 --- /dev/null +++ b/docs/ko/main-process.md @@ -0,0 +1,39 @@ +# 주 처리 + +> In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. + +**From the** [**Electron Documentation**](http://electron.atom.io/docs/tutorial/quick-start/#main-process) + +--- + +Since the `main` process is essentially a full node environment, there is no initial project structure other than two files. + +#### `src/main/index.js` + +이 파일은 어플리케이션의 주 파일이며, `electron` 이 부팅되는 파일이기도 하다. 또한 모든 제품에 대한 `webpack`'의 등재 파일로 사용된다. 모든 `main` 처리는 여기에서 시작 되어야 한다. + +#### `app/src/main/index.dev.js` + +이 파일은 개발 시 `electron-debug` & `vue-devtools` 를 설치하는데만 사용된다. 이 파일을 수정할 필요가 전혀 없지만, 개발환경 요구사항을 확장하기 위해서 사용될 수 있다. + +## `__dirname` & `__filename` 를 사용하는데 관한 주제 + +`main` 프로세스가 `webpack` 을 사용해 번들되기 때문에, `__dirname` 과 `__filename` 사용은 제품환경에서 기대 값을 제공하지 **않을 것이다.** Referring to the [**File Tree**](/file-tree.md), 당신은 제품환경에서 `main.js` 가 `dist/electron` 폴더 내부에 위치하게 된다는 것을 알게 될 거다. Based on this knowledge, use `__dirname` & `__filename` accordingly. + +**If you are in need of a path to your `static/` assets directory, make sure to read up on **[**Using Static Assets**](/using-static-assets.md)** to learn about the super handy `__static` variable.** +**만약 `static/` 에셋 디렉토리로 향하는 경로가 필요하다면, 무지 편리한 `__static` 변수에 관해 배우기 위해 **[**Using Static Assets**](/using-static-assets.md)** 를 읽어봐라** + +``` +app.asar +├─ dist +│ └─ electron +│ ├─ static/ +│ ├─ index.html +│ ├─ main.js +│ └─ renderer.js +├─ node_modules/ +└─ package.json +``` + + + diff --git a/docs/ko/meta.md b/docs/ko/meta.md new file mode 100644 index 00000000..b4019c8f --- /dev/null +++ b/docs/ko/meta.md @@ -0,0 +1,12 @@ +# Meta + +### Thank You + +Wow, thank you guys so much for helping make electron-vue one of the top 3`vue-cli`templates \(that I can find\) on GitHub. I never thought this project would ever take off like it has today. Thinking back, I originally made this boilerplate \(in **May 2016**\) for a personal closed sourced project and decided to open source \(the boilerplate itself\) when I knew I had a majority of the pieces together. Fast-forward to today and there have been so many new features implemented and amazing support from the community. I also want to give a special shoutout to those in the community helping answer issues when I'm not able to. You guys have absolutely no obligation to do anything but you do anyway, and I am grateful for that. + +If you are reading this, then I can almost assume you really do enjoy electron-vue. A lot of time was spent creating this boilerplate. If you are feeling generous, then feel free to leave a tip if you want. Surely future development of electron-vue is not dependent upon donations, but its always an option if you decide to use it. + +#### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) + + + diff --git a/docs/ko/migration-guide.md b/docs/ko/migration-guide.md new file mode 100644 index 00000000..56ca924e --- /dev/null +++ b/docs/ko/migration-guide.md @@ -0,0 +1,13 @@ +# Migration Guide + +The following documentation attempts to explain how migrating your project _should_ be accomplished, but may not be a full proof method as overall project structure is always up for change. + +1. Scaffold a fresh version of electron-vue using `vue init simulatedgreg/electron-vue my-project` +2. Copy over current project `src` files into the new scaffold's `src` directory +3. Copy over `package.json` dependencies from current project to the new scaffold's `package.json` +4. Install dependencies with `yarn` or `npm install` +5. Run project in development mode \(`yarn run dev` or `npm run dev`\) +6. Watch console for errors to fix + +Just as previously mentioned above, there isn't a full proof method for migrating to a new scaffold, but these are typically going to be the major steps to get you nearly all the way there. Any personal modifications to project structure or handling of assets will be up to you or your team to migrate. Make sure to check out the rest of the documentation as it will always reflect the current version of electron-vue from the `master` branch. + diff --git a/docs/ko/miscellaneous.md b/docs/ko/miscellaneous.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/ko/new-releases.md b/docs/ko/new-releases.md new file mode 100644 index 00000000..241c3239 --- /dev/null +++ b/docs/ko/new-releases.md @@ -0,0 +1,28 @@ +# New Releases + +electron-vue has evolved greatly since its initial creation in May of 2016 and has introduced many new fantastic features. Can you believe there was a time `vue-cli` scaffolding wasn't supported? Development of new features is not planned to end anytime soon. The only down side to new bells & whistles every now and then is having your project stuck on an older scaffold. Since electron-vue takes advantage of `vue-cli` there unfortunately isn't a structured way to _version_ the boilerplate or make it _updatable_. + +Major updates of electron-vue will be made through GitHub Milestones and will include many new features/bug fixes at a time, making these releases the optimal time to [migrate](/migration-guide.md) any existing projects to a newer scaffold. These milestones are not usually planned, but arise as feature requests add up in the issue tracker. + +### Past Milestones + +#### [Multiplex](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) + +* Migration to `webpack` 2 +* Support for `electron-builder` +* Support for `main` process bundling +* General bugfixing + +#### [Minimize](https://github.com/SimulatedGREG/electron-vue/issues/171) + +* Migration to single `package.json` structure +* Travis CI / AppVeyor configs for `electron-builder` users +* Minimal web output of `renderer` process +* Migration to `axios` +* Full support for `main` process bundling +* Rewrite of development and build scripts +* Migration to `babili` to remove the need of transpiling down completely to ES5 +* Support for `static/` assets when using modules that require a full path \([`__static`](/using-static-assets.md)\) + + + diff --git a/docs/ko/npm_scripts.md b/docs/ko/npm_scripts.md new file mode 100644 index 00000000..5c5ae22b --- /dev/null +++ b/docs/ko/npm_scripts.md @@ -0,0 +1,47 @@ +# NPM 스크립트 + +개발 프로세스와 관련된 중복 작업을 제거하려면 사용 가능한 NPM 스크립트 중 일부를 기록해 두십시오. 다음 명령은 프로젝트의 루트 디렉토리에서 실행해야합니다. 물론 `yarn run `를 사용하여 아래 명령 중 하나를 실행할 수 있습니다. + +### `npm run build` + +프로덕션 및 패키지 용으로 앱을 빌드하십시오. 더 많은 정보는 [**Building Your App**](building_your_app.md) 섹션에서 찾을 수 있습니다. + +### `npm run dev` + +개발중인 앱을 실행합니다. + +### `npm run lint` + +Lint all your `src/`'s and `test/`'s JS & Vue component files. + +모든 `src/` 와 `test/`의 JS & Vue 컴포넌트 파일을 문법체크합니다. + +### `npm run lint:fix` + +모든 `src/` 와 `test/`의 JS & Vue 컴포넌트 파일을 문법체크하고 이슈 해결을 시도합니다. + +### `npm run pack` + +`npm run pack : main` 과 `npm run pack : renderer`을 모두 실행하십시오. 이러한 명령을 사용할 수 있지만 `npm run build`가 이 단계를 처리 할 때 수동으로 수행해야하는 경우는 많지 않습니다. + +### `npm run pack:main` + +webpack을 실행하여 `main` 프로세스 소스 코드를 묶습니다. + +### `npm run pack:renderer` + +`renderer` 프로세스 소스 코드를 묶기 위해 webpack을 실행하십시오. + +### `npm run unit` + +카르마 + 재스민으로 유닛 테스트를 실행하십시오. [**Unit Testing**](unittesting.md)에 대한 추가 정보. + +### `npm run e2e` + +Spectron + Mocha로 엔드 투 엔드 테스트를 실행하십시오. [**엔드 - 투 - 엔드 테스팅**](end-to-end_testing.md)에 대한 추가 정보. + +### `npm test` + +Runs both `npm run unit` & `npm run e2e`. More information on [**Testing**](testing.md). + +`npm run unit` 과 `npm run e2e`를 모두 실행합니다. [**Testing**](testing.md)에 대한 추가 정보. diff --git a/docs/ko/project_structure.md b/docs/ko/project_structure.md new file mode 100644 index 00000000..310fb4dd --- /dev/null +++ b/docs/ko/project_structure.md @@ -0,0 +1,23 @@ +# 프로젝트 구조 + +When it comes to making electron apps, project structure is a little different. If you have used the official [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) setup before, then the structure should feel quite familiar. The documentation in this section attempts to explain a general overview of how the boilerplate works and the differences when your application is built. + +### 단일 `package.json` 설정 + +There was a time not too long ago where a two `package.json` setup was neccessary, but thanks to efforts from [@electron-userland](https://github.com/electron-userland), both [`electron-packager`](https://github.com/electron-userland/electron-packager) and [`electron-builder`](https://github.com/electron-userland/electron-builder) now fully support a single `package.json` setup. + +#### `dependencies` 의존성 + +These dependencies **will** be included in your final production app. So if your application needs a certain module to function, then install it here! + +#### `devDependencies` 개발의존성 + +These dependencies **will not** be included in your final production app. Here you can install modules needed specifically for development like build scripts, `webpack` loaders, etc. + +#### Native NPM 모듈 설치 + +We need to make sure our native npm modules are built against electron. To do that, we can use [`electron-rebuild`](https://github.com/electron/electron-rebuild), but to make things simpler, it is highly recommended to use [`electron-builder`](https://github.com/electron-userland/electron-builder) for your build tool as a lot of these tasks are handled for you. + +### On the subject of the `main` process + +During development you may notice `src/main/index.dev.js`. This file is used specifically for development and is used to install dev-tools. This file should not have to be modified, but can be used to extend your development needs. Upon building, `webpack` will step in and create a bundle with `src/main/index.js` as its entry file. diff --git a/docs/ko/renderer-process.md b/docs/ko/renderer-process.md new file mode 100644 index 00000000..1f9f788c --- /dev/null +++ b/docs/ko/renderer-process.md @@ -0,0 +1,53 @@ +# 렌더러 처리 + +> Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. +> +> In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions. + +**From the **[**Electron Documentation**](http://electron.atom.io/docs/tutorial/quick-start/#renderer-process) + +--- + +## `vue` 와 `vuex` 관련 주제 + +### vue 컴포넌트 + +If you are unfamiliar with Vue components, please give [this](http://vuejs.org/v2/guide/single-file-components.html) a read. Using components gives our large complex applications more organization. Each component has the ability to encapsulate its own CSS, template, and JavaScript functionality. + +컴포넌트는 `src/renderer/components`에 저장된다.. When creating child components, a common organization practice is to place them inside a new folder with the name of its parent component. This is especially useful when coordinating different routes. + +``` +src/renderer/components +├─ 부모컴포넌트A +│ ├─ 자식컴포넌트A.vue +│ └─ 자식컴포넌트B.vue +└─ 부모컴포넌트A.vue +``` + +### vue 라우트 + +For more information about `vue-router` click [here](https://github.com/vuejs/vue-router). In short, it is encouraged to use `vue-router` as creating a Single Page Application is much more practical when making Electron applications. Do you really want to manage a bunch of BrowserWindows and then communicating information between everything? Probably not. + +라우트는 `src/renderer/router/index.js` 에 있고 다음처럼 정의된다.. + +```js +{ + path: '<라우트경로>', + name: '<라우트이름>', + component: require('@/components/<라우트이름>View') +} +``` + +... `` 과 `` 는 변수다. These routes are then attached to the component tree using the `` directive in `src/renderer/App.vue`. + +##### Notice + +`vue-router`를 쓸 때는, [**HTML5 History Mode**](http://router.vuejs.org/en/essentials/history-mode.html)를 사용하지 마라. This mode is strictly meant for serving files over the `http` protocol and does not work properly with the `file` protocol that Electron serves files with in production builds. The default `hash` mode is just what we need. + +### vuex 모듈 + +Describing `vuex` is not the easiest thing to do, so please read [this](http://vuex.vuejs.org/en/intro.html) for a better understanding of what problem it tries to solve and how it works. + +electron-vue takes advantage of `vuex`'s module structure to create multiple data stores, which are saved in `src/renderer/store/modules`. + +Having multiple data stores can be great for organization, but it can also be annoying to have to import each and every one. But don't fret, as `src/renderer/store/modules/index.js` does the dirty work for us! This little script lets `src/renderer/store/index.js` import all of our modules in a one-shot manner. If all that didn't make sense, just know you can easily duplicate the given `Counter.js` module and it will be loaded in "magically". diff --git a/docs/ko/savingreading-local-files.md b/docs/ko/savingreading-local-files.md new file mode 100644 index 00000000..9b1da11b --- /dev/null +++ b/docs/ko/savingreading-local-files.md @@ -0,0 +1,43 @@ +# 로컬 파일 읽고 쓰기 + +`electron`을 사용하면 얻을 수있는 장점 중 하나는 사용자의 파일 시스템에 액세스 할 수 있다는 것입니다. 이렇게하면 로컬 시스템에서 파일을 읽고 쓸 수 있습니다. Chromium 제한을 피하고 애플리케이션의 내부 파일에 글을 쓰려면 `electron`의 API, 특히 [`app.getPath(name)`](https://electron.atom.io/docs)를 사용해야합니다. / api / app / # appgetpathname) 함수를 호출합니다. 이 도우미 메소드는 사용자의 데스크탑, 시스템 임시 파일 등과 같은 시스템 디렉토리에 대한 파일 경로를 가져올 수 있습니다. + +### 사용 예 + + + +애플리케이션 용 로컬 데이터베이스 저장소를 갖기를 원한다고 가정 해 봅시다. 이 예제에서 우리는 [`nedb`](https://github.com/louischatriot/nedb)를 가지고 설명 할 것입니다. + +```bash +yarn add nedb # or npm install nedb --save +``` + +**src/renderer/datastore.js** + +여기서 우리는 NeDB를 설정하고 그것을 `userData` 디렉토리로 향하게합니다. 이 공간은 응용 프로그램 용으로 특별히 예약되어 있으므로 다른 프로그램이나 다른 사용자 상호 작용이이 파일 공간을 변경해서는 안된다는 확신을 가질 수 있습니다. 여기서 우리는`renderer` 프로세스에서 `datastore.js`를 가져 와서 그것을 소비 할 수 있습니다. + +```js +import Datastore from 'nedb' +import path from 'path' +import { remote } from 'electron' + +export default new Datastore({ + autoload: true, + filename: path.join(remote.app.getPath('userData'), '/data.db') +}) +``` + +**src/renderer/main.js** + +이 단계를 더 진행하기 위해 데이터 저장소를 `src/renderer/main.js`로 가져 와서 Vue 프로토 타입에 첨부 할 수 있습니다. 이렇게하면 모든 구성 요소 파일에서`this.$db`를 사용하여 데이터 저장소 API에 액세스 할 수있게되었습니다. + +```js +import db from './datastore' + +/* Other Code */ + +Vue.prototype.$db = db +``` + + + diff --git a/docs/ko/testing.md b/docs/ko/testing.md new file mode 100644 index 00000000..5aafdb81 --- /dev/null +++ b/docs/ko/testing.md @@ -0,0 +1,33 @@ +# 테스트하기 + +electron-vue supports both unit testing and end-to-end testing for the `renderer` process and is heavily inspired by the testing setup provided with the official `vuejs-templates/webpack` boilerplate. During `vue-cli` scaffolding you will have the option to include testing support. + +electron-vue는 유닛 테스트와 렌더러 프로세스를위한 엔드 투 엔드 테스트를 모두 지원하며 공식`vuejs-templates / webpack` 보일러 플레이트에서 제공되는 테스트 설정에 크게 영향을받습니다. `vue-cli` 스캐 폴딩 중에 테스트 지원을 포함 할 수 있습니다. + +## [Unit testing](unittesting.md) + +Karma + Mocha로 유닛 테스트 실행 + +```bash +npm run unit +``` + +## [End-to-end testing](end-to-end_testing.md) + +Spectron + Mocha로 엔드 투 엔드 테스트 실행 + +```bash +npm run e2e +``` + +## 모든 테스트 실행 + +```bash +npm test +``` + +### CI 테스트 주제 + +If your decided to use `electron-builder` as your build tool when scaffolding, then you can easily test your application on both Travis CI & AppVeyor for `darwin`, `linux`, and `win32`. Inside both `.travis.yml` and `appveyor.yml` you will find commented sections you can quickly un-comment to enable testing. Make sure to read up on [**Automated Deployments using CI**](/using-electron-builder.md#automated-deployments-using-ci)** **for further information. + +스캐 폴딩 할 때 빌드 툴로`electron-builder`를 사용하기로 결정했다면,`darwin`,`linux`,`win32`의 Travis CI와 AppVeyor에서 어플리케이션을 쉽게 테스트 할 수 있습니다. `.travis.yml`과`appveyor.yml` 둘 다 안에 주석 처리 된 섹션을 찾을 수 있습니다. 자세한 내용은 [**CI**를 사용하는 자동 배포](/using-electron-builder.md#automated-deployments-using-ci)를 참조하십시오. \ No newline at end of file diff --git a/docs/ko/unittesting.md b/docs/ko/unittesting.md new file mode 100644 index 00000000..a9a79b53 --- /dev/null +++ b/docs/ko/unittesting.md @@ -0,0 +1,43 @@ +# 단위 테스트 + +electron-vue는 [Karma](https://karma-runner.github.io/1.0/index.html) 테스트 러너와 [Mocha](https://mochajs.org/) 테스트 프레임 워크 \( 단위 테스트를 위해 [Chai](http://chaijs.com/) \)와 함께. + +Mocha와 Chai는 각각`karma-mocha`와`karma-chai`를 사용하여 통합되어 있으므로`expect`와 같은 모든 API는 테스트 파일에서 전 세계적으로 사용 가능합니다. + +### 테스트 실행 + +```bash +# Begin Karma +npm run unit +``` + +### 파일 구조 + +``` +my-project +├─ test +| ├─ unit +│ │ ├─ specs/ +│ │ ├─ index.js +└─ └─ └─ karma.conf.js +``` + +**대부분의 경우 **`index.js`**와 **`karma.conf.js`**를 무시하고 **`specs/`** 작성에만 집중할 수 있습니다.** + +#### `specs/` + +이 디렉토리 안에는 실제 테스트가 작성되는 곳이 있습니다. webpack의 힘으로 ES2015 및 지원되는 로더에 대한 모든 액세스 권한을 갖게됩니다. + +#### `index.js` + +이것은`karma-webpack`에 의해 사용되는 엔트리 파일입니다. 이 파일의 목적은 모든 테스트 및 소스 코드를 "한 번에"수집하는 것입니다. + +#### `karma.conf.js` + +여기서 스펙/커버리지 리포터와 함께 설정 한 실제 `karma` 설정을 찾을 수 있습니다. [karma 공식 문서](http://karma-runner.github.io/1.0/config/configuration-file.html)에 따라 추가로 사용자 정의 할 수 있습니다. + + +### Mocking 의존성 + +electron-vue는 기본적으로 [`inject-loader`](https://github.com/plasticine/inject-loader)가 설치되어 있습니다. Vue 구성 요소 파일 사용법은 [mock으로 테스트 한 `vue-loader` 문서](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html)를 참조하십시오. + diff --git a/docs/ko/using-electron-builder.md b/docs/ko/using-electron-builder.md new file mode 100644 index 00000000..d6621440 --- /dev/null +++ b/docs/ko/using-electron-builder.md @@ -0,0 +1,98 @@ +# [`electron-builder`](https://github.com/electron-userland/electron-builder) 사용하기 + +`electron-builder`에 의해 생성 된 모든 빌드는`build` 디렉토리에서 찾을 수 있습니다. + +#### 구축 + +```bash +npm run build +``` + +#### 압축을 푼 디렉토리 만들기 + +전체 설치 프로그램없이 간단한 실행 파일을 생성하십시오. 빠른 테스트에 유용합니다. + +```bash +npm run build:dir +``` + +### 기본 건물 구성 + +`package.json`으로 더 설정할 수 있는 `electron-builders`의 옵션들을 [여기](https://github.com/electron-userland/electron-builder/wiki/Options)에 있습니다.. + +```js +"build": { + "productName": "ElectronVue", + "appId": "org.simulatedgreg.electron-vue", + "dmg": { + "contents": [ + { + "x": 410, + "y": 150, + "type": "link", + "path": "/Applications" + }, + { + "x": 130, + "y": 150, + "type": "file" + } + ] + }, + "directories": { + "output": "build" + }, + "files": [ + "dist/electron", + "node_modules/", + "package.json" + ], + "mac": { + "icon": "build/icons/icon.icns" + }, + "win": { + "icon": "build/icons/icon.ico" + }, + "linux": { + "icon": "build/icons" + } +} +``` + +## CI를 이용한 자동화 된 배치 + +When using electron-vue's `electron-builder` configuration, you are also provided a `appveyor.yml` and `.travis.yml` for automated deployments. Both config files are setup for building your electron application and pushing artifacts to a GitHub release, Bintray, etc. Travis CI is used to build both `linux` and `darwin` \(macOS\) while AppVeyor is used to build `win32`. Both services are free for OSS projects. + +electron-vue의 `electron-builder` 설정을 사용할 때 자동 배포를위한 `appveyor.yml` 과 `.travis.yml`도 제공됩니다. +두 설정 파일은 일렉트론 애플리케이션을 빌드하고 GitHub 릴리즈, Bintray 등으로 유물을 밀어 넣기 위해 설정됩니다. +Travis CI는 `linux`와`darwin(macOS)`를 빌드하는 데 사용되는 반면 AppVeyor는`win32` 를 빌드하는 데 사용됩니다.. +두 서비스 모두 OSS 프로젝트에서 무료입니다. + +#### Travis CI / AppVeyor 설정하기 + +1. [Travis CI](https://travis-ci.org/getting_started) / [AppVeyor](https://www.appveyor.com/)에서 계정을 만드십시오. +2. 귀하의 일렉트론-뷰 프로젝트가있는 GitHub 저장소를 링크하십시오 +3. [https://github.com/settings/tokens](https://github.com/settings/tokens)를 방문하여 **새 토큰 생성**을 누르십시오\ +(동일한 토큰을 Travis CI 및 AppVeyor 에도\). + 1. **토큰 설명**을 설정하십시오. + 2. **public\_repo** 범위를 확인하십시오. + 3. **토큰을 생성하십시오.** +4. 새 토큰을 복사하고 나중을 위해 저장하십시오. +5. Travis CI / AppVeyor에 저장소 설정을 열고 새로운 **환경 변수**를 추가하십시오. + 1. 변수 이름을 `GH_TOKEN`으로 설정하십시오 + 2. 변수의 값을 방금 작성한 GitHub 액세스 토큰으로 설정하십시오 + 3. 새 변수를 **저장**하고 암호화가 사용 가능한지 확인하십시오. + +이 시점에서 모든 것이 설정되어야합니다. Travis CI / AppVeyor는 기본적으로`master` 브랜치에 대한 푸시를 감시합니다. 푸시가 이루어지면 Travis CI / AppVeyor는 리포지토리를 서버에 복제하고 빌드 프로세스를 시작합니다. 최종 단계에서 전자 빌더는 환경 변수 GH_TOKEN을보고 릴리즈 초안을 만들고 공개 GitHub 저장소에 아티팩트를 업로드합니다. 이 시점부터 초안 릴리스를 편집 한 다음이를 전세계에 게시 할 수 있습니다. 릴리스를 발표 한 후,`package.json`을 업데이트하여 향후 릴리스가 새로운 버전 번호로 표시되도록하십시오. + +#### 자동 업데이트 + +Enabling your application to receive automatic updates is a super nice feature to have, but know that [**Code Signing**](https://github.com/electron-userland/electron-builder/wiki/Code-Signing) is required. +You can setup code signing by adding a few more environment variables based on what `electron-builder` needs described [here](https://www.electron.build/code-signing). Once you have your certificates setup, +you can then install `electron-updater` and comment out the chunk of code at the bottom of `src/main/index.js` to enable auto updating. + +응용 프로그램에서 자동 업데이트를 수신하도록 설정하는 것이 가장 좋은 기능이지만 [**코드 서명**](https://github.com/electron-userland/electron-builder/wiki/Code-Signing)은 필수. +`electronic builder`가 기술해야하는 [것](https://www.electron.build/code-igning)을 기반으로 몇 가지 환경 변수를 추가하여 코드 서명을 설정할 수 있습니다. +일단 인증서를 설정하면`electron-updater`를 설치하고 `src/main/index.js`의 하단에 코드 덩어리를 주석 처리하여 자동 업데이트를 가능하게 할 수 있습니다. + +대부분의 사람들과 같은 멋진 코드 서명 인증서가 없으면 GitHub API를 사용하여 새 릴리스를 확인할 수 있습니다. 새로운 릴리스가 발견되면 응용 프로그램 내에서 새 빌드를 다운로드하고 설치할 수있는 다운로드 페이지로 사용자를 안내하는 알림을 제공하십시오. `electron-builder`가 제공하는 놀라운 설치 프로그램 덕분에 사용자는 현재 버전을 제거 할 필요가 없으며 새 설치는 웹 저장소 또는 `userData` 파일을 계속 유지하면서 이전 버전을 대체합니다. \ No newline at end of file diff --git a/docs/ko/using-electron-packager.md b/docs/ko/using-electron-packager.md new file mode 100644 index 00000000..fdfa0aaf --- /dev/null +++ b/docs/ko/using-electron-packager.md @@ -0,0 +1,72 @@ +# [`electron-packager`](https://github.com/electron-userland/electron-packager) 사용하기 + +`electron-packager`에 의해 생성 된 모든 빌드는 `build` 폴더 내에 있습니다. + +#### 모든 플랫폼 구축 + +모든 운영 체제가 다른 모든 플랫폼 용으로 구축 할 수있는 것은 아닙니다. + +```bash +npm run build +``` + +#### 특정 플랫폼 용 빌딩 + +플랫폼에는 `darwin`,`mas`,`linux`,`win32`가 있습니다. + +```bash +# build for darwin (macOS) +npm run build:darwin +``` + +#### Cleaning + +`build`에서 모든 빌드를 삭제하십시오. + +```bash +npm run build:clean +``` + +### 비 Windows 사용자를위한 메모 + +비 Windows 플랫폼을 사용하여 **사용자 정의 아이콘**으로 **Window**를 구축하려면 [wine](https://www.winehq.org/)을 설치해야합니다. [More Info](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms). + +### 기본 구축 구성 + +`electronic-packager`'의 옵션에 따라`.electron-vue/build.config.js`에서 더 많은 맞춤 설정이 가능한 방법이 [여기](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options)에 있습니다. +빌드 된 어플리케이션에 적용된 이름은`package.json`에있는`productName` 값으로 설정됩니다. + +```js +{ + // Target 'x64' architecture + arch: 'x64', + + // Compress app using 'electron/asar' + asar: true, + + // Directory of the app + dir: path.join(__dirname, '../'), + + // Set electron app icon + // File extensions are added based on platform + // + // If building for Linux, please read + // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#icon + icon: path.join(__dirname, '../build/icons/icon'), + + // Ignore files that would bloat final build size + ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/, + + // 빌드된 결과물을 build 폴더에 넣는다. + out: path.join(__dirname, '../build'), + + // 기존 빌드를 덮어쓴다 + overwrite: true, + + // 플랫폼을 설정하는 환경변수 + platform: process.env.BUILD_TARGET || 'all' +} +``` + + + diff --git a/docs/ko/using-static-assets.md b/docs/ko/using-static-assets.md new file mode 100644 index 00000000..23f807e6 --- /dev/null +++ b/docs/ko/using-static-assets.md @@ -0,0 +1,59 @@ +# 정적 애셋 사용 + +If you have used the official `vuejs-templates/webpack` boilerplate before, then you should be familiar with the `static/` directory. It is here where you can place static assets that both the `main` and `renderer` process can consume. Using these assets within your Vue application is simple, but usage with `fs` and other modules that need a full path can be a little tricky. Thankfully, electron-vue provides a `__static` variable that yields the path to the `static/` directory in both development and production. + +이전에`vuejs-templates/webpack` 공식판을 사용했다면`static/`디렉토리에 익숙해야합니다. `main`과 `renderer` 프로세스가 모두 소비 할 수있는 정적 자산을 둘 수있는 곳입니다. Vue 응용 프로그램에서 이러한 자산을 사용하는 것은 간단하지만 `fs` 및 전체 경로가 필요한 다른 모듈을 사용하는 것은 약간 까다로울 수 있습니다. 감사하게도, electron-vue는 개발과 생산 모두에서 `static /` 디렉토리에 대한 경로를 생성하는 `__static` 변수를 제공합니다. + +### Vue 구성 요소에서`src` 태그 내의 사용 예 + +이미지를로드하는 구성 요소가 있지만 다른 작업이 완료 될 때까지 이미지의 경로를 알 수 없다고 가정 해 보겠습니다. 간단히하기 위해서`data` 변수를 사용하여 우리의``src를 바인드하자. + +**SomeComponent.vue** + +```html + + + +``` + +여기서 `webpack`은 `unsplash.png` 이미지를 번들하지 않을 것이며, 어플리케이션은 그 애셋의 `static/imgs/unsplash.png` 디렉토리를 볼 것입니다. `vue-loader` 덕분에 모든 더러운 작업이 완료되었습니다. + +### JS 내에서`fs`,`path`,`__static`로 사용 예 + +우리가 `fs`를 사용하여 애플리케이션에 읽어 들일 정적 애셋을 가지고 있다고 가정 해 봅시다. 하지만 개발과 프로덕션 모두에서 `static/` 디렉토리에 대한 안정적인 경로를 얻으려면 어떻게해야할까요? electron-vue는 `static/` 디렉토리에 대한 적절한 경로를 생성하는 `__static` 이라는 전역 변수를 제공합니다. 다음은 개발 및 제작 과정에서 간단한 텍스트 파일을 읽는 방법입니다. + +**static/someFile.txt** + +```txt +foobar +``` + +**SomeFile.js \(**`main`** or **`renderer`** process\)** + +```js +import fs from 'fs' +import path from 'path' + +let fileContents = fs.readFileSync(path.join(__static, '/someFile.txt'), 'utf8') + +console.log(fileContents) +// => "foobar" +``` + +Please note that in production all files are packed with [`asar`](https://github.com/electron/asar) by default as it is highly recommended. Because of this, assets within the `static/` folder can only be accessed within `electron` since it is aware of this behavior. So if you are planning to distribute files to your users, that can for example open in a external program, you would first need to copy those assets from your application into the user's document space or desktop. From there you could use the [`shell.openItem()`](https://electron.atom.io/docs/api/shell/#shellopenitemfullpath) electron API to open those assets. + +프로덕션 환경에서는 기본적으로 모든 파일이 [`asar`](https://github.com/electron/asar)로 압축되어 있으므로 적극 권장합니다. +이 때문에 `static/` 폴더 내의 자산은 이 동작을 알고 있기 때문에 `일렉트론` 내에서만 액세스 할 수 있습니다. +예를 들어 외부 프로그램에서 열 수있는 파일을 사용자에게 배포하려는 경우 먼저 응용 프로그램의 해당 에셋을 사용자의 문서 공간 또는 데스크톱으로 복사해야합니다. +거기에서 [`shell.openItem ()`](https://electron.atom.io/docs/api/shell/#shellopenitemfullpath) 일렉트론 API를 사용하여 해당 자산을 열 수 있습니다. + +이 상황에 대한 또 다른 방법은 `electron-packager`/`electron-builder` 를 특정 파일을 생산시`asar` 아카이브로부터 "언팩"하도록 설정하는 것입니다. electron-vue는 이 방법을 지원할 계획이 없습니다. 이 문제와 관련된 모든 문제 또는이를 설정하는 방법은 종료됩니다. diff --git a/docs/ko/using_css_frameworks.md b/docs/ko/using_css_frameworks.md new file mode 100644 index 00000000..33ce716a --- /dev/null +++ b/docs/ko/using_css_frameworks.md @@ -0,0 +1,36 @@ +# Using CSS Frameworks + +이것은 생각할 필요가없는 것처럼 보일 지 모르지만, [`style-loader`](https://github.com/webpack/style-loader)를 사용하여 webpack으로 써드 파티 CSS 라이브러리를 가져와야합니다. 이미 설치되어 있습니다. + +## Use Case + +애플리케이션에 [bootstrap](http://getbootstrap.com/), [bulma](http://bulma.io/) 또는 [materialize](http://materializecss.com/)를 사용한다고 가정 해 보겠습니다. . 계속해서`npm`에서 라이브러리를 설치하십시오. 일반적으로 자산을`index.ejs`에 연결하는 대신 자바 스크립트, 특히`src / renderer / main.js`에서 CSS를 가져올 것입니다. + + +#### Example + +`bulma` 설치 + +```bash +npm install bulma --save +``` + +`src/renderer/main.js` 안에 이 줄을 추가 + +```bash +import 'bulma/css/bulma.css' +``` + +대신, `bulma` 를 컴포넌트 파일에서 임포트 할 수 도 있다. + +**App.vue** + +```html + +``` + + +이제`webpack`은 `bulma`에서 우리 애플리케이션을 로드하고 우리의 프로덕션 빌드에서 사용할 수있게 할 것입니다. + diff --git a/docs/ko/using_pre-processors.md b/docs/ko/using_pre-processors.md new file mode 100644 index 00000000..1411e98a --- /dev/null +++ b/docs/ko/using_pre-processors.md @@ -0,0 +1,82 @@ +# 전처리 기 사용 + +[`vue-loader`](https://github.com/vuejs/vue-loader)를 [`webpack`](https://github.com/webpack/webpack)과 함께 사용하면 얻을 수있는 큰 이점 중 하나는 Vue 구성 요소 파일에서 직접 HTML/CSS/JS를 사전 처리 할 수 ​​있습니다. 이 확인에 대한 자세한 내용은 [**여기**](https://vuejs.org/v2/guide/single-file-components.html)를 참조하십시오. + +## 사용 케이스 + +CSS를 사전 처리하기 위해 Sass/SCSS를 사용해야한다고 가정 해 봅시다. 먼저,이 구문을 처리하기 위해 적절한 `webpack` 로더를 설치해야합니다 + +#### `sass-loader` 설치하기 + +```bash +npm install --save-dev sass-loader node-sass +``` + +일단 우리가 필요로하는 로더가 설치되면 모든 것이 거의 완성됩니다. `vue-loader`는 불가사의하게 나머지를 처리 ​​할 것입니다. 이제 우리는`lang = "sass"`또는`lang = "scss"`를 Vue 컴포넌트 파일에 쉽게 추가 할 수 있습니다. `sass-loader`에 종속 된 패키지이기 때문에`node-sass`도 설치했습니다. + +#### `lang` 속성 적용하기 + +그래서... + +```html + +``` + +...가 지금은 이렇게 됩니다... + +```html + +``` + +다른 어떤 전처리기에 대해서도 같은 원칙이 적용됩니다. 그래서 JS에 coffeescript가 필요한가요? [coffeescript-loader](https://github.com/webpack/coffee-loader)를 설치하고 `