diff --git a/README.md b/README.md index 0d0cc308..06aed504 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Take a look at some of the amazing projects built with electron-vue. Want to hav * [**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 +* [**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 @@ -100,6 +100,25 @@ Take a look at some of the amazing projects built with electron-vue. Want to hav * [**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. +* [**Apollo**](https://github.com/helados/Apollo): Convert YouTube videos (and more) to .mp3 files * [**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. +* [**Smart DOCSE**](https://github.com/shirshak55/smart-docse): A generic app which ability to display news, contact etc. +* [**Cleaver**](https://getcleaver.com/): Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free! +* [**XPanel**](https://github.com/krustnic/xpanel): XAMPP control panel alternative built with Electron & Vue.js +* [**Hexo-Client**](https://github.com/gaoyoubo/hexo-client): A hexo client powered by electron-vue. +* [**YT.Downloader**](https://github.com/myazarc/ytdownloader): Youtube Video Downloader&Converter and Play Music, built with Electron & Vue.js. +* [**BMFont-JS**](https://github.com/elisaday/bmfont-js): BMFont-js is a bitmap font generator, built with Electron & Vue.js. +* [**YouGet**](https://github.com/ahmetzeybek/YouGet): YouGet - YouTube Video/Playlist Downloader/Cutter - MP3 Converter +* [**Asar UI**](https://github.com/myazarc/AsarUI): UI for Asar Pack, built with Electron & Vue.js. +* [**Leeze**](https://github.com/dayinji/Leeze): A Receipt Record App, built with Electron & Vue.js. +* [**IntelTracker**](https://github.com/hectate/inteltracker): An intel item tracker for players/speedrunners of NOLF. +* [**Metube**](https://github.com/kimyearho/MeTube): A program to manage your simple YouTube music player and enjoy your music +* [**it-tools**](https://github.com/TsaiKoga/it-tools): A programing helper for developers built with Electron & Vue.js. +* [**GifsWorld**](https://github.com/dj0nny/GifsWorld): Gifs finder built with Vue and Electron diff --git a/docs/LANGS.md b/docs/LANGS.md index ba102e18..0b400efa 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,3 +1,5 @@ * [English](en/) * [日本語](ja/) * [中文](cn/) +* [대한민국](ko/) +* [Português](pt_BR/) diff --git a/docs/cn/end-to-end_testing.md b/docs/cn/end-to-end_testing.md index 8b882a57..1dcc6aaa 100644 --- a/docs/cn/end-to-end_testing.md +++ b/docs/cn/end-to-end_testing.md @@ -40,7 +40,7 @@ my-project ### 关于 Spectron -Spectron 是使用 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) 和 [WebDriverIO](http://webdriver.io/) 来操作 DOM 元素的 [electron]（http://electron.atom.io）官方测试框架。 +Spectron 是使用 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) 和 [WebDriverIO](http://webdriver.io/) 来操作 DOM 元素的 [electron](http://electron.atom.io) 官方测试框架。 #### WebDriverIO 的使用 diff --git a/docs/cn/faqs.md b/docs/cn/faqs.md index 61e38d19..f714b89c 100644 --- a/docs/cn/faqs.md +++ b/docs/cn/faqs.md @@ -33,7 +33,7 @@ ## 在哪里放置我的静态资源？ -[**静态资源的使用**](/using-static-assets.md) +[**静态资源的使用**](using-static-assets.md) ## 为什么 `npm run lint` 会出现错误？ diff --git a/docs/cn/npm_scripts.md b/docs/cn/npm_scripts.md index b5368967..82f44648 100644 --- a/docs/cn/npm_scripts.md +++ b/docs/cn/npm_scripts.md @@ -1,6 +1,6 @@ # NPM 脚本 -为了帮助n你消除开发过程中的冗余任务，请注意一些可用的 NPM 脚本。以下命令应该运行在项目的根目录下。当然，你可以使用 `yarn run ` 的方式运行下列任何命令。 +为了帮助你消除开发过程中的冗余任务，请注意一些可用的 NPM 脚本。以下命令应该运行在项目的根目录下。当然，你可以使用 `yarn run ` 的方式运行下列任何命令。 ### `npm run build` diff --git a/docs/cn/project_structure.md b/docs/cn/project_structure.md index 9c0f9e10..6aa80b4c 100644 --- a/docs/cn/project_structure.md +++ b/docs/cn/project_structure.md @@ -1,6 +1,6 @@ # 项目结构 -当涉及制作 electron 应用程序的问题时，项目结构会有些不同。如果你以前使用过官方的 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpac) 设置，那么你对这个结构应该很熟悉。本文档在此章节将尝试解释样板代码的工作原理以及应用程序在构建中的一些区别。 +当涉及制作 electron 应用程序的问题时，项目结构会有些不同。如果你以前使用过官方的 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) 设置，那么你对这个结构应该很熟悉。本文档在此章节将尝试解释样板代码的工作原理以及应用程序在构建中的一些区别。 ### 单一的 `package.json` 设置 diff --git a/docs/cn/renderer-process.md b/docs/cn/renderer-process.md index 5fb29a3c..6261fbf0 100644 --- a/docs/cn/renderer-process.md +++ b/docs/cn/renderer-process.md @@ -46,8 +46,8 @@ src/renderer/components ### vuex 模块 -描述 `vuex` 并不是简单的事情，所以请阅读 [这里](http://vuex.vuejs.org/en/intro.html)，以便更好地了解它试图解决的问题及其工作原理。 +描述 `vuex` 并不是简单的事情，所以请阅读 [这里](https://vuex.vuejs.org/zh/)，以便更好地了解它试图解决的问题及其工作原理。 electron-vue 利用 `vuex` 的模块结构创建多个数据存储，并保存在 `src/renderer/store/modules` 中。 -拥有多个数据存储对于组织化来说可能很好，但你必须导入每一个数据，这也可能令人厌烦。但是不要担心，因为 `src/renderer/store/modules/index.js` 对我们来说是麻烦的工作！这个简单的脚本让 `src/renderer/store/index.js` 一次性导入我们所有的模块。如果所有这些都没有，只要知道你可以轻松地复制给定的 `Counter.js` 模块，它将以 "神奇" 的方式被加载进来。 +拥有多个数据存储对于组织化来说可能很好，但你必须导入每一个数据，这也可能令人厌烦。但是不要担心，因为 `src/renderer/store/modules/index.js` 帮我们处理了这些麻烦事！这个简单的脚本让 `src/renderer/store/index.js` 一次性导入我们所有的模块。如果所有这些都没有，只要知道你可以轻松地复制给定的 `Counter.js` 模块，它将以 "神奇" 的方式被加载进来。 diff --git a/docs/cn/testing.md b/docs/cn/testing.md index 4b75375e..0d1a1b6f 100644 --- a/docs/cn/testing.md +++ b/docs/cn/testing.md @@ -26,4 +26,4 @@ npm test ### 关于 CI 测试 -如果在脚手架时你决定使用 `electron-builder` 作为构建工具，那么你可以在针对 `darwin`、`linux` 和 `win32` 的 Travis CI 以及 AppVeyor 上轻松测试你的程序。在 `.travis.yml` 和 `appveyor.yml` 两者之间，你会发现一些被注释掉的部分，你可以快速取消注释以启用测试。确保阅读 [**使用 CI 的自动化部署**](/using-electron-builder.md#automated-deployments-using-ci) 上的更多信息。 +如果在脚手架时你决定使用 `electron-builder` 作为构建工具，那么你可以在针对 `darwin`、`linux` 和 `win32` 的 Travis CI 以及 AppVeyor 上轻松测试你的程序。在 `.travis.yml` 和 `appveyor.yml` 两者之间，你会发现一些被注释掉的部分，你可以快速取消注释以启用测试。确保阅读 [**使用 CI 的自动化部署**](using-electron-builder.md#automated-deployments-using-ci) 上的更多信息。 diff --git a/docs/cn/using_pre-processors.md b/docs/cn/using_pre-processors.md index 70fc314d..2548c230 100644 --- a/docs/cn/using_pre-processors.md +++ b/docs/cn/using_pre-processors.md @@ -38,7 +38,7 @@ npm install --save-dev sass-loader node-sass 相同的原理适用于任何其他预处理器。那么，也许你的 JS 需要 coffeescript？只需安装 [coffeescript-loader](https://github.com/webpack/coffee-loader)，并将属性 `lang=“coffeescript”` 应用到你的 ` + + +``` + +### CDNs 사용에 관하여 + +CDN에서 제공되는 assets을 사용하면 애플리케이션의 최종 빌드 사이즈에 득이 되지만 사용하지 않는 것을 권합니다. 주된 이유는 여러분은 애플리케이션이 인터넷에 항상 액세스 할 수 있다고 가정하지만 Electron 앱의 경우 항상 그렇지 않습니다. 이는 bootstrap 같은 CSS 프레임워크에서 중요한 이슈가 됩니다. 여러분의 앱은 아주 빠른 속도로 스타일이 없는 난잡한 상태가 될 수 있습니다. + +> "나는 이를 신경쓰지 않고 CDN을 계속 사용하고 싶습니다." + +CDN을 계속 사용하기로 결정한 경우, `src/index.ejs`에 태그를 추가하여 계속해서 사용 할 수 있습니다. 다만, 앱이 오프라인 일 때 적절한 UI/UX 플로우를 설정하길 바랍니다. diff --git a/docs/ko/faqs.md b/docs/ko/faqs.md new file mode 100644 index 00000000..ad396aa0 --- /dev/null +++ b/docs/ko/faqs.md @@ -0,0 +1,55 @@ +# FAQs + +* [Why is my electron app blank after running `npm run dev`?](#why-is-my-electron-app-blank-after-running-npm-run-dev) +* [Why does my electron app show a file explorer?](#why-does-my-electron-app-show-a-file-explorer) +* [Why is `vue-devtools`/`devtron` missing?](#why-is-vue-devtoolsdevtron-missing) +* [Where do I put Static Assets?](#where-do-i-put-static-assets) +* [Why did `npm run lint` end with an error?](#why-did-npm-run-lint-end-with-an-error) +* [Why can't I load my app in a web browser?](#why-cant-i-load-my-app-in-a-web-browser) +* [How do I import `jquery`?](#how-do-import-jquery) +* [How can I debug the `main` process?](#how-can-i-debug-the-main-process) + +--- + +## Why is my electron app blank after running `npm run dev`? + +#### TL;DR + +Make sure you don't have a personal **proxy** setup that could tamper with `webpack-dev-server`. + +## Why does my electron app show a file explorer? + +#### TL;DR + +Your `src/renderer` contains error\(s\). Check console, fix errors, then refresh electron with `CommandOrControl+R`. + +##### Long answer + +If error\(s\) are present in you `src/renderer` this creates conflicts with ESLint on first run. In turn, an INVALID webpack `renderer.js` is produced which interrupts `HtmlWebpackPlugin` from creating `index.html`. Since `webpack-dev-server` doesn't have the `index.html` ready to serve, the server falls back to the file explorer. + +## Why is `vue-devtools`/`devtron` missing? + +Make sure to close and reopen the developer tools panel on first launch if they are missing. Also check your terminal check for any error messages that may occur during installation. + +## Where do I put Static Assets? + +[**Using Static Assets**](using-static-assets.md) + +## Why did `npm run lint` end with an error? + +The default nature of eslint is to print linting errors to console, and if there is any found the script will end with a non-zero exit \(which produces npm errors\). This is normal behavior. + +## Why can't I load my app in a web browser? + +[\#195](https://github.com/SimulatedGREG/electron-vue/issues/195) + +## How do import `jquery`? + +If you are wanting to use `bootstrap`, I'm going to have to stop you right there. Using both `vue` and `jquery` in the same environment is a bad practice and leads to the two frameworks colliding with each other. I would highly recommend using a `bootstrap` alternative that uses `vue` for its JavaScript functionality. Some recommendations include [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) and [`vue-strap`](https://github.com/yuche/vue-strap). For whatever reason you must use `jquery`, seek guidance from `webpack`'s documentation about the `ProvidePlugin` or see [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192). + +## How can I debug the `main` process? + +When using `electron@^1.7.2` you can open up Google Chrome, head to `chrome://inspect`, and then pop open the remote electron process while your application is running in development mode. + +[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..c3c10a7b --- /dev/null +++ b/docs/ko/file-tree.md @@ -0,0 +1,65 @@ +# 파일 트리 + +### 개발 파일 트리 + +**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 +``` + +여러분도 알 수 있듯이 거의 모든 것이 최종 프로덕션 빌드에서 제거 됩니다. 사용자가 큰 파일 크기로 부푼 소프트웨어를 다운로드하는 것을 원하지 않으므로 electron 앱을 배포 할 때는 거의 필수 입니다. + + + + diff --git a/docs/ko/getting_started.md b/docs/ko/getting_started.md new file mode 100644 index 00000000..01979f40 --- /dev/null +++ b/docs/ko/getting_started.md @@ -0,0 +1,30 @@ +# 시작하기 + +## 스캐폴딩 + +이 보일러플레이트는 [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 +``` + +#### electron에 관해서 + +선택사항이지만 프로젝트를 스캐폴딩 후에 electron 버전을 잠그는 것을 권장합니다.이렇게하면 같은 프로젝트에서 작업하는 다른 개발자가 다른 버전으로 개발하는 것을 방지 할 수 있습니다. Electron은 릴리스를 자주 사용하므로 기능이 항상 변경 될 수 있습니다. [More Info](http://electron.atom.io/docs/tutorial/electron-versioning/). + +#### Windows 사용자를 위한 노트 + +`node-gyp`에 대한 `npm install` 중에 오류가 발생하면 시스템에 적절한 빌드 도구가 설치되어 있지 않을 가능성이 높습니다. 빌드 도구에는 Python 및 Visual Studio와 같은 항목이 포함됩니다. [@felixrieseberg](https://github.com/felixrieseberg)에게 감사드립니다. 이 프로세스를 단순화하는 데 도움이 되는 몇 가지 패키지가 있습니다. + +우리가 점검해야 할 첫 번째 항목은 npm 버전이 구식이 아닌지 확인하는 것입니다. [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade)를 사용하여 수행 할 수 있습니다. 만약 yarn을 사용한다면, 여러분은 이러한 확인을 건너뛸 수 있습니다. + +완료되면 필요한 빌드 도구를 이어서 설정할 수 있습니다. [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools)를 사용하면 대부분의 더러운 작업이 완료됩니다. 전역으로 설치하면 Visual C ++ 패키지, Python 등을 차례로 설치하게 됩니다. + +이 시점에서 성공적으로 설치해야하지만, 그렇지 않은 경우에는 Visual Studio를 새로 설치해야합니다. 이는 electron-vue의 문제가 아님에 주의하세요. \(Windows는 때로는 어려울 수 있습니다. ¯\\\_\(ツ\)\_/¯\). 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..4fa44e05 --- /dev/null +++ b/docs/ko/main-process.md @@ -0,0 +1,38 @@ +# Main Process + +> Electron에서 package.json의 main 스크립트를 실행하는 프로세스를 main 프로세스라고 합니다. main 프로세스에서 실행되는 스크립트는 웹 페이지를 생성하여 GUI를 표시 할 수 있습니다. + +[**Electron 문서**](http://electron.atom.io/docs/tutorial/quick-start/#main-process)**로 부터** + +--- + +`main` 프로세스는 근본적으로 완전한 Node 환경이기 때문에 두 파일 이외의 초기 프로젝트 구조는 존재하지 않습니다. + +#### `src/main/index.js` + +이 파일은 애플리케이션의 main 파일이며 `electron`을 부팅하는 파일 입니다. `webpack`의 프로덕션 용 엔트리 파일로도 사용됩니다. 모든 `main` 프로세스 작업은 여기서 시작해야 합니다. + +#### `app/src/main/index.dev.js` + +이 파일은 특별히 `electron-debug` & `vue-devtools`를 설치하기 때문에 개발에만 사용됩니다. 이 파일을 수정할 필요가 없지만 개발 요구사항을 확장하는 데 사용할 수 있습니다. + +## `__dirname` & `__filename` 사용에 관하여 + +`webpack`을 사용하여 `main` 프로세스는 번들되기 때문에, `__dirname` & `__filename`은 프로덕션에서 예상 값을 **제공하지 않습니다**. [**File Tree**](/file-tree.md)를 보면, main.js가 `dist/electron` 폴더 안에 위치 함을 알 수 있습니다. 이 지식을 바탕으로 적절하게 `__dirname` & `__filename`를 사용하세요. + +`static/` **assets 디렉토리에 대한 경로가 필요한 경우, **[**Static Assets 사용법**](/using-static-assets.md)을 읽으세요. __static 변수는 정말 유용합니다.** + +``` +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..710c6422 --- /dev/null +++ b/docs/ko/npm_scripts.md @@ -0,0 +1,43 @@ +# NPM Scripts + +개발 프로세스에 대한 중복 작업을 제거하려면, 사용 가능한 NPM 스크립트 중 일부를 기록해 두세요. 다음 명령은 프로젝트의 루트 디렉토리에서 실행해야합니다. `yarn run `를 사용하여 아래 명령어 중 하나를 실행할 수도 있습니다. + +### `npm run build` + +프로덕션과 패키지 용 앱을 빌드 합니다. 더 자세한 정보는 [**Building Your App**](building_your_app.md) 섹션을 참조하세요. + +### `npm run dev` + +개발 중인 앱을 실행합니다. + +### `npm run lint` + +모든 `src/`와 `test/`의 JS & Vue component 파일을 Lint 합니다. + +### `npm run lint:fix` + +모든 `src/`와 `test/`의 JS & Vue component 파일을 Lint하고 문재 해결을 시도합니다. + +### `npm run pack` + +`npm run pack:main` & `npm run pack:renderer` 둘 다 실행합니다. 이러한 명령어를 사용 할 수 있지만, `npm run build`로 이 단계를 처리 할 때 수동으로 수행하는 경우는 많지 않습니다. + +### `npm run pack:main` + +`main` 프로세스 소스 코드를 번들하기 위해 webpack을 실행합니다. + +### `npm run pack:renderer` + +`renderer` 프로세스 소스 코드를 번들하기 위해 webpack을 실행합니다. + +### `npm run unit` + +Karma와 Jasmine로 단위 테스트를 실행합니다. 자세한 내용은 [**Unit Testing**](unittesting.md)를 참조하세요. + +### `npm run e2e` + +Spectron + Mocha로 end-to-end 테스트를 실행합니다. 자세한 내용은 [**End-to-end Testing**](end-to-end_testing.md)를 참조하세요. + +### `npm test` + +`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..ba8e7f99 --- /dev/null +++ b/docs/ko/project_structure.md @@ -0,0 +1,24 @@ +# 프로젝트 구조 + +electron-vue 프로젝트 구조는 Electron App을 만들 때와 조금 다릅니다. 이전에 공식 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) 설정을 사용했다면, 구조가 매우 유사하다고 느낄 것 입이다. +이 섹션의 문서는 보일러 플레이트가 작동하는 방법의 개요와 애플리케이션을 빌드 할 때의 차이점을 설명하려고합니다. 이번 섹션의 문서는 보일러플레이트가 어떻게 작동하는지에 대한 일반적인 개요와 애플리케이션을 만들 때의 차이점을 설명합니다. + +### 단일 `package.json` 설정 + +예전에는 두 개의 `package.json` 설정이 필요 했지만 [@electron-userland](https://github.com/electron-userland)의 노력 덕분에 [`electron-packager`](https://github.com/electron-userland/electron-packager)와 [`electron-builder`](https://github.com/electron-userland/electron-builder) 둘 다 지금은 완전히 단일 `package.json` 설정을 지원합니다. + +#### `dependencies` + +dependencies는 최종 프로덕션 앱에 **포함 됩니다**. 그러므로 애플리케이션에 특정 모듈이 필요하다면 여기에 설치하세요! + +#### `devDependencies` + +devDependencies는 최종 프로덕션 앱에 **포함되지 않습니다**. 여기에는 빌드 스크립트, `webpack` loaders 등과 같은 개발을 위해 특별히 필요한 모듈을 설치할 수 있습니다. + +#### Native NPM Modules 설치하기 + +우리는 네이티브 npm 모듈이 electron을 고려하여 빌드되었는지 확인해야합니다. 그러기 위해 우리는 [`electron-rebuild`]를 사용 할 수 있습니다.(https://github.com/electron/electron-rebuild), 그러나 더 간단하게하기 위해, 많은 작업을 처리하는 [`electron-builder`](https://github.com/electron-userland/electron-builder) 빌드 도구를 사용하는 것을 더욱 추천합니다. + +### `main` 프로세스에 관해서 + +개발 중에 `src/main/index.dev.js`를 주목 했을 수도 있습니다. 이 파일은 특별히 개발 용으로 사용되며 dev-tools를 설치하는 데 사용됩니다. 이 파일은 수정할 필요가 없지만 개발 요구를 확장하는 데 사용할 수 있습니다. 빌드가 끝나면 `webpack`은 `src/main/index.js`와 함께 번들을 생성하여 엔트리 파일로 만듭니다. \ No newline at end of file diff --git a/docs/ko/renderer-process.md b/docs/ko/renderer-process.md new file mode 100644 index 00000000..71c13a1b --- /dev/null +++ b/docs/ko/renderer-process.md @@ -0,0 +1,53 @@ +# Renderer Process + +> Electron는 웹 페이지를 표시하는 데 Chromium을 사용하므로 Chromium의 다중 프로세스 아키텍처도 사용됩니다. Electron의 각 웹 페이지는 렌더러 프로세스라고하는 자체 프로세스에서 실행됩니다. +> +> 일반 브라우저에서 웹 페이지는 일반적으로 샌드박스 환경에서 실행되며 기본 리소스에 대한 액세스가 허용되지 않습니다. 그러나 Electron 사용자는 웹페이지에서 운영체제와 상호작용하는 Node.js API를 사용 할 수 있습니다. + +[**Electron 문서**](http://electron.atom.io/docs/tutorial/quick-start/#renderer-process)**에서** + +--- + +## `vue`와 `vuex`에 관하여 + +### vue components + +Vue components에 익숙하지 않은 경우, [이걸](http://vuejs.org/v2/guide/single-file-components.html) 읽어 주세요. components를 사용하면 대규모의 복잡한 애플리케이션을 보다 구조화 할 수 있습니다. 각 component에는 자체 CSS, 템플릿 및 JavaScript 기능을 캡슐화하는 기능이 있습니다. + +Components `src/renderer/components`에 저장됩니다. child components를 만들 때 parent component의 이름이 있는 새 폴더 안에 배치하는 것이 일반적인 구조 관례 입니다. 이 관례는 특히 다른 경로로 조정할 때 특히 유용합니다. + +``` +src/renderer/components +├─ ParentComponentA +│ ├─ ChildComponentA.vue +│ └─ ChildComponentB.vue +└─ ParentComponentA.vue +``` + +### vue routes + +`vue-router` 대한 자세한 내용은 [여기](https://github.com/vuejs/vue-router)를 클릭하세요. 간단히 말해, Electron 애플리케이션을 만들 때, 단일 페이지 애플리케이션을 만드는 것이 훨씬 실용적이므로 `vue-router`를 사용하는 것이 좋습니다. 많은 수의 BrowserWindows를 관리하고 모든 정보를 교환하고 싶습니까? 아마도 그렇지 않을 겁니다. + +Routes는 `src/renderer/router/index.js`에 저장되며 다음과 같이 정의 됩니다. + +```js +{ + path: '', + name: '', + component: require('@/components/View') +} +``` + +``와 ``은 둘 다 변수 입니다. 이러한 routes는 `src/renderer/App.vue`에서 `` 지시문을 사용하여 components 트리에 연결됩니다. + +##### Notice + +`vue-router`를 사용하는 경우, [**HTML5 History Mode**](http://router.vuejs.org/en/essentials/history-mode.html)를 사용하지 마세요. 이 모드는 http 프로토콜을 통해 파일을 제공하기 위한 것이고 프로덕션 빌드에서 Electron이 파일을 제공하는 `file` 프로토콜에서는 제대로 작동하지 않습니다. 디폴트 `hash` 모드는 필요한 것 입니다. + +### vuex modules + +`vuex`를 설명하는 것은 쉬운 일이 아니기 때문에 어떤 문제를 해결하려고하고 있는지, 어떻게 작동 하는지를 더 잘 이해하기 위해 [이걸](https://vuex.vuejs.org/guide/) 읽어 보시기 바랍니다. + +electron-vue는 `vuex`의 모듈 구조를 이용하여 여러 데이터 stores를 만들고 `src/renderer/store/modules`에 저장합니다. + +여러 데이터 저장소를 보유하면 조직에 적합 할 수 있지만 각각을 가져와야하는 것은 귀찮습니다. 그러나 `src/renderer/store/modules/index.js`가 우리를 위해 더러운 작업을하기 때문에 무서워하지 마세요! 이 작은 스크립트는 `src/renderer/store/index.js`가 모든 모듈을 한 번에 가져올 수 있도록합니다. 모든 것이 이해가되지 않는다면, 주어진 `Counter.js` 모듈을 쉽게 복제 할 수 있다는 것을 알면 "마술처럼" 로드 될 것 입니다. diff --git a/docs/ko/savingreading-local-files.md b/docs/ko/savingreading-local-files.md new file mode 100644 index 00000000..9d61700e --- /dev/null +++ b/docs/ko/savingreading-local-files.md @@ -0,0 +1,41 @@ +# Read & Write Local Files + +`electron` 사용의 큰 이점 중 하나는 사용자의 파일 시스템에 액세스 할 수 있다는 것 입니다. 여러분은 로컬 시스템에서 파일을 읽고 쓸 수 있습니다. Chromium 제한을 피하고 애플리케이션의 내부 파일에 글을 쓰려면 `electron`의 API, 특히 [`app.getPath(name)`](https://electron.atom.io/docs/api/app/#appgetpathname) 함수를 사용해야합니다. 이 도우미 메소드는 사용자의 데스크탑, 시스템 임시 파일 등과 같은 시스템 디렉토리에 대한 파일 경로를 가져올 수 있습니다. + +### Use Case + +애플리케이션를 위한 로컬 데이터베이스 저장소를 갖기를 원한다고 가정 해 봅시다. 이 예제에서는 [`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** + +단계를 더 진행하기 위해, datastore를 `src/renderer/main.js`로 가져와서 Vue 프로토타입에 연결할 수 있습니다. 이렇게 하면, 모든 component 파일에서 `this.$db`를 사용하여 datastore 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..3effb77d --- /dev/null +++ b/docs/ko/testing.md @@ -0,0 +1,31 @@ +# Testing + +electron-vue는 `renderer` 프로세스에 대한 단위 테스팅과 end-to-end 테스트를 모두 지원하며 공식 `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로 end-to-end 테스트 실행합니다. + +```bash +npm run e2e +``` + +## 모든 테스트 실행 + +```bash +npm test +``` + +### CI 테스팅에 관하여 + +스캐폴딩 할 때 `electron-builder`를 빌드 도구로 사용하기로 결정했다면 `darwin`, `linux` 그리고 `win32` 용 Travis CI 및 AppVeyor에서 애플리케이션을 쉽게 테스트 할 수 있습니다. `.travis.yml` 와 `appveyor.yml` 둘 다 내부에서 주석 처리 된 섹션을 찾을 수 있고 곧바로 주석을 해제하여 테스트를 수행 할 수 있습니다. 자세한 내용은 [**Automated Deployments using CI**](using-electron-builder.md#automated-deployments-using-ci)를 읽으세요. + diff --git a/docs/ko/unittesting.md b/docs/ko/unittesting.md new file mode 100644 index 00000000..e537bad6 --- /dev/null +++ b/docs/ko/unittesting.md @@ -0,0 +1,45 @@ +# Unit Testing + +electron-vue는 유닛 테스트를 위해 [Karma](https://karma-runner.github.io/1.0/index.html) 테스트 러너, \(Chai[Chai](http://chaijs.com/)와 함께\)[Mocha](https://mochajs.org/) 테스트 프레임워크를 사용합니다. + +Mocha와 Chai는 각각 `karma-mocha`와 `karma-chai`를 사용하여 통합되므로 `expect`와 같은 모든 API는 테스트 파일 전역에서 사용할 수 있습니다. + +### Running Tests + +```bash +# Begin Karma +npm run unit +``` + +### File Structure + +``` +my-project +├─ test +| ├─ unit +│ │ ├─ specs/ +│ │ ├─ index.js +└─ └─ └─ karma.conf.js +``` + +대부분의 경우, index.js와 karma.conf.js 둘 다 무시하고 specs/ 작성에만 집중할 수 있습니다. + +**대부분의 경우,** `index.js` **와** `karma.conf.js` **둘 다 무시하고** `specs/` **작성에만 집중 할 수 있습니다.** + +#### `specs/` + +이 디렉토리 안은 실제 테스트가 작성되는 곳이 있습니다. webpack의 힘으로 ES2015 및 지원되는 로더에 대한 모든 액세스 권한을 갖게됩니다. + +#### `index.js` + +`karma-webpack`에서 사용하는 엔트리 파일입니다. 이 파일의 목적은 모든 테스트 및 소스 코드를 "한 번에" 수집하는 것입니다. + +#### `karma.conf.js` + +여기서 spec/coverage 리포터와 함께 설정한 실제 `karma` 구성을 찾을 수 있습니다. 추가 사용자 정의는 [official karma documentation](http://karma-runner.github.io/1.0/config/configuration-file.html)를 따라 만들 수 있습니다. + +### Mocking Dependencies + +electron-vue는 기본적으로 [`inject-loader`](https://github.com/plasticine/inject-loader)가 설치되어 있습니다. +Vue 컴포넌트 파일 사용법은 [`vue-loader` docs on testing with mocks](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..f93e5be1 --- /dev/null +++ b/docs/ko/using-electron-builder.md @@ -0,0 +1,87 @@ +# [`electron-builder`](https://github.com/electron-userland/electron-builder) 사용하기 + +`electron-builder`가 생성한 모든 빌드는 `build` 디렉토리에서 찾을 수 있습니다. + +#### 빌드하기 + +```bash +npm run build +``` + +#### 압축 해제한 디렉토리 빌드하기 + +완전한 installer가 없는 간단한 실행 파일을 생성합니다. 빠른 테스트에 유용합니다. + +```bash +npm run build:dir +``` + +### Default building configuration + +Further customization can be made at `package.json` in accordance to `electron-builders`'s options found [here](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를 이용한 자동화 된 배치 + +electron-vue의 `electron-builder` 구성을 사용하면 자동화된 배치를 위해 `appveyor.yml`와 `.travis.yml`도 제공됩니다. 두 설정 파일은 electron 애플리케이션 빌드와 artifacts를 Github release, Bintray 등에 푸시하는 설정 입니다. Travis CI는 `linux`와 `darwin` \(macOS\)을 빌드하는 데 사용되는 반면 AppVeyor는 `win32`를 빌드하는 데 사용됩니다. 두 서비스 모두 OSS 프로젝트에서 무료입니다. + +#### Setting up Travis CI/AppVeyor + +1. [Travis CI](https://travis-ci.org/getting_started) / [AppVeyor](https://www.appveyor.com/)에서 계정을 만드세요. +2. 여러분의 electron-vue 프로젝트가 있는 Github 저장소를 링크하세요. +3. [https://github.com/settings/tokens](https://github.com/settings/tokens) 방문하고 **Generate new token **을 누르세요.\(이 토큰은 Travis CI & AppVeyor 둘 다에 사용 될 수 있습니다.\) + 1. **Token description** 설정하세요. + 2. **public\_repo **스코프를 확인하세요. + 3. **Generate token**를 누르세요. +4. 나중에 새 토큰을 복사하고 저장하세요. +5. Travis CI / AppVeyor에서 원격 저장소 설정을 열고 새로운 **Environment Variable**를 추가하세요. + 1. 변수의 이름을 `GH_TOKEN`으로 설정하세요. + 2. 변수의 값을 방금 생성한 GitHub 액세스 토큰으로 설정하세요. + 3. 새로운 변수를 **저장**하고 암호화가 사용 가능한지 확인하세요. + +이 지점에서, 모든 것이 설정되어야 합니다. Travis CI/AppVeyor는 기본적으로 `master` 브랜치에 대한 푸시를 감시합니다. 푸시가 이루어지면 Travis CI/AppVeyor는 원격 저장소를 서버에 복제하고 빌드 프로세스를 시작합니다. 최종 단계에서 `electron-builder`는 `GH_TOKEN` 환경 변수를 보고 초안 릴리스를 만들고 공개 GitHub 저장소에 artifacts를 업로드 합니다. 이 시점에서 초안 릴리스를 편집 한 다음이를 세상에 퍼블릭 할 수 있습니다. 릴리스를 퍼블리싱 한 후, `package.json`을 업데이트하여 향후 릴리스가 새 버전 번호로 표시되는지 확인하세요. + +#### 자동 업데이트 + +애플리케이션에서 자동 업데이트를 수신하도록 설정하는 것은 멋진 기능이지만 [**Code Signing**](https://github.com/electron-userland/electron-builder/wiki/Code-Signing)이 필요하다는 것을 알고 있어야합니다. [여기](https://www.electron.build/code-signing)에 설명 된 `electron-builder` 요구 사항을 기반으로 몇 가지 환경 변수를 추가하여 Code Signing을 설정할 수 있습니다. 인증서를 설정하고 나면 `electron-updater` 를 설치하고 `src/main/index.js`의 하단 코드 덩어리를 주석해지하여 자동 업데이트를 활성화 할 수 있습니다. + +대부분의 사람들과 같은 멋진 코드 서명 인증서가 없으면 GitHub API를 사용하여 새 릴리스를 확인할 수 있습니다. 새로운 릴리스가 발견되면 애플리케이션 내에서 새 빌드를 다운로드하고 설치할 수 있는 다운로드 페이지로 사용자를 안내하는 알림을 제공하세요.`electron-builder`가 제공하는 놀라운 설치 프로그램 덕분에 사용자는 현재 버전을 설치 제거 할 필요가 없으며 새 설치는 웹 저장소 또는 `userData` 파일을 계속 유지하면서 이전 버전을 대체합니다. + diff --git a/docs/ko/using-electron-packager.md b/docs/ko/using-electron-packager.md new file mode 100644 index 00000000..1e54f6de --- /dev/null +++ b/docs/ko/using-electron-packager.md @@ -0,0 +1,71 @@ +# [`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 +``` + +### non-Windows 사용자를 위한 주의사항 + +non-Windows 플랫폼을 사용하여 **사용자 정의 아이콘이 있는** Windows를 위한 빌드를 하려면 [wine](https://www.winehq.org/)을 설치해야합니다. [More Info](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms). + +### 디폴트 빌드 구성 + +[여기서](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options) `electron-packager`의 옵션에 찾아서 `.electron-vue/build.config.js`에 추가하여 사용자 정의를 할 수 있습니다. 빌드 애플리케이션에 적용된 이름은 `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/, + + // Save builds to `builds` + out: path.join(__dirname, '../build'), + + // Overwrite existing builds + overwrite: true, + + // Environment variable that sets platform + 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..bd59fca2 --- /dev/null +++ b/docs/ko/using-static-assets.md @@ -0,0 +1,53 @@ +# Static Assets 사용하기 + +이전에 공식 `vuejs-templates/webpack` 보일러플레이트를 사용했다면, `static/` 디렉토리에 익숙해야합니다. 여기에 `main`과 `renderer` 프로세스 둘 다가 소비 할 수 있는 Static assets을 배치 할 수 있습니다. Vue 애플리케이션에서 이러한 assets을 사용하는 것은 간단하지만 전체 경로가 필요한 `fs` 및 다른 모듈을 사용하는 것은 다소 까다로울 수 있습니다. 감사하게도 electron-vue는 개발 및 프로덕션 환경에서 `static/` 디렉토리 경로를 생성하는 `__static` 변수를 제공합니다. + +### Vue Components에서 'src' 태그 사용 사례 + +이미지를 로드하는 component가 있지만 다른 작업이 완료 될 때까지 이미지의 경로를 알 수 없다고 가정 해 보겠습니다. 작업을 단순하게 유지하기 위해 ``의 src 바인드하기 위해 `data` 변수를 합시다. + +**SomeComponent.vue** + +```html + + + +``` + +여기서 `webpack`은 `unsplash.png` 이미지를 번들로 제공하지 않으며 애플리케이션은 해당 asset을 `static/imgs/unsplash.png` 디렉토리에서 찾습니다. `vue-loader` 덕분에 모든 더러운 작업이 완료되었습니다. + +### Use Case within JS with `fs`,`path` and `__static` + +`fs`를 사용하여 애플리케이션에서 읽을 static asset이 있다고 가정 해 봅시다. 근대 개발과 프로덕션 둘 다에서 `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" +``` + +프로덕션 환경에서는 기본적으로 모든 파일이 [`asar`](https://github.com/electron/asar)로 압축되어 있으므로 `__static`는 적극 권장합니다. 왜냐하면 `static/` 폴더 내의 assets은 오직 `electron`에서 액세스 할 수 있기 때문입니다. electron은 이 동작을 알고 있습니다. 예를 들어 외부 프로그램에서 열 수있는 파일을 사용자에게 배포하려는 경우, 먼저 애플리케이션의 해당 assets을 사용자의 문서 공간 또는 데스크톱으로 복사해야합니다.[`shell.openItem()`](https://electron.atom.io/docs/api/shell/#shellopenitemfullpath) electron API를 사용하여 해당 assets을 열 수 있습니다. + +이 상황에서 다른 대안은 특정 파일을 프로덕션 환경의 `asar` 아카이브에서 "unpack"하도록 `electron-packager`/`electron-builder`를 구성하는 것 입니다. electron-vue는 이 방법을 지원할 계획이 없습니다. 이 이슈와 관련된 것 또는 이를 설정하는 방법은 닫힙니다. + diff --git a/docs/ko/using_css_frameworks.md b/docs/ko/using_css_frameworks.md new file mode 100644 index 00000000..cf5beb7b --- /dev/null +++ b/docs/ko/using_css_frameworks.md @@ -0,0 +1,33 @@ +# 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`에 asset을 첨부하는 대신 특별히 `src/renderer/main.js` 자바스크립트에 CSS를 import 하세요. + +#### Example + +`bulma`를 설치합니다. + +```bash +npm install bulma --save +``` + +`src/renderer/main.js`에 이 라인을 추가합니다. + +```bash +import 'bulma/css/bulma.css' +``` + +또는 component 파일 내부에서 `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..66fa87ed --- /dev/null +++ b/docs/ko/using_pre-processors.md @@ -0,0 +1,82 @@ +# 전처리기 사용하기 + +[`webpack`](https://github.com/webpack/webpack)과 함께 [`vue-loader`](https://github.com/vuejs/vue-loader)를 사용하면 큰 노력을 들이지 않고도 Vue components 파일에서 직접 HTML/CSS/JS를 전-처리 할 수 ​​있다는 이점이 있습니다. 이에 대한 자세한 내용은 [**여기**](https://vuejs.org/v2/guide/single-file-components.html)를 참조하세요. + +## Use Case + +CSS를 사전 처리하기 위해 Sass/SCSS를 사용해야한다고 가정 해봅시다. 먼저 다음 구문을 처리 할 적절한 `webpack` loader를 설치해야합니다. + +#### `sass-loader` 설치하기 + +```bash +npm install --save-dev sass-loader node-sass +``` + +필요한 로더가 설치되면, 거의 모든 것이 끝난 것 입니다. `vue-loader`는 마술처럼 나머지를 처리합니다. 이제 Vue component 파일에 `lang="sass"` 또는 `lang="scss"`를 쉽게 추가 할 수 있습니다 `sass-loader`의 의존성 패키지인 `node-sass`도 설치했음을 주의하세요. + +#### `lang` 속성 적용하기 + +그래서... + +```html + +``` + +...이제 된다... + +```html + +``` + +다른 전처리기에 대해서도 같은 원칙이 적용됩니다. 그러므로 JS에 coffeescript가 필요하다면, [coffeescript-loader](https://github.com/webpack/coffee-loader)를 설치하고 `lang="coffeescript"` 속성을 ` + + +``` + +### No assunto de usar CDNs + +Sabendo dos beneficios de usar assets servido pelas CDNs pode ser otimo para suas aplicaçãos finais em quesito de espaço usado, eu vou avisar o uso contra eles. A razão principal e que fazendo isso você esta assumindo que a aplicação sempre sera acessada pela internet, o que as vezes não e o caso da maioria dos Electron apps. Isto esta sendo um grande problema com frameworks CSS atualmente como o bootstrap, e seus apps vão se tornando bagunça não estilizada. + +> "Eu não ligo, eu ainda quero usar CDNs" + +Se você esta mesmo assim determinado a usar as CDNs, então você pode adicionar toda as tags ao seu arquivo `src/index.ejs`. So faça um app que tenha uma UI/UX estando offline. diff --git a/docs/pt_BR/faqs.md b/docs/pt_BR/faqs.md new file mode 100644 index 00000000..74c3b10a --- /dev/null +++ b/docs/pt_BR/faqs.md @@ -0,0 +1,66 @@ +# FAQs +## Perguntas frequentes... + +* [Por que meu app em electron esta branco sem nada depois de rodar `npm run dev` ?](#why-is-my-electron-app-blank-after-running-npm-run-dev) +* [Por que o meu electron app mostra um explorador de arquivos ?](#why-does-my-electron-app-show-a-file-explorer) +* [Por que `vue-devtools`/`devtron` esta faltando ?](#why-is-vue-devtoolsdevtron-missing) +* [Onde eu coloco meus assets estaticos ?](#where-do-i-put-static-assets) +* [Por que o `npm run lint` resulta em um erro ?](#why-did-npm-run-lint-end-with-an-error) +* [Por que quando eu rodo `npm run lint` ele termina com um erro ?](#why-did-npm-run-lint-end-with-an-error) +* [Por que eu não consigo carregar meu app no browser ?](#why-cant-i-load-my-app-in-a-web-browser) +* [Como eu importo o `jquery` ?](#how-do-import-jquery) +* [Como eu debugo o processo `main` ?](#how-can-i-debug-the-main-process) + +--- + +## Por que meu app em electron esta branco sem nada depois de rodar `npm run dev` ? + +#### TL;DR (Muito longo não lerei) + +Tenha certeza que você não tenha uma **proxy** pessoal que possa estar atrapalhando o `webpack-dev-server`. + +## Por que o meu electron app mostra um explorador de arquivos ? + +#### TL;DR (Muito longo não lerei) + +Your `src/renderer` contains error\(s\). Check console, fix errors, then refresh electron with `CommandOrControl+R`. + +Seu `src/renderer` contem erro\(s\). Olha o console, para corrigir, e depois da um recarregar com o comando `CommandOrControl+R`. + +##### Resposta longa + +If error\(s\) are present in you `src/renderer` this creates conflicts with ESLint on first run. In turn, an INVALID webpack `renderer.js` is produced which interrupts `HtmlWebpackPlugin` from creating `index.html`. Since `webpack-dev-server` doesn't have the `index.html` ready to serve, the server falls back to the file explorer. + +Se um erro\(s\) esta presente no seu `src/renderer` pode criar conflitos com o ESLint quando você executa na primeira vez. Enquanto isso o webpack gera um arquivo `renderer.js` o que interrompe o `HtmlWebpackPlugin` de funcionar e criar o arquivo `index.html`. Quando o `webpack-dev-server` não tem o `index.html` para servir, o servidor utiliza o explorador de arquivos como fallback. + +## Por que `vue-devtools`/`devtron` esta faltando ? + +Make sure to close and reopen the developer tools panel on first launch if they are missing. Also check your terminal check for any error messages that may occur during installation. + +## Onde eu coloco meus assets estaticos ? + +[**Usando Static(estatico) Assets**](using-static-assets.md) + +## Por que o `npm run lint` resulta em um erro ? + +The default nature of eslint is to print linting errors to console, and if there is any found the script will end with a non-zero exit \(which produces npm errors\). This is normal behavior. + +O natural e que o ESLint vai imprimir os error de linting para o console, e se ele achar qualquer script ele ira terminar com um non-zeo exit \(o que produz erro\(s\) de npm\). Isto e um comportamento normal. + +## Por que eu não consigo carregar meu app no browser ? + +[\#195](https://github.com/SimulatedGREG/electron-vue/issues/195) (Desculpa não temos como traduzir esta parte.) + +## Como eu importo o `jquery`? + +If you are wanting to use `bootstrap`, I'm going to have to stop you right there. Using both `vue` and `jquery` in the same environment is a bad practice and leads to the two frameworks colliding with each other. I would highly recommend using a `bootstrap` alternative that uses `vue` for its JavaScript functionality. Some recommendations include [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) and [`vue-strap`](https://github.com/yuche/vue-strap). For whatever reason you must use `jquery`, seek guidance from `webpack`'s documentation about the `ProvidePlugin` or see [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192). + +Se você esta querendo usar o `bootstrap`, Eu vou ter que parar você exatamente aqui. Usar os dois `vue` e `jquery` no mesmo ambiente de desenvolvimento e uma má pratica e leva a duas frameworks se colidindo, causando erros `bootstrap` procure uma alternativa `vue` para essa função do JavaScript. Algumas recomendações são: [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) e [`vue-strap`](https://github.com/yuche/vue-strap). Mas se por qualquer razão vocês esta sendo obrigado a usar o `jquery`, procure ajuda documentação do `webpack` sobre como e `ProvidePlugin` ou veja [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192). (Problemas como issues não tem como nos traduzirmos por enquano, mas se alguem se oferecer em traduzir parte importantes da isse seria uma bela contribuição) + +## Como eu debugo o processo `main` ? + +When using `electron@^1.7.2` you can open up Google Chrome, head to `chrome://inspect`, and then pop open the remote electron process while your application is running in development mode. + +Quando usamos o `electron@^1.7.2` você pode abrir o Google Chrome, você vai direto em `chrome://inspect`, e você abre um pop up com as informações do processo enquanto ele esta sendo usado em modo de desenvolvimento. + +[Documentação Electron](https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md) diff --git a/docs/pt_BR/file-tree.md b/docs/pt_BR/file-tree.md new file mode 100644 index 00000000..374217a8 --- /dev/null +++ b/docs/pt_BR/file-tree.md @@ -0,0 +1,61 @@ +# Árvore de Arquivos + +### Durante desenvolvimento + +**Nota**: Alguns arquivos/pastas podem estar diferentes das configurações "da base" escolhidos durante a estruturação na `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 +``` + +#### "Build" de produção + +``` +app.asar +├─ dist +│ └─ electron +│ ├─ static/ +│ ├─ index.html +│ ├─ main.js +│ └─ renderer.js +├─ node_modules/ +└─ package.json +``` + +Como provavelmente você sabe, todas as coisas que são colocadas e como são colocadas, podem (e provavelmente iram) influenciar no build final do projeto. Isso é praticamente obrigatório quando se está distribuindo electron apps e você não vai querer que seu usuários faça download de software pesado. diff --git a/docs/pt_BR/getting_started.md b/docs/pt_BR/getting_started.md new file mode 100644 index 00000000..1f3f640e --- /dev/null +++ b/docs/pt_BR/getting_started.md @@ -0,0 +1,32 @@ +# Começando Agora + +## Scaffolding +### Quais ferramentas usamos para montar esse projeto/template. + +Esse template é construído com [vue-cli](https://github.com/vuejs/vue-cli) e inclui opção para customizar o scaffolded da sua aplicação. O uso de `node@^7` ou superior é requerido. electron-vue também recomenda oficialmente o uso do [`yarn`](https://yarnpkg.org) package manager ele maneja as dependências muito melhor e pode ajudar a reduzir o tamanho da build final com `yarn clean`. + +```bash +# Instalando vue-cli e estrutura do template +npm install -g vue-cli +vue init simulatedgreg/electron-vue my-project + +# Instalando dependências e rodando seu app +cd meu-projeto +yarn # ou npm install +yarn run dev # ou npm run dev +``` + +#### Sobre o tema electron + +Apesar de opcional, isso é recomendado para bloquear versão do electron depois de estruturar seu projeto. Isso ajuda a prevenir que outros desenvolvedores trabalhem no mesmo projeto desenvolvendo com diferentes versões. Electron solta releases que as vezes modificam features que estão sempre em mudanças. [Mais informações](http://electron.atom.io/docs/tutorial/electron-versioning/). + +#### Uma nota para usuários Windows + +Se você está tendo erros durante o `npm install` por conta do `node-gyp`, então você provavelmente não tem as ferramentas ideiais instalandas no seu sistema. Ferramentas para build incluem itens como Python e Visual Studio. Um agradecimento ao [@felixrieseberg](https://github.com/felixrieseberg), existem alguns pacotes que ajudam a diminuir esse processo. + +O primeiro item que precisamos verificar é a nossa versão do npm e assegurar que não está desatualizado. Nós conseguimos fazer isso usando [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade). Se você está usando o `yarn`, então você pode pular essa verificação. + +Uma vez que esteja completo, nós podemos então continuar configurando as ferramentas que precisamos. Usando [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools), a maior parte do trabalho sujo é feito por nós. Instalando isso globalmente nós por sua vez configure o Visual com os pacotes C++, Python, e mais. + +Até esse ponto as coisas devem estar instaladas com sucesso, mas se não, faça uma instalação limpa do Visual Studio Code. Por favor, note que estes não são problemas diretos com o próprio electron-vue \(Windows +pode ter dificuldades as vezes ¯\\\_\(ツ\)\_/¯\). diff --git a/docs/pt_BR/global_configuration.md b/docs/pt_BR/global_configuration.md new file mode 100644 index 00000000..d5f15850 --- /dev/null +++ b/docs/pt_BR/global_configuration.md @@ -0,0 +1,35 @@ +# Configuração Global + +electron-vue usa o [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/pt_BR/main-process.md b/docs/pt_BR/main-process.md new file mode 100644 index 00000000..45c4f275 --- /dev/null +++ b/docs/pt_BR/main-process.md @@ -0,0 +1,36 @@ +# Main Process + +> No Electron, o processo que roda o package.json's script primario e chamado pelo processo principal. O script que roda no processo principal pode mostrar uma interface grafica, criando paginas web. + +**Tirado da **[**documentação do Electron**](http://electron.atom.io/docs/tutorial/quick-start/#main-process) + +--- + +Desde que o `processo` principal e essencial para um ambiente completo node, não se tem uma estrutura incial a não ser dois arquivos. + +#### `src/main/index.js` + +Este arquivo e o principal de sua aplicação, esse arquivo que o `electron` começa com. Ele tambem pode ser usado pelo `webpack` como arquivo de entrada pra produção. Todo arquivo no processo `principal` principal começar daqui. + +#### `app/src/main/index.dev.js` + +Este arquivo e usado especificamente e unicamente para desenvolvimento e ele instala o `electron-debug` & `vue-devtools`. Não se precisa modificar esse arquivo, mas isso pode ser usado para extender suas nescessidades de desenvolvimento. + +## No caso de usar o `__dirname` & `__filename` + +Desde que o processo `principal` e empacotado usando `webpack`, o uso de `__dirname` & `__filename` **não vai** prover nenhum valor para a produção. Se referindo a [**Arvore de Arquivos**](/file-tree.md), você vai notar que na produção o `main.js` e colocado dentro da pasta `dist/electron`. Baseado no nesse conhecimento, use `__dirname` & `__filename` de acordo. + +**Se você precisa usar o caminho para o `static/` assets directory, tenha atenção de ler o **[**Usando Assets Estaticos**](/using-static-assets.md)** para saber como usar esta variavel super acessivel `__static`.** + + +``` +app.asar +├─ dist +│ └─ electron +│ ├─ static/ +│ ├─ index.html +│ ├─ main.js +│ └─ renderer.js +├─ node_modules/ +└─ package.json +``` diff --git a/docs/pt_BR/meta.md b/docs/pt_BR/meta.md new file mode 100644 index 00000000..6782d52b --- /dev/null +++ b/docs/pt_BR/meta.md @@ -0,0 +1,9 @@ +# Meta + +### Obrigado + +Wow, muito obrigado a vocês pessoal por ajudar a fazer o electron-vue uma das top 3 `vue-cli`templates \(que você consegue achar\) no GitHub. Eu nunca pensei que este projeto iria ser o que é hoje em dia. Pensando a tempos atras, eu originalmente criei este {tradução de boilerplate} \(em **May 2016**\) para um projeto pessoal de codigo fechado e decidi deixa-lo open source \(o {tradução de boilerplate} por si só\) quando eu notei que a maioria das peças estavam juntas. Mas voltanddo ao presente tem se implementado novas features e um suporte incrivel pela comunidade. Eu tambem quero especialmente dizer um obrigado as pessoas ajudando a responder problemas enquanto eu não podia. Vocês não tinham nenhuma obrigação de fazer, mas fizeram mesmo assim, e eu sou muito grato por isso. + +Se você esta lendo isso, então eu posso assumir que vocês esta realmente gostando do electron-vue. Muito tempo foi gasto para criar esse {tradução de boilerplate}. Se você esta se sentindo generoso, então se sinta livre de deixar uma doação. Certamente desenvolvimento futuro do electron-vue não e dependente de doações, mas isso sempre foi uma opção se você se decidir usa-la. + +#### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) diff --git a/docs/pt_BR/migration-guide.md b/docs/pt_BR/migration-guide.md new file mode 100644 index 00000000..9df9529c --- /dev/null +++ b/docs/pt_BR/migration-guide.md @@ -0,0 +1,14 @@ +# Guia de migração + +A documentação a seguir tenta explicar a migração do seu projeto deve ser realizada. Esse método não é a prova de falhas, já que a estrutura do projeto está sempre aberta a mudanças. + +1. Inicie uma versão nova do electron-vue usando `vue init simulatedgreg/electron-vue my-project` +2. Copie a pasta `src` do seu projeto atual para a nova pasta do `src` gerada pelo _scaffold_ +3. Copie sobre o `package.json` as dependencias do projeto atual para o novo `package.json` gerado pelo _scaffold_. +4. Instale as dependencias com `yarn` ou `npm install` +5. Rode o projeto no modo de desenvolvimento com \(`yarn run dev` ou `npm run dev`\) +6. Olhe para o terminal para encontrar erros. + +Como previamente mencionado acima, não tem metodo sem erros para fazer a migração para a nova versão do _scaffold_ , mas é a melhor forma de se começar. +Qualquer modificação pessoal para a estrutura do projeto ou assets vai ser totalmente problema seu e de sua equipe para migrar. +Tenha total certeza de olhar toda a outra documentação, e veja se isso reflete a versão atual do electron-vue da branch `master`. diff --git a/docs/pt_BR/miscellaneous.md b/docs/pt_BR/miscellaneous.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/pt_BR/new-releases.md b/docs/pt_BR/new-releases.md new file mode 100644 index 00000000..e92bf471 --- /dev/null +++ b/docs/pt_BR/new-releases.md @@ -0,0 +1,28 @@ +# Novas versões + +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 support? 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. + +### Objetivos passados + +#### [Multiplex](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) + +* Migração para o `webpack` 2 +* Suporte para o `electron-builder` +* Supoerte para a contrução de processo `main` +* Resolvendo problemas gerais + +#### [Minimizar](https://github.com/SimulatedGREG/electron-vue/issues/171) + +* Migração para um unico arquivo `package.json` +* Travis CI / AppVeyor configs for `electron-builder` users +* Configuraçẽos para Travis CI / AppVeyor para os usuarios de `electron-builder` +* Saida web minima no processo `renderer` + +* Migração para o `axios` +* Suporte completo para agrupar o processo `main` +* Reescrevendo os scripts de desenvolvimento e construção +* Migration to `babili` to remove the need of transpiling down completely to ES5 +* Migração para o `babili` para remover a nescessidade de transpilar completamente para o ES5 +* Suporte para `static/` assets enquanto usam modulos que nescessitam de prover um caminho completo \([`__static`](/using-static-assets.md)\) diff --git a/docs/pt_BR/npm_scripts.md b/docs/pt_BR/npm_scripts.md new file mode 100644 index 00000000..925b3550 --- /dev/null +++ b/docs/pt_BR/npm_scripts.md @@ -0,0 +1,44 @@ +# NPM Scripts + +To help eliminate redundant tasks around the development process, please take note of some of the NPM scripts available to you. The following commands should be ran from your project's root directory. And of course, you can run any of the below commands using `yarn run `. + +### `npm run build` + +Build your app for production and package. More info can be found in the [**Building Your App**](building_your_app.md) section. + +### `npm run dev` + +Run app in development. + +### `npm run lint` + +Lint all your `src/`'s and `test/`'s JS & Vue component files. + +### `npm run lint:fix` + +Lint all your `src/`'s and `test/`'s JS & Vue component files and attempt to fix issues. + +### `npm run pack` + +Run both `npm run pack:main` & `npm run pack:renderer`. Although these commands are available, there are not many cases where you will need to manually do this as `npm run build` will handle this step. + +### `npm run pack:main` + +Run webpack to bundle `main` process source code. + +### `npm run pack:renderer` + +Run webpack to bundle `renderer` process source code. + +### `npm run unit` + +Run unit tests with Karma + Jasmine. More information on [**Unit Testing**](unittesting.md). + +### `npm run e2e` + +Run end-to-end tests with Spectron + Mocha. More information on [**End-to-end Testing**](end-to-end_testing.md). + +### `npm test` + +Runs both `npm run unit` & `npm run e2e`. More information on [**Testing**](testing.md). + diff --git a/docs/pt_BR/project_structure.md b/docs/pt_BR/project_structure.md new file mode 100644 index 00000000..d35b03dd --- /dev/null +++ b/docs/pt_BR/project_structure.md @@ -0,0 +1,23 @@ +# Project Structure + +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 in built. + +### Single `package.json` Setup + +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. + +#### Installing Native NPM Modules + +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/pt_BR/renderer-process.md b/docs/pt_BR/renderer-process.md new file mode 100644 index 00000000..9970228d --- /dev/null +++ b/docs/pt_BR/renderer-process.md @@ -0,0 +1,53 @@ +# Processo de Renderização + +> 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) + +--- + +## On the subject of `vue` and `vuex` + +### vue components + +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. + +Components are stored in `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 +├─ ParentComponentA +│ ├─ ChildComponentA.vue +│ └─ ChildComponentB.vue +└─ ParentComponentA.vue +``` + +### vue routes + +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. + +Routes are held in `src/renderer/router/index.js` and defined like so... + +```js +{ + path: '', + name: '', + component: require('@/components/View') +} +``` + +...where both `` and `` are variables. These routes are then attached to the component tree using the `` directive in `src/renderer/App.vue`. + +##### Notice + +When using `vue-router`, do not use [**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 modules + +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 and are saved in `src/renderer/store/modules`. + +Having multiple data stores can be great for organization, but 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 let's `src/renderer/store/index.js` import all of our modules in a one-shot manner. If all that didn't make since, just know you can easily duplicate the given `Counter.js` module and it will be loaded in "magically". diff --git a/docs/pt_BR/savingreading-local-files.md b/docs/pt_BR/savingreading-local-files.md new file mode 100644 index 00000000..0c445fb9 --- /dev/null +++ b/docs/pt_BR/savingreading-local-files.md @@ -0,0 +1,41 @@ +# Read & Write Local Files + +One great benefit of using `electron` is the ability to access the user's file system. This enables you to read and write files on the local system. To help avoid Chromium restrictions and writing to your application's internal files, make sure to take use of `electron`'s APIs, specifically the [`app.getPath(name)`](https://electron.atom.io/docs/api/app/#appgetpathname) function. This helper method can get you file paths to system directories such as the user's desktop, system temporary files, etc. + +### Use Case + +Let's say we want to have a local database store for our application. In this example we'll demonstrate with [`nedb`](https://github.com/louischatriot/nedb). + +```bash +yarn add nedb # or npm install nedb --save +``` + +**src/renderer/datastore.js** + +Here we setup NeDB and point it to our `userData` directory. This space is reserved specifically for our application, so we can have confidence other programs or other user interactions should not tamper with this file space. From here we can import `datastore.js` in our `renderer` process and consume it. + +```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** + +To take this a step further, we can then import our datastore into `src/renderer/main.js` and attach it to the Vue prototype. Doing so, we are now able to access the datastore API through the usage of `this.$db` in all component files. + +```js +import db from './datastore' + +/* Other Code */ + +Vue.prototype.$db = db +``` + + + diff --git a/docs/pt_BR/testing.md b/docs/pt_BR/testing.md new file mode 100644 index 00000000..b287b07f --- /dev/null +++ b/docs/pt_BR/testing.md @@ -0,0 +1,30 @@ +# Testing + +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. + +## [Unit testing](unittesting.md) + +Run unit tests with Karma + Mocha + +```bash +npm run unit +``` + +## [End-to-end testing](end-to-end_testing.md) + +Run end-to-end tests with Spectron + Mocha + +```bash +npm run e2e +``` + +## Running all tests + +```bash +npm test +``` + +### On the subject of CI testing + +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. + diff --git a/docs/pt_BR/unittesting.md b/docs/pt_BR/unittesting.md new file mode 100644 index 00000000..9ae6b85f --- /dev/null +++ b/docs/pt_BR/unittesting.md @@ -0,0 +1,42 @@ +# Unit Testing + +electron-vue makes use of the [Karma](https://karma-runner.github.io/1.0/index.html) test runner and the [Mocha](https://mochajs.org/) test framework \(with [Chai](http://chaijs.com/)\) for unit testing. + +Both Mocha and Chai are integrated using `karma-mocha` and `karma-chai` respectively, so all APIs such as `expect` are globally available in test files. + +### Running Tests + +```bash +# Begin Karma +npm run unit +``` + +### File Structure + +``` +my-project +├─ test +| ├─ unit +│ │ ├─ specs/ +│ │ ├─ index.js +└─ └─ └─ karma.conf.js +``` + +**For the most part, you can ignore both **`index.js`** and **`karma.conf.js`** and focus solely on writing **`specs/`**.** + +#### `specs/` + +Inside this directory is where actual tests are written. Thanks to the power of webpack, you have full access to ES2015 and supported loaders. + +#### `index.js` + +This is the entry file used by `karma-webpack`. The purpose of this file is to gather all test and source code in a "one-shot" manner. + +#### `karma.conf.js` + +Here you will find the actual `karma` configuration, set up with spec/coverage reporters. Further customization can be made in accordance to the [official karma documentation](http://karma-runner.github.io/1.0/config/configuration-file.html). + +### Mocking Dependencies + +electron-vue comes with [`inject-loader`](https://github.com/plasticine/inject-loader) installed by default. For usage with Vue component files see [`vue-loader` docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html). + diff --git a/docs/pt_BR/using-electron-builder.md b/docs/pt_BR/using-electron-builder.md new file mode 100644 index 00000000..4185d22e --- /dev/null +++ b/docs/pt_BR/using-electron-builder.md @@ -0,0 +1,87 @@ +# Using [`electron-builder`](https://github.com/electron-userland/electron-builder) + +All builds produced by `electron-builder` can be found within the `build` directory. + +#### Building + +```bash +npm run build +``` + +#### Building unpacked directory + +Produce simple executable without full installer. Useful for quick testing. + +```bash +npm run build:dir +``` + +### Default building configuration + +Further customization can be made at `package.json` in accordance to `electron-builders`'s options found [here](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" + } +} +``` + +## Automated Deployments using 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. + +#### Setting up Travis CI/AppVeyor + +1. Create an account over at [Travis CI](https://travis-ci.org/getting_started) / [AppVeyor](https://www.appveyor.com/) +2. Link your GitHub repository that has your electron-vue project +3. Visit [https://github.com/settings/tokens](https://github.com/settings/tokens) and hit **Generate new token **\(the same token can be used for both Travis CI & AppVeyor\) + 1. Set a **Token description** + 2. Check the **public\_repo **scope + 3. Hit **Generate token** +4. Copy your new token and save for later +5. Open your repository settings on Travis CI / AppVeyor to add a new **Environment Variable** + 1. Set the name of the variable to `GH_TOKEN` + 2. Set the value of the variable to the GitHub access token you just created + 3. **Save** the new variable and ensure encryption is enabled + +At this point, everything should be setup. Travis CI/AppVeyor by default will watch for any pushes to your `master` branch. When a push is made, Travis CI/AppVeyor will then clone down your repository to its server and begin the build process. During the final stages, `electron-builder` with see the `GH_TOKEN` environment variable and create a draft release and upload the artifacts to your public GitHub repository. From this point, you can edit the draft release and then publish it to the world. After publishing your release, make sure future releases are marked with a new version number by updating your `package.json`. + +#### Auto Updating + +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://github.com/electron-userland/electron-builder/wiki/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. + +If you are like most people and do not have a fancy code signing certificate, then you can always use the GitHub API to check for new releases. When a new release is detected, provide a notification within your application to point users to a download page where they can download and install the new build. Thanks to the amazing installer that `electron-builder` provides, user's do not have to uninstall the current version and the new installation will replace the old while still persisting any web storage or `userData` files. + diff --git a/docs/pt_BR/using-electron-packager.md b/docs/pt_BR/using-electron-packager.md new file mode 100644 index 00000000..5c3b441f --- /dev/null +++ b/docs/pt_BR/using-electron-packager.md @@ -0,0 +1,71 @@ +# Using [`electron-packager`](https://github.com/electron-userland/electron-packager) + +All builds produced by `electron-packager` can be found within the `build` folder. + +#### Building for all platforms + +Please know that not all Operating Systems can build for all other platforms. + +```bash +npm run build +``` + +#### Building for a specific platform + +Platforms include `darwin`, `mas`, `linux` and `win32`. + +```bash +# build for darwin (macOS) +npm run build:darwin +``` + +#### Cleaning + +Delete all builds from `build`. + +```bash +npm run build:clean +``` + +### A note for non-Windows users + +If you are wanting to build for Windows **with a custom icon** using a non-Windows platform, you must have [wine](https://www.winehq.org/) installed. [More Info](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms). + +### Default building configurations + +Further customization can be made at `.electron-vue/build.config.js` in accordance to `electron-packager`'s options found [here](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options). The name applied to your built application is set with the `productName` value in your `package.json`. + +```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/, + + // Save builds to `builds` + out: path.join(__dirname, '../build'), + + // Overwrite existing builds + overwrite: true, + + // Environment variable that sets platform + platform: process.env.BUILD_TARGET || 'all' +} +``` + + + diff --git a/docs/pt_BR/using-static-assets.md b/docs/pt_BR/using-static-assets.md new file mode 100644 index 00000000..65769413 --- /dev/null +++ b/docs/pt_BR/using-static-assets.md @@ -0,0 +1,53 @@ +# Using Static Assets + +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. + +### Use Case within `src` tags in Vue Components + +Let's say I have a component that loads an image, but the image's path isn't known until some other task is completed. To keep things simple, let's just use a `data` variable to bind our ``'s src. + +**SomeComponent.vue** + +```html + + + +``` + +Here `webpack` will not bundle the `unsplash.png` image and the application will look inside the `static/imgs/unsplash.png` directory for the asset. Thanks to `vue-loader`, all of the dirty work is done for us. + +### Use Case within JS with `fs`,`path` and `__static` + +Let's say we have a static asset that we need to read into our application using `fs`, but how do we get a reliable path, in both development and production, to the `static/` directory? electron-vue provides a global variable named `__static` that will yield a proper path to the `static/` directory. Here's how we can use it to read a simple text file in both development and production. + +**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. + +An alternative method to this situation would be to configure `electron-packager`/`electron-builder` to set specific files to "unpack" from the `asar` archive in production. electron-vue has no plans to support this method; any issues related to this or how to set this up will be closed. + diff --git a/docs/pt_BR/using_css_frameworks.md b/docs/pt_BR/using_css_frameworks.md new file mode 100644 index 00000000..f4ca7671 --- /dev/null +++ b/docs/pt_BR/using_css_frameworks.md @@ -0,0 +1,34 @@ +# Using CSS Frameworks + +Although this may seem like a no brainer, I'd suggest you import your third-party CSS libraries into webpack using the [`style-loader`](https://github.com/webpack/style-loader), which is already setup for you. + +## Use Case + +Say you want to use [bootstrap](http://getbootstrap.com/), [bulma](http://bulma.io/), or [materialize](http://materializecss.com/) for your application. Go ahead and install your library from `npm` like you normally would, but instead of attaching the asset to `index.ejs` we will import the CSS in our JavaScript, specifically in `src/renderer/main.js`. + +#### Example + +Let's install `bulma` + +```bash +npm install bulma --save +``` + +Then inside `src/renderer/main.js` let's add this line. + +```bash +import 'bulma/css/bulma.css' +``` + +Alternatively, you can also include `bulma` from inside a component file. + +**App.vue** + +```html + +``` + +Now `webpack` will know to load in `bulma` for our application and make it available in our production builds. + diff --git a/docs/pt_BR/using_pre-processors.md b/docs/pt_BR/using_pre-processors.md new file mode 100644 index 00000000..05f2682d --- /dev/null +++ b/docs/pt_BR/using_pre-processors.md @@ -0,0 +1,82 @@ +# Using Pre-Processors + +One of the great benefits of using [`vue-loader`](https://github.com/vuejs/vue-loader) with [`webpack`](https://github.com/webpack/webpack) is the ability to pre-process your HTML/CSS/JS directly in your Vue components files without much effort at all. For more information about this check [**here**](https://vuejs.org/v2/guide/single-file-components.html). + +## Use Case + +Let's say we need to use Sass/SCSS for pre-processing our CSS. First, we need to install the proper `webpack` loader to handle this syntax. + +#### Installing `sass-loader` + +```bash +npm install --save-dev sass-loader node-sass +``` + +Once the loader we need is installed, everything is pretty much finished. `vue-loader` will magically take care of the rest. Now we can easily add `lang="sass"` or `lang="scss"` to our Vue component files. Notice we also installed `node-sass` as it is a dependent package for `sass-loader`. + +#### Applying the `lang` attribute + +So... + +```html + +``` + +...now becomes... + +```html + +``` + +The same principles apply for just about any other pre-processor. So maybe you need coffeescript for your JS? Simply install the [coffeescript-loader](https://github.com/webpack/coffee-loader) and apply the `lang="coffeescript"` attribute to your ` + <% if (!process.browser) { %> + + <% } %> diff --git a/template/src/main/index.dev.js b/template/src/main/index.dev.js index ae70ccf7..1d10bc4e 100644 --- a/template/src/main/index.dev.js +++ b/template/src/main/index.dev.js @@ -7,9 +7,6 @@ /* eslint-disable */ -// Set environment for development -process.env.NODE_ENV = 'development' - // Install `electron-debug` with `devtron` require('electron-debug')({ showDevTools: true }) @@ -24,4 +21,4 @@ require('electron').app.on('ready', () => { }) // Require `main` process to boot app -require('./index') +require('./index') \ No newline at end of file diff --git a/template/src/main/index.js b/template/src/main/index.js index 6f57e9f2..8d2c0351 100644 --- a/template/src/main/index.js +++ b/template/src/main/index.js @@ -3,6 +3,9 @@ {{/if_eq}} import { app, BrowserWindow } from 'electron'{{#if_eq eslintConfig 'airbnb'}} // eslint-disable-line{{/if_eq}} +{{#isEnabled plugins 'vuex-electron'}} +import '../renderer/store' +{{/isEnabled}} /** * Set `__static` path to static files in production diff --git a/template/src/renderer/components/LandingPage/SystemInformation.vue b/template/src/renderer/components/LandingPage/SystemInformation.vue index 1f5c3d0e..5dcb8e12 100644 --- a/template/src/renderer/components/LandingPage/SystemInformation.vue +++ b/template/src/renderer/components/LandingPage/SystemInformation.vue @@ -36,7 +36,7 @@ export default { data () { return { - electron: process.versions['atom-shell'], + electron: process.versions.electron, {{#isEnabled plugins 'vue-router'}} name: this.$route.name, {{/isEnabled}} diff --git a/template/src/renderer/store/index.js b/template/src/renderer/store/index.js index 913f0a2f..e7219b31 100644 --- a/template/src/renderer/store/index.js +++ b/template/src/renderer/store/index.js @@ -1,11 +1,21 @@ import Vue from 'vue' import Vuex from 'vuex' +{{#isEnabled plugins 'vuex-electron'}} +import { createPersistedState, createSharedMutations } from 'vuex-electron' + +{{/isEnabled}} import modules from './modules' Vue.use(Vuex) export default new Vuex.Store({ modules, + {{#isEnabled plugins 'vuex-electron'}} + plugins: [ + createPersistedState(), + createSharedMutations() + ], + {{/isEnabled}} strict: process.env.NODE_ENV !== 'production' }) diff --git a/tests/builds.json b/tests/builds.json index 7af2922c..56cd2a55 100644 --- a/tests/builds.json +++ b/tests/builds.json @@ -8,9 +8,15 @@ "\n", "\n", "\n", + "\n", + "\n", + "\n", "\n" ], "eslint-airbnb": [ + "\n", + "\n", + "\n", "\n", "\n", "\n", @@ -22,6 +28,9 @@ "\n" ], "eslint-none": [ + "\n", + "\n", + "\n", "\n", "\n", "\n", @@ -33,6 +42,9 @@ "\n" ], "no-router": [ + "\n", + "\n", + "\n", "\n", "\n", "\u001b[B\u001b[B \n", @@ -44,6 +56,9 @@ "\n" ], "no-vuex": [ + "\n", + "\n", + "\n", "\n", "\n", "\u001b[B\u001b[B\u001b[B \n", @@ -55,6 +70,9 @@ "\n" ], "no-router-vuex": [ + "\n", + "\n", + "\n", "\n", "\n", "\u001b[B\u001b[B \u001b[B \n", @@ -71,6 +89,9 @@ "\n", "\n", "\n", + "\n", + "\n", + "\n", "n\n", "\n", "\n", @@ -83,6 +104,9 @@ "\n", "\n", "\n", + "\n", + "\n", + "\n", "n\n", "\n", "\n" @@ -95,6 +119,9 @@ "\n", "\n", "\n", + "\n", + "\n", + "\n", "\u001b[B\n", "\n" ] diff --git a/tests/scaffold.js b/tests/scaffold.js index 9b009795..babe233d 100644 --- a/tests/scaffold.js +++ b/tests/scaffold.js @@ -22,14 +22,17 @@ function generate (key, build) { suppose('vue', ['init', `${projectDir}`, key], { debug: process.stdout }) .when(/Application Name/g).respond(build[0]) - .when(/Project description/g).respond(build[1]) - .when(/plugins/g).respond(build[2]) - .when(/ESLint/g).respond(build[3]) - .when(/config/g).respond(build[4]) - .when(/unit/g).respond(build[5]) - .when(/end-to-end/g).respond(build[6]) - .when(/build tool/g).respond(build[7]) - .when(/author/g).respond(build[8]) + .when(/Application Id/g).respond(build[1]) + .when(/Application Version/g).respond(build[2]) + .when(/Project description/g).respond(build[3]) + .when(/Scss/g).respond(build[4]) + .when(/plugins/g).respond(build[5]) + .when(/ESLint/g).respond(build[6]) + .when(/config/g).respond(build[7]) + .when(/unit/g).respond(build[8]) + .when(/end-to-end/g).respond(build[9]) + .when(/build tool/g).respond(build[10]) + .when(/author/g).respond(build[11]) .on('error', err => { console.log(err.message) }) diff --git a/tests/scaffold.sh b/tests/scaffold.sh index 3617b781..c0930183 100644 --- a/tests/scaffold.sh +++ b/tests/scaffold.sh @@ -5,7 +5,7 @@ set -e cd "$PWD/tests" node scaffold.js "$1" -# Install dependecies +# Install dependencies cd "$PWD/builds/$1" yarn