├── tests ├── builds │ └── .gitkeep ├── scaffold.sh ├── wine.sh ├── scaffold.js └── builds.json ├── docs ├── cn │ ├── miscellaneous.md │ ├── book.json │ ├── development.md │ ├── contributing.md │ ├── using_the_file_structure.md │ ├── meta.md │ ├── migration-guide.md │ ├── building_your_app.md │ ├── testing.md │ ├── using_css_frameworks.md │ ├── SUMMARY.md │ ├── webpack-configurations.md │ ├── new-releases.md │ ├── npm_scripts.md │ ├── main-process.md │ ├── file-tree.md │ ├── savingreading-local-files.md │ ├── project_structure.md │ ├── unittesting.md │ ├── global_configuration.md │ ├── vue_accessories.md │ ├── getting_started.md │ ├── entry_indexhtml.md │ ├── end-to-end_testing.md │ ├── using-electron-packager.md │ ├── using-static-assets.md │ ├── renderer-process.md │ ├── using_pre-processors.md │ └── faqs.md ├── en │ ├── miscellaneous.md │ ├── book.json │ ├── development.md │ ├── contributing.md │ ├── using_the_file_structure.md │ ├── building_your_app.md │ ├── migration-guide.md │ ├── testing.md │ ├── meta.md │ ├── using_css_frameworks.md │ ├── SUMMARY.md │ ├── global_configuration.md │ ├── file-tree.md │ ├── unittesting.md │ ├── npm_scripts.md │ ├── new-releases.md │ ├── webpack-configurations.md │ ├── main-process.md │ ├── savingreading-local-files.md │ ├── project_structure.md │ ├── entry_indexhtml.md │ ├── debugging-production.md │ ├── end-to-end_testing.md │ ├── getting_started.md │ └── using-electron-packager.md ├── ja │ ├── miscellaneous.md │ ├── book.json │ ├── development.md │ ├── contributing.md │ ├── using_the_file_structure.md │ ├── meta.md │ ├── migration-guide.md │ ├── building_your_app.md │ ├── testing.md │ ├── using_css_frameworks.md │ ├── SUMMARY.md │ ├── new-releases.md │ ├── webpack-configurations.md │ ├── file-tree.md │ ├── npm_scripts.md │ ├── main-process.md │ ├── global_configuration.md │ ├── savingreading-local-files.md │ ├── unittesting.md │ ├── project_structure.md │ ├── entry_indexhtml.md │ ├── vue_accessories.md │ ├── getting_started.md │ ├── end-to-end_testing.md │ ├── using-electron-packager.md │ ├── using-static-assets.md │ ├── using_pre-processors.md │ ├── renderer-process.md │ └── faqs.md ├── ko │ ├── miscellaneous.md │ ├── book.json │ ├── development.md │ ├── contributing.md │ ├── using_the_file_structure.md │ ├── building_your_app.md │ ├── testing.md │ ├── using_css_frameworks.md │ ├── migration-guide.md │ ├── meta.md │ ├── webpack-configurations.md │ ├── SUMMARY.md │ ├── file-tree.md │ ├── npm_scripts.md │ ├── main-process.md │ ├── global_configuration.md │ ├── savingreading-local-files.md │ ├── unittesting.md │ ├── project_structure.md │ ├── debugging-production.md │ ├── entry_indexhtml.md │ ├── getting_started.md │ ├── new-releases.md │ ├── vue_accessories.md │ ├── using-electron-packager.md │ ├── end-to-end_testing.md │ ├── using-static-assets.md │ ├── using_pre-processors.md │ └── renderer-process.md ├── pt_BR │ ├── miscellaneous.md │ ├── book.json │ ├── development.md │ ├── contributing.md │ ├── using_the_file_structure.md │ ├── building_your_app.md │ ├── testing.md │ ├── using_css_frameworks.md │ ├── meta.md │ ├── SUMMARY.md │ ├── global_configuration.md │ ├── migration-guide.md │ ├── file-tree.md │ ├── npm_scripts.md │ ├── unittesting.md │ ├── webpack-configurations.md │ ├── savingreading-local-files.md │ ├── main-process.md │ ├── new-releases.md │ ├── project_structure.md │ ├── entry_indexhtml.md │ ├── vue_accessories.md │ ├── using-electron-packager.md │ ├── getting_started.md │ └── end-to-end_testing.md ├── images │ ├── logo.png │ └── landing-page.jpg └── LANGS.md ├── template ├── dist │ ├── web │ │ └── .gitkeep │ └── electron │ │ └── .gitkeep ├── static │ └── .gitkeep ├── src │ ├── renderer │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ └── logo.png │ │ ├── router │ │ │ └── index.js │ │ ├── store │ │ │ ├── modules │ │ │ │ ├── index.js │ │ │ │ └── Counter.js │ │ │ └── index.js │ │ ├── App.vue │ │ ├── main.js │ │ └── components │ │ │ └── LandingPage │ │ │ └── SystemInformation.vue │ ├── main │ │ ├── index.dev.js │ │ └── index.js │ └── index.ejs ├── build │ └── icons │ │ ├── icon.ico │ │ ├── icon.icns │ │ └── 256x256.png ├── .eslintignore ├── .gitignore ├── test │ ├── .eslintrc │ ├── e2e │ │ ├── specs │ │ │ └── Launch.spec.js │ │ ├── index.js │ │ └── utils.js │ └── unit │ │ ├── specs │ │ └── LandingPage.spec.js │ │ ├── index.js │ │ └── karma.conf.js ├── .electron-vue │ ├── build.config.js │ ├── dev-client.js │ └── webpack.main.config.js ├── appveyor.yml ├── .babelrc ├── README.md ├── .eslintrc.js └── .travis.yml ├── .gitignore ├── book.json ├── .github └── ISSUE_TEMPLATE.md ├── package.json └── LICENSE.md /tests/builds/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/cn/miscellaneous.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/en/miscellaneous.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/ja/miscellaneous.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/ko/miscellaneous.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/pt_BR/miscellaneous.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/dist/web/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/dist/electron/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/src/renderer/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/cn/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "" 3 | } 4 | -------------------------------------------------------------------------------- /docs/en/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "" 3 | } 4 | -------------------------------------------------------------------------------- /docs/ja/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "" 3 | } 4 | -------------------------------------------------------------------------------- /docs/ko/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "" 3 | } 4 | -------------------------------------------------------------------------------- /docs/pt_BR/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "" 3 | } 4 | -------------------------------------------------------------------------------- /docs/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/docs/images/logo.png -------------------------------------------------------------------------------- /docs/LANGS.md: -------------------------------------------------------------------------------- 1 | * [English](en/) 2 | * [日本語](ja/) 3 | * [中文](cn/) 4 | * [대한민국](ko/) 5 | * [Português](pt_BR/) 6 | -------------------------------------------------------------------------------- /docs/images/landing-page.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/docs/images/landing-page.jpg -------------------------------------------------------------------------------- /template/build/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/template/build/icons/icon.ico -------------------------------------------------------------------------------- /template/build/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/template/build/icons/icon.icns -------------------------------------------------------------------------------- /template/build/icons/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/template/build/icons/256x256.png -------------------------------------------------------------------------------- /template/.eslintignore: -------------------------------------------------------------------------------- 1 | {{#testing unit e2e}} 2 | test/unit/coverage/** 3 | test/unit/*.js 4 | test/e2e/*.js 5 | {{/testing}} 6 | -------------------------------------------------------------------------------- /template/src/renderer/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/icai/electron-vue/master/template/src/renderer/assets/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | _book 3 | thumbs.db 4 | .DS_Store 5 | node_modules 6 | tests/builds/* 7 | npm-debug.log 8 | npm-debug.*.log 9 | !.gitkeep 10 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/electron/* 3 | dist/web/* 4 | build/* 5 | !build/icons 6 | {{#if unit}} 7 | coverage 8 | {{/if}} 9 | node_modules/ 10 | npm-debug.log 11 | npm-debug.log.* 12 | thumbs.db 13 | !.gitkeep 14 | -------------------------------------------------------------------------------- /docs/cn/development.md: -------------------------------------------------------------------------------- 1 | # 开发 2 | 3 | ### 开始开发环境设置 4 | 5 | 在你使用 `yarn` 或 `npm install` 安装了依赖之后， 运行... 6 | 7 | ```bash 8 | yarn run dev # 或者 npm run dev 9 | ``` 10 | 11 | ...然后 轰! 现在，你就在运行一个 electron-vue 应用程序. 12 | ![](../images/landing-page.jpg) 13 | 14 | 此样板代码附带了几个易于移除的登录页面组件。 15 | -------------------------------------------------------------------------------- /docs/cn/contributing.md: -------------------------------------------------------------------------------- 1 | # 贡献 2 | 3 | 想要贡献你的力量？随时提交 pull 请求。在准备提交任何内容之前，请务必查看以下内容... 4 | 5 | ### JavaScript 标准规范 6 | 7 | 为确保所有 JS 代码遵循基本的 ***风格标准***，请务必遵循这些 [规则](http://standardjs.com/#rules)。 8 | 9 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) 10 | -------------------------------------------------------------------------------- /docs/ja/development.md: -------------------------------------------------------------------------------- 1 | # 開発 2 | 3 | ### 開発セットアップ 4 | 5 | `yarn` または `npm install` で依存関係をインストールした後、実行します... 6 | 7 | ```bash 8 | yarn run dev # or npm run dev 9 | ``` 10 | 11 | ...そしてやりました！electron-vue アプリケーションの実行に成功しました。 12 | ![](../images/landing-page.jpg) 13 | 14 | このボイラープレートには、簡単に取り外し可能なランディングページがいくつか付属しています。 15 | -------------------------------------------------------------------------------- /docs/ko/development.md: -------------------------------------------------------------------------------- 1 | # Development 2 | 3 | ### 개발 설정 시작하기 4 | 5 | `yarn` 또는 `npm install`을 사용하여 종속성을 설치 한 후, 실행합니다. 6 | 7 | ```bash 8 | yarn run dev # or npm run dev 9 | ``` 10 | 11 | ... 뿜! 실행 중인 electron-vue 앱이 있습니다. 12 | ![](../images/landing-page.jpg) 13 | 14 | 이 보일러플레이트는 쉽게 제거할 수 있는 몇 가지 landing-page components가 있습니다. 15 | 16 | -------------------------------------------------------------------------------- /docs/ko/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 이 보일러플레이트를 돕고 싶나요? 자유롭게 pull request를 제출하세요. 제출 준비를 하기 전에 다음을 확인하세요... 3 | 4 | ### JavaScript 표준 스타일 5 | 모든 JS가 기본 ***style standards*** 을 따르는 지 확인하려면 이 [rules](http://standardjs.com/#rules)을 따르는 지 확인하세요. 6 | 7 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) -------------------------------------------------------------------------------- /template/test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "assert": true, 7 | "expect": true, 8 | "should": true, 9 | "__static": true 10 | }{{#if eslint}}{{#if_eq eslintConfig 'airbnb'}}, 11 | "rules": { 12 | "func-names": 0, 13 | "prefer-arrow-callback": 0 14 | }{{/if_eq}}{{/if}} 15 | } 16 | -------------------------------------------------------------------------------- /docs/ja/contributing.md: -------------------------------------------------------------------------------- 1 | # 貢献 2 | 3 | このボイラープレートを手助けしたいですか？遠慮なくプルリクエストを送信してください。何かを送信する準備をする前に、以下をチェックしてください... 4 | 5 | ### JavaScript 標準スタイル 6 | 7 | 全ての JS が***標準スタイル***に従っていることを確実にするために、これらの[ルール](http://standardjs.com/#rules)に従っていることを確認してください。 8 | 9 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) 10 | -------------------------------------------------------------------------------- /docs/cn/using_the_file_structure.md: -------------------------------------------------------------------------------- 1 | # Using the File Structure 2 | 3 | electron-vue 尽可能不强制一个特别的项目结构，但是努力去跟随通用 Vue & Electron 的实践。以下文档描述了在元项目结构中使用的通用实践。 4 | 5 | **如果你对 Electron 的 **`renderer`** 和 **`main`**进程不熟悉，请认真阅读第一部分 **[**快速起步**](http://electron.atom.io/docs/tutorial/quick-start)**。它详尽的解释了他们的不同。** 6 | 7 | ### [渲染进程](renderer-process.md) 8 | 9 | ### [主进程](main-process.md) 10 | -------------------------------------------------------------------------------- /tests/scaffold.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # Scaffold boilerplate with given templateName 5 | cd "$PWD/tests" 6 | node scaffold.js "$1" 7 | 8 | # Install dependencies 9 | cd "$PWD/builds/$1" 10 | yarn 11 | 12 | # Run unit/e2e testing 13 | yarn test 14 | 15 | # Run webpack and build electron 16 | yarn run build 17 | 18 | # Clean up current scaffold 19 | cd .. 20 | rm -rf "$1" 21 | -------------------------------------------------------------------------------- /template/test/e2e/specs/Launch.spec.js: -------------------------------------------------------------------------------- 1 | import utils from '../utils' 2 | 3 | describe('Launch', function () { 4 | beforeEach(utils.beforeEach) 5 | afterEach(utils.afterEach) 6 | 7 | it('shows the proper application title', function () { 8 | return this.app.client.getTitle() 9 | .then(title => { 10 | expect(title).to.equal('{{ name }}') 11 | }) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /template/src/renderer/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'landing-page', 11 | component: require('@/components/LandingPage').default 12 | }, 13 | { 14 | path: '*', 15 | redirect: '/' 16 | } 17 | ] 18 | }) 19 | -------------------------------------------------------------------------------- /docs/en/development.md: -------------------------------------------------------------------------------- 1 | # Development 2 | 3 | ### Starting the development setup 4 | 5 | After you have installed dependencies with `yarn` or `npm install`, then run... 6 | 7 | ```bash 8 | yarn run dev # or npm run dev 9 | ``` 10 | 11 | ...and boom! You now have a running electron-vue app. 12 | ![](../images/landing-page.jpg) 13 | 14 | This boilerplate comes with a few landing-page components that are easily removable. 15 | 16 | -------------------------------------------------------------------------------- /docs/pt_BR/development.md: -------------------------------------------------------------------------------- 1 | # Desenvolvimento 2 | 3 | ### Configurando ambiente de desenvolvimento 4 | 5 | Depois de instalar dependências com `yarn` ou `npm install`, então rode... 6 | 7 | ```bash 8 | yarn run dev # or npm run dev 9 | ``` 10 | 11 | ...e boom! Agora você pode rodar seu electron-vue app. 12 | ![](../images/landing-page.jpg) 13 | 14 | Esse template vem com a poucos componentes landing-page que podem ser removidos de forma fácil. 15 | -------------------------------------------------------------------------------- /docs/en/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 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... 3 | 4 | ### JavaScript Standard Style 5 | To ensure all JS follows basic ***style standards*** make sure it follows these [rules](http://standardjs.com/#rules). 6 | 7 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) -------------------------------------------------------------------------------- /template/src/renderer/store/modules/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The file enables `@/store/index.js` to import all vuex modules 3 | * in a one-shot manner. There should not be any reason to edit this file. 4 | */ 5 | 6 | const files = require.context('.', false, /\.js$/) 7 | const modules = {} 8 | 9 | files.keys().forEach(key => { 10 | if (key === './index.js') return 11 | modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default 12 | }) 13 | 14 | export default modules 15 | -------------------------------------------------------------------------------- /template/test/unit/specs/LandingPage.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import LandingPage from '@/components/LandingPage' 3 | 4 | describe('LandingPage.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | el: document.createElement('div'), 8 | render: h => h(LandingPage) 9 | }).$mount() 10 | 11 | expect(vm.$el.querySelector('.title').textContent).to.contain('Welcome to your new project!') 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /docs/pt_BR/contributing.md: -------------------------------------------------------------------------------- 1 | # Contribuindo 2 | Gostaria de ajudar nesse template ? Sinta-se livre para enviar um pull request. Antes de enviar qualquer coisa, verifique se está tudo em ordem... 3 | 4 | ### JavaScript Standard Style 5 | Para garantir que todo seu código siga os padrões básicos ***style standards*** certifique-se de que os mesmos sigam: [rules](http://standardjs.com/#rules). 6 | 7 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) 8 | -------------------------------------------------------------------------------- /docs/cn/meta.md: -------------------------------------------------------------------------------- 1 | # 更多 2 | 3 | ### 感谢 4 | 5 | 哇，非常感谢你们的帮助，使得 electron-vue 在 GitHub 上成为（我可以找到的）前 3 名 `vue-cli` 模板之一。我从来没有想过这个项目会像今天一样脱颖而出。回想过去，我起初（在 **2016年5月**）做了这个样板只是为个人的闭源项目。当我知道我已经完成了大部分的代码之后，我决定开源（样板本身）。转到今天，项目里已经有了这么多新的功能，并且得到了社区的大力支持。我也想给社区的人们一些特别的话，你们帮助我解决了一些我无法解决的问题。你们绝对没有任何义务去做任何事情，但是你们还是这么做的，我很感激。 6 | 7 | 如果你正在阅读这篇文章，那我几乎可以假设你真的很喜欢 electron-vue。我花了很多时间在创建这个样板上。如果你愿意的话，请自愿留下一些小费。electron-vue 未来的发展肯定不会依赖于这些捐赠，但如果你决定捐赠，它总是一个可以的选择。 8 | 9 | #### [**使用 PayPal.me 进行转账**](https://www.paypal.me/simulatedgreg/5) 10 | -------------------------------------------------------------------------------- /tests/wine.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Update lists 4 | sudo apt-get update 5 | 6 | # Preset agreement to install ttf programmatically 7 | echo ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula select true | sudo debconf-set-selections 8 | sudo apt-get -y install ttf-mscorefonts-installer 9 | 10 | # Install wine for win32 building support 11 | sudo apt-get -y install wine 12 | 13 | # Install `electron-builder` dependencies 14 | sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils 15 | -------------------------------------------------------------------------------- /template/test/e2e/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // Set BABEL_ENV to use proper env config 4 | process.env.BABEL_ENV = 'test' 5 | 6 | // Enable use of ES6+ on required files 7 | require('babel-register')({ 8 | ignore: /node_modules/ 9 | }) 10 | 11 | // Attach Chai APIs to global scope 12 | const { expect, should, assert } = require('chai') 13 | global.expect = expect 14 | global.should = should 15 | global.assert = assert 16 | 17 | // Require all JS files in `./specs` for Mocha to consume 18 | require('require-dir')('./specs') 19 | -------------------------------------------------------------------------------- /docs/cn/migration-guide.md: -------------------------------------------------------------------------------- 1 | # 迁移指南 2 | 3 | 本文档尝试解释 _应该_ 如何实现你的项目迁移，但是由于整体项目结构始终可能变化，因此，这可能不是一个完整验证过的方法。 4 | 5 | 1. 使用 `vue init simulatedgreg/electron-vue my-project` 生成一个崭新的 electron-vue 项目 6 | 2. 将当前项目 `src` 内的文件复制到新项目的 `src` 目录中 7 | 3. 将 `package.json` 里的依赖关系从当前项目复制到新项目的 `package.json` 里 8 | 4. 使用 `yarn` 或 `npm install` 安装依赖 9 | 5. 在开发模式下运行项目 \(`yarn run dev` 或 `npm run dev`\) 10 | 6. 监视控制台以修复可能出现的错误 11 | 12 | 正如前面提到的，并没有一个完整验证过的方法来迁移到一个新的项目，但上述这些步骤，通常是可以让你成功完成迁移。任何对项目结构或资源处理的私自修改，将依靠你或你的团队来完成迁移。请确保查看文档的其余部分，因为它将始终反映 electron-vue 当前版本的 `master` 分支。 13 | -------------------------------------------------------------------------------- /template/test/e2e/utils.js: -------------------------------------------------------------------------------- 1 | import electron from 'electron' 2 | import { Application } from 'spectron' 3 | 4 | export default { 5 | afterEach () { 6 | this.timeout(10000) 7 | 8 | if (this.app && this.app.isRunning()) { 9 | return this.app.stop() 10 | } 11 | }, 12 | beforeEach () { 13 | this.timeout(10000) 14 | this.app = new Application({ 15 | path: electron, 16 | args: ['dist/electron/main.js'], 17 | startTimeout: 10000, 18 | waitTimeout: 10000 19 | }) 20 | 21 | return this.app.start() 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /template/src/renderer/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | {{#isEnabled plugins 'vuex-electron'}} 5 | import { createPersistedState, createSharedMutations } from 'vuex-electron' 6 | 7 | {{/isEnabled}} 8 | import modules from './modules' 9 | 10 | Vue.use(Vuex) 11 | 12 | export default new Vuex.Store({ 13 | modules, 14 | {{#isEnabled plugins 'vuex-electron'}} 15 | plugins: [ 16 | createPersistedState(), 17 | createSharedMutations() 18 | ], 19 | {{/isEnabled}} 20 | strict: process.env.NODE_ENV !== 'production' 21 | }) 22 | -------------------------------------------------------------------------------- /template/.electron-vue/build.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | /** 4 | * `electron-packager` options 5 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-packager.html 6 | */ 7 | module.exports = { 8 | arch: 'x64', 9 | asar: true, 10 | dir: path.join(__dirname, '../'), 11 | icon: path.join(__dirname, '../build/icons/icon'), 12 | ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/, 13 | out: path.join(__dirname, '../build'), 14 | overwrite: true, 15 | platform: process.env.BUILD_TARGET || 'all' 16 | } 17 | -------------------------------------------------------------------------------- /template/test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.config.devtools = false 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src/renderer', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /template/src/renderer/store/modules/Counter.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | main: 0 3 | } 4 | 5 | const mutations = { 6 | DECREMENT_MAIN_COUNTER (state) { 7 | {{#if_eq eslintConfig 'airbnb'}}state.main = state.main - 1{{else}}state.main--{{/if_eq}} 8 | }, 9 | INCREMENT_MAIN_COUNTER (state) { 10 | {{#if_eq eslintConfig 'airbnb'}}state.main = state.main + 1{{else}}state.main++{{/if_eq}} 11 | } 12 | } 13 | 14 | const actions = { 15 | someAsyncTask ({ commit }) { 16 | // do something async 17 | commit('INCREMENT_MAIN_COUNTER') 18 | } 19 | } 20 | 21 | export default { 22 | state, 23 | mutations, 24 | actions 25 | } 26 | -------------------------------------------------------------------------------- /docs/ja/using_the_file_structure.md: -------------------------------------------------------------------------------- 1 | # Using the File Structure 2 | 3 | electron-vue does its best to not force a particular project structure, but does try to follow common Vue & Electron practices. The following documentation describes common practices used in the original project structure. 4 | 5 | **If you are unfamiliar with Electron's **`renderer`** and **`main`** processes, please give the first section of the **[**Quick Start**](http://electron.atom.io/docs/tutorial/quick-start)** a good read. It explains, in detail, their differences.** 6 | 7 | ### [Renderer Process](renderer-process.md) 8 | 9 | ### [Main Process](main-process.md) 10 | -------------------------------------------------------------------------------- /docs/cn/building_your_app.md: -------------------------------------------------------------------------------- 1 | # 构建你的应用程序 2 | 3 | electron-vue 支持使用 [electron-packager](https://github.com/electron-userland/electron-packager) 和 [electron-builder](https://github.com/electron-userland/electron-builder) 来构建和分发你的产品阶段的程序。两个构建工具都由了不起的 [@electron-userland](https://github.com/electron-userland) 社区支持，每个都有详尽的文档。在 `vue-cli` 脚手架过程中，你会被问到你想要使用哪个构建器。 4 | 5 | ## [`electron-packager`](using-electron-packager.md) 6 | 7 | 如果你刚开始制作 electron 应用程序或只需要创建简单的可执行文件，那么 `electron-packager` 就可以满足你的需求。 8 | 9 | ## [`electron-builder`](using-electron-builder.md) 10 | 11 | 如果你正在寻找完整的安装程序、自动更新的支持、使用 Travis CI 和 AppVeyor 的 CI 构建、或本机 node 模块的自动重建，那么你会需要 `electron-builder`。 12 | -------------------------------------------------------------------------------- /docs/en/using_the_file_structure.md: -------------------------------------------------------------------------------- 1 | # Using the File Structure 2 | 3 | electron-vue does its best to not force a particular project structure, but does try to follow common Vue & Electron practices. The following documentation describes common practices used in the original project structure. 4 | 5 | **If you are unfamiliar with Electron's **`renderer`** and **`main`** processes, please give the first section of the **[**Quick Start**](http://electron.atom.io/docs/tutorial/quick-start)** a good read. It explains, in detail, their differences.** 6 | 7 | ### [Renderer Process](renderer-process.md) 8 | 9 | ### [Main Process](main-process.md) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/ja/meta.md: -------------------------------------------------------------------------------- 1 | # メタ 2 | 3 | ### ありがとうございます 4 | 5 | わあ、electron-vue を GitHub で(見つけることができる)トップ3の `vue-cli` テンプレートのうちの1つにするのを手伝ってくれてありがとうございます。このプロジェクトが今のようになるとは思っても見ませんでした。振り返ると、もともとこのボイラープレートは(**2016年5月**に)個人用のクローズドソースとして作成し、大部分が再利用可能になっていることを知ったときに(ボイラープレート自身を)オープンソースにすることを決めました。今では、新しい機能が数多く導入され、コミュニティからの驚くべきサポートがあります。 私が答えられないときに問題に答えてくれるコミュニティの人々に格別の感謝を表明したいです。 皆さんは何かをする絶対的な義務はありませんが、してくれます。私はそれに感謝しています。 6 | 7 | これを読んでいるなら、本当に electron-vue を楽しんでくれているはずだと思います。このボイラープレートを作成するのに多くの時間が費やされました。あなたが気前が良くて、望むならば、遠慮なくチップを残してください。確かに electron-vue の将来の開発は寄付に依存しませんが、それを使用することに決めるならば、常にオプションとなります。 8 | 9 | #### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) 10 | -------------------------------------------------------------------------------- /docs/ko/using_the_file_structure.md: -------------------------------------------------------------------------------- 1 | # Using the File Structure 2 | 3 | electron-vue does its best to not force a particular project structure, but does try to follow common Vue & Electron practices. The following documentation describes common practices used in the original project structure. 4 | 5 | **If you are unfamiliar with Electron's **`renderer`** and **`main`** processes, please give the first section of the **[**Quick Start**](http://electron.atom.io/docs/tutorial/quick-start)** a good read. It explains, in detail, their differences.** 6 | 7 | ### [Renderer Process](renderer-process.md) 8 | 9 | ### [Main Process](main-process.md) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/pt_BR/using_the_file_structure.md: -------------------------------------------------------------------------------- 1 | # Using the File Structure 2 | 3 | electron-vue does its best to not force a particular project structure, but does try to follow common Vue & Electron practices. The following documentation describes common practices used in the original project structure. 4 | 5 | **If you are unfamiliar with Electron's **`renderer`** and **`main`** processes, please give the first section of the **[**Quick Start**](http://electron.atom.io/docs/tutorial/quick-start)** a good read. It explains, in detail, their differences.** 6 | 7 | ### [Renderer Process](renderer-process.md) 8 | 9 | ### [Main Process](main-process.md) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "./docs", 3 | "plugins": [ 4 | "edit-link", 5 | "theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git", 6 | "github", 7 | "ga" 8 | ], 9 | "pluginsConfig": { 10 | "edit-link": { 11 | "base": "https://github.com/SimulatedGREG/electron-vue/tree/master/docs", 12 | "label": "Edit This Page" 13 | }, 14 | "github": { 15 | "url": "https://github.com/SimulatedGREG/electron-vue" 16 | }, 17 | "ga": { 18 | "token": "UA-64200901-3" 19 | } 20 | }, 21 | "links": { 22 | "sharing": { 23 | "facebook": false, 24 | "twitter": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /docs/ja/migration-guide.md: -------------------------------------------------------------------------------- 1 | # 移行ガイド 2 | 3 | 以下のドキュメントでは、プロジェクトが移行をどのように達成*すべき*であるか説明しますが、プロジェクト全体の構造が常に変更されているため、完全な方法ではない可能性があります。 4 | 5 | 1. `vue init simulatedgreg/electron-vue my-project` を行い、electron-vue の新しいバージョンをスキャフォールドする 6 | 2. 現在のプロジェクトの `src` ファイルを新しくスキャフォールディングした `src` ディレクトリにコピーする 7 | 3. `package.json` の依存関係を現在のプロジェクトから新しくスキャフォールディングした `package.json` にコピーする 8 | 4. `yarn` もしくは `npm install` で依存関係をインストールする 9 | 5. 開発モードでプロジェクトを実行する(`yarn run dev` もしくは `npm run dev`) 10 | 6. コンソールで修正するエラーを監視する 11 | 12 | 上で言及したように、新しいスキャフォールドに移行する完全な方法はありませんが、一般的でほぼ完全に進めるための主要なステップになります。 プロジェクトの構造やアセットの取り扱いに関する個人的な変更は、あなたまたはチームが移行することになります。`master` ブランチの electron-vue の現在のバージョンを常に反映するので、残りのドキュメントを必ずチェックしてください。 13 | -------------------------------------------------------------------------------- /template/src/renderer/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/ja/building_your_app.md: -------------------------------------------------------------------------------- 1 | # アプリケーション構築 2 | 3 | electron-vue はビルドと本番アプリケーションの配布のために [electron-packager](https://github.com/electron-userland/electron-packager) と [electron-builder](https://github.com/electron-userland/electron-builder) の両方をサポートしています。両方のビルドツールは素晴らしい [@electron-userland](https://github.com/electron-userland) コミュニティによって支援されていて、それぞれに詳細なドキュメントがあります。`vue-cli` のスキャフォールディング中にどちらのビルダーを使いたいか尋ねられます。 4 | 5 | ## [`electron-packager`](using-electron-packager.md) 6 | 7 | electron アプリケーションを作成するのが初めて使う人や単純な実行可能ファイルを作成する必要がある場合、`electron-packager` がニーズに最適です。 8 | 9 | ## [`electron-builder`](using-electron-builder.md) 10 | 11 | 完全なインストーラー、自動更新サポート、Travis CI と AppVeyor を使用した CI ビルド、またはネイティブコードモジュールの再構築の自動化を探し求めている場合、`electron-builder` が最適です。 12 | -------------------------------------------------------------------------------- /docs/ko/building_your_app.md: -------------------------------------------------------------------------------- 1 | # 앱 빌드하기 2 | 3 | electron-vue는 프로덕션 준비가 완료된 애플리케이션을 빌드 및 배포 할 수 있는 [electron-packager](https://github.com/electron-userland/electron-packager)와 [electron-builder](https://github.com/electron-userland/electron-builder)를 지원합니다. 두 가지 빌드 도구는 놀라운 [@electron-userland](https://github.com/electron-userland) 커뮤니티의 뒷받침으로 각각 자세한 문서가 있습니다. `vue-cli` 스캐폴딩 중 어떤 빌더를 사용할 지 묻는 메시지가 표시됩니다. 4 | 5 | ## [`electron-packager`](using-electron-packager.md) 6 | 7 | electron 애플리케이션을 처음 사용하거나 간단한 실행 파일만 작성해야하는 경우 `electron-packager`는 여러분의 요구에 완벽할 것 입니다. 8 | 9 | ## [`electron-builder`](using-electron-builder.md) 10 | 11 | 완전한 설치 관리자, 자동 업데이트 지원, Travis CI 및 AppVeyor를 사용한 CI 구축 또는 기본 노드 모듈 재구성 자동화를 원할 경우 `electron-builder`가 좋을 것 입니다. 12 | 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### Found an issue or bug with electron-vue? Tell me all about it! 2 | Questions regarding how to use `electron` or `vue` are likely to be closed as they are not direct issues with this boilerplate. Please seek solutions from official documentation or their respective communities. 3 | 4 | ##### Describe the issue / bug. 5 | \# 6 | 7 | ##### How can I reproduce this problem? 8 | \# 9 | 10 | ##### If visual, provide a screenshot. 11 | \# 12 | 13 | ##### Tell me about your development environment. 14 | * Node version: 15 | * NPM version: 16 | * vue-cli version: (if necessary) 17 | * Operating System: 18 | 19 | #### *If you are looking to suggest an enhancement or feature, then feel free to remove everything above.* 20 | -------------------------------------------------------------------------------- /docs/cn/testing.md: -------------------------------------------------------------------------------- 1 | # 测试 2 | 3 | 因受到了官方样板代码 `vuejs-templates/webpack` 提供的测试功能的极大启发，electron-vue 同时支持单元测试和 `renderer` 进程的端到端测试。在 `vue-cli` 脚手架中，你可以选择是否包含测试。 4 | 5 | ## [单元测试](unittesting.md) 6 | 7 | 使用 Karma + Mocha 运行单元测试 8 | 9 | ```bash 10 | npm run unit 11 | ``` 12 | 13 | ## [端对端测试](end-to-end_testing.md) 14 | 15 | 使用 Spectron + Mocha 运行端对端测试 16 | 17 | ```bash 18 | npm run e2e 19 | ``` 20 | 21 | ## 运行所有测试 22 | 23 | ```bash 24 | npm test 25 | ``` 26 | 27 | ### 关于 CI 测试 28 | 29 | 如果在脚手架时你决定使用 `electron-builder` 作为构建工具，那么你可以在针对 `darwin`、`linux` 和 `win32` 的 Travis CI 以及 AppVeyor 上轻松测试你的程序。在 `.travis.yml` 和 `appveyor.yml` 两者之间，你会发现一些被注释掉的部分，你可以快速取消注释以启用测试。确保阅读 [**使用 CI 的自动化部署**](using-electron-builder.md#automated-deployments-using-ci) 上的更多信息。 30 | -------------------------------------------------------------------------------- /template/src/main/index.dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used specifically and only for development. It installs 3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to 4 | * modify this file, but it can be used to extend your development 5 | * environment. 6 | */ 7 | 8 | /* eslint-disable */ 9 | 10 | // Install `electron-debug` with `devtron` 11 | require('electron-debug')({ showDevTools: true }) 12 | 13 | // Install `vue-devtools` 14 | require('electron').app.on('ready', () => { 15 | let installExtension = require('electron-devtools-installer') 16 | installExtension.default(installExtension.VUEJS_DEVTOOLS) 17 | .then(() => {}) 18 | .catch(err => { 19 | console.log('Unable to install `vue-devtools`: \n', err) 20 | }) 21 | }) 22 | 23 | // Require `main` process to boot app 24 | require('./index') -------------------------------------------------------------------------------- /docs/cn/using_css_frameworks.md: -------------------------------------------------------------------------------- 1 | # CSS 框架的使用 2 | 3 | 虽然这可能看起来并不明智，但我建议你使用 [`style-loader`](https://github.com/webpack/style-loader) 将第三方 CSS 库导入 webpack，其实这一点我们已经为你做了。 4 | 5 | ## 使用案例 6 | 7 | 假设你要为你的程序使用 [bootstrap](http://getbootstrap.com/)、[bulma](http://bulma.io/) 或者 [materialize](http://materializecss.com/)。你可以仍旧像通常情况下一样，从 `npm` 安装你的库，而不是将资源附加到 `index.ejs` 上，我们将在我们的 JavaScript 中导入 CSS，具体在 `src/renderer/main.js` 中。 8 | 9 | #### 例子 10 | 11 | 让我们安装 `bulma` 如下 12 | 13 | ```bash 14 | npm install bulma --save 15 | ``` 16 | 17 | 然后，在 `src/renderer/main.js` 里面加入这一行： 18 | 19 | ```bash 20 | import 'bulma/css/bulma.css' 21 | ``` 22 | 23 | 替代方案是, 你也可以在你的组件文件中引用 `bulma`。 24 | 25 | **App.vue** 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | 现在，`webpack` 会为我们的应用程序加载 `bulma`，并使其在产品构建中可用. 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-vue", 3 | "version": "0.0.0", 4 | "description": "An Electron & Vue.js quick start boilerplate with vue-cli support", 5 | "main": "meta.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/SimulatedGREG/electron-vue.git" 9 | }, 10 | "keywords": [ 11 | "electron", 12 | "vue", 13 | "boilerplate", 14 | "hot", 15 | "reload", 16 | "router", 17 | "vuex", 18 | "resource" 19 | ], 20 | "author": "Greg Holguin (https://github.com/SimulatedGREG)", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/SimulatedGREG/electron-vue/issues" 24 | }, 25 | "homepage": "https://github.com/SimulatedGREG/electron-vue#readme", 26 | "devDependencies": { 27 | "suppose": "^0.6.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /template/appveyor.yml: -------------------------------------------------------------------------------- 1 | {{#testing unit e2e}} 2 | # Commented sections below can be used to run tests on the CI server 3 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing 4 | {{/testing}} 5 | version: 0.1.{build} 6 | 7 | branches: 8 | only: 9 | - master 10 | 11 | image: Visual Studio 2017 12 | platform: 13 | - x64 14 | 15 | cache: 16 | - node_modules 17 | - '%APPDATA%\npm-cache' 18 | - '%USERPROFILE%\.electron' 19 | - '%USERPROFILE%\AppData\Local\Yarn\cache' 20 | 21 | init: 22 | - git config --global core.autocrlf input 23 | 24 | install: 25 | - ps: Install-Product node 8 x64 26 | - git reset --hard HEAD 27 | - yarn 28 | - node --version 29 | 30 | build_script: 31 | {{#testing unit e2e}} 32 | #- yarn test 33 | {{/testing}} 34 | - yarn build 35 | 36 | test: off 37 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "env": { 4 | {{#testing unit e2e}} 5 | "test": { 6 | "presets": [ 7 | ["env", { 8 | "targets": { "node": 7 } 9 | }], 10 | "stage-0" 11 | ], 12 | "plugins": ["istanbul"] 13 | }, 14 | {{/testing}} 15 | "main": { 16 | "presets": [ 17 | ["env", { 18 | "targets": { "node": 7 } 19 | }], 20 | "stage-0" 21 | ] 22 | }, 23 | "renderer": { 24 | "presets": [ 25 | ["env", { 26 | "modules": false 27 | }], 28 | "stage-0" 29 | ] 30 | }, 31 | "web": { 32 | "presets": [ 33 | ["env", { 34 | "modules": false 35 | }], 36 | "stage-0" 37 | ] 38 | } 39 | }, 40 | "plugins": ["transform-runtime"] 41 | } 42 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | #### Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:9080 12 | npm run dev 13 | 14 | # build electron application for production 15 | npm run build 16 | 17 | {{#testing unit e2e}} 18 | # run {{#unit}}unit{{/unit}}{{#unit}}{{#e2e}} & {{/e2e}}{{/unit}}{{#e2e}}end-to-end{{/e2e}} tests 19 | npm test 20 | 21 | {{/testing}} 22 | 23 | {{#if eslint}} 24 | # lint all JS/Vue component files in `src/` 25 | npm run lint 26 | 27 | {{/if}} 28 | ``` 29 | 30 | --- 31 | 32 | This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html). 33 | -------------------------------------------------------------------------------- /docs/ja/testing.md: -------------------------------------------------------------------------------- 1 | # テスト 2 | 3 | electron-vue は `renderer` プロセスのユニットテストとエンドツーエンドテストの両方をサポートし、公式の `vuejs-templates/webpack` ボイラープレートで提供されているテスト設定に大きく影響を受けています。`vue-cli` スキャフォールディング中にテストサポートを含めるかの選択があります。 4 | 5 | ## [ユニットテスト](unittesting.md) 6 | 7 | Karma と Mocha でユニットテストを実行する 8 | 9 | ```bash 10 | npm run unit 11 | ``` 12 | 13 | ## [エンドツーエンドテスト](end-to-end_testing.md) 14 | 15 | Spectron と Mocha でエンドツーエンドテストを実行する 16 | 17 | ```bash 18 | npm run e2e 19 | ``` 20 | 21 | ## 全てのテストを実行する 22 | 23 | ```bash 24 | npm test 25 | ``` 26 | 27 | ### CI テストについて 28 | 29 | スキャフォールディング時にビルドツールとして `electron-builder` を使うことに決めた場合、`darwin`、`linux`、`win32`向けにTravis CI と AppVeyorの両方で簡単にアプリケーションをテストできます。`.travis.yml` と `appveyor.yml` の中には、コメントアウトされたセクションがあります。テストを有効にするために、セクションのコメントアウトを解除することができます。詳細については、[**CI を使用した自動デプロイ**](using-electron-builder.md#automated-deployments-using-ci)を読んでください。** ** 30 | -------------------------------------------------------------------------------- /docs/ja/using_css_frameworks.md: -------------------------------------------------------------------------------- 1 | # CSS フレームワークの使用 2 | 3 | これは簡単なように思えるかもしれませんが、すでに用意されている [`style-loader`](https://github.com/webpack/style-loader) を使用してサードパーティの CSS ライブラリを webpack にインポートすることをお勧めします。 4 | 5 | ## ユースケース 6 | 7 | アプリケーションに [bootstrap](http://getbootstrap.com/) 、 [bulma](http://bulma.io/) 、 [materialize](http://materializecss.com/) を使いたいとします。いつも通り `npm` からインストールしますが、 `index.ejs` に追加する代わりに、JavaScript 、特に `src/renderer/main.js` に CSS をインポートします。 8 | 9 | #### 例 10 | 11 | `bulma` をインストールしましょう 12 | 13 | ```bash 14 | npm install bulma --save 15 | ``` 16 | 17 | それでは `src/renderer/main.js` にこの行を追加しましょう。 18 | 19 | ```bash 20 | import 'bulma/css/bulma.css' 21 | ``` 22 | 23 | また、コンポーネントファイル内に `bulma` を含めることもできます。 24 | 25 | **App.vue** 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | `webpack` は `bulma` を読み込み、本番ビルドで使用できるようにします。 34 | -------------------------------------------------------------------------------- /template/src/renderer/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | {{#isEnabled plugins 'axios'}} 3 | import axios from 'axios' 4 | {{/isEnabled}} 5 | 6 | import App from './App' 7 | {{#isEnabled plugins 'vue-router'}} 8 | import router from './router' 9 | {{/isEnabled}} 10 | {{#isEnabled plugins 'vuex'}} 11 | import store from './store' 12 | {{/isEnabled}} 13 | 14 | {{#isEnabled plugins 'vue-electron'}} 15 | if (!process.env.IS_WEB) Vue.use(require('vue-electron')) 16 | {{/isEnabled}} 17 | {{#isEnabled plugins 'axios'}} 18 | Vue.http = Vue.prototype.$http = axios 19 | {{/isEnabled}} 20 | Vue.config.productionTip = false 21 | 22 | /* eslint-disable no-new */ 23 | new Vue({ 24 | components: { App }, 25 | {{#isEnabled plugins 'vue-router'}} 26 | router, 27 | {{/isEnabled}} 28 | {{#isEnabled plugins 'vuex'}} 29 | store, 30 | {{/isEnabled}} 31 | template: '' 32 | }).$mount('#app') 33 | -------------------------------------------------------------------------------- /template/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | <% if (htmlWebpackPlugin.options.nodeModules) { %> 7 | 8 | 11 | <% } %> 12 | 13 | 14 |
15 | 16 | <% if (!process.browser) { %> 17 | 20 | <% } %> 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/ko/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | electron-vue는 `renderer` 프로세스에 대한 단위 테스팅과 end-to-end 테스트를 모두 지원하며 공식 `vuejs-templates/webpack` 보일러 플레이트에서 제공되는 테스트 설정에 크게 영향을 받습니다. 4 | `vue-cli` 스캐폴딩 중 테스트 지원 옵션을 선택 할 수 있습니다. 5 | 6 | ## [Unit testing](unittesting.md) 7 | 8 | Karma + Mocha로 유닛 테스트 실행합니다. 9 | 10 | ```bash 11 | npm run unit 12 | ``` 13 | 14 | ## [End-to-end testing](end-to-end_testing.md) 15 | 16 | Spectron + Mocha로 end-to-end 테스트 실행합니다. 17 | 18 | ```bash 19 | npm run e2e 20 | ``` 21 | 22 | ## 모든 테스트 실행 23 | 24 | ```bash 25 | npm test 26 | ``` 27 | 28 | ### CI 테스팅에 관하여 29 | 30 | 스캐폴딩 할 때 `electron-builder`를 빌드 도구로 사용하기로 결정했다면 `darwin`, `linux` 그리고 `win32` 용 Travis CI 및 AppVeyor에서 애플리케이션을 쉽게 테스트 할 수 있습니다. `.travis.yml` 와 `appveyor.yml` 둘 다 내부에서 주석 처리 된 섹션을 찾을 수 있고 곧바로 주석을 해제하여 테스트를 수행 할 수 있습니다. 자세한 내용은 [**Automated Deployments using CI**](using-electron-builder.md#automated-deployments-using-ci)를 읽으세요. 31 | 32 | -------------------------------------------------------------------------------- /docs/ko/using_css_frameworks.md: -------------------------------------------------------------------------------- 1 | # Using CSS Frameworks 2 | 3 | 생각할 필요가 없는 것처럼 보일지 모르지만, 이미 설치되어있는 [`style-loader`](https://github.com/webpack/style-loader)를 사용하여 webpack으로 써드 파티 CSS 라이브러리를 가져와야합니다. 4 | 5 | ## Use Case 6 | 7 | 애플리케이션에 [bootstrap](http://getbootstrap.com/), [bulma](http://bulma.io/) 또는 [materialize](http://materializecss.com/)를 사용하려고한다고 가정 해봅시다. 계속해서 평소처럼 `npm` 에서 라이브러리를 설치하세요. 다만 `index.ejs`에 asset을 첨부하는 대신 특별히 `src/renderer/main.js` 자바스크립트에 CSS를 import 하세요. 8 | 9 | #### Example 10 | 11 | `bulma`를 설치합니다. 12 | 13 | ```bash 14 | npm install bulma --save 15 | ``` 16 | 17 | `src/renderer/main.js`에 이 라인을 추가합니다. 18 | 19 | ```bash 20 | import 'bulma/css/bulma.css' 21 | ``` 22 | 23 | 또는 component 파일 내부에서 `bulma`를 포함 할 수도 있습니다. 24 | 25 | **App.vue** 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | 이제 `webpack`은 애플리케이션 용 `bulma`를 로드하여 프로덕션 빌드에서 사용할 수 있게 합니다. 34 | -------------------------------------------------------------------------------- /docs/cn/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 概要 2 | 3 | * [简介](./README.md) 4 | * [起步](getting_started.md) 5 | * [项目结构](project_structure.md) 6 | * [文件树](file-tree.md) 7 | * [渲染器进程](renderer-process.md) 8 | * [主进程](main-process.md) 9 | * [Webpack 配置](webpack-configurations.md) 10 | * [开发](development.md) 11 | * [入口 index.html](entry_indexhtml.md) 12 | * [Vue 插件](vue_accessories.md) 13 | * [NPM 脚本](npm_scripts.md) 14 | * [CSS 框架的使用](using_css_frameworks.md) 15 | * [预处理器的使用](using_pre-processors.md) 16 | * [静态资源的使用](using-static-assets.md) 17 | * [读写本地文件](savingreading-local-files.md) 18 | * [建立你的应用](building_your_app.md) 19 | * [electron-packager 的使用](using-electron-packager.md) 20 | * [electron-builder 的使用](using-electron-builder.md) 21 | * [测试](testing.md) 22 | * [单元测试](unittesting.md) 23 | * [端到端测试](end-to-end_testing.md) 24 | * [更多](meta.md) 25 | * [常见问题](faqs.md) 26 | * [新版本](new-releases.md) 27 | * [迁移指南](migration-guide.md) 28 | * [贡献](contributing.md) 29 | -------------------------------------------------------------------------------- /docs/cn/webpack-configurations.md: -------------------------------------------------------------------------------- 1 | # Webpack 配置 2 | 3 | electron-vue 包含三个单独的、位于 `.electron-vue/` 目录中的 webpack 配置文件。除了可选的使用 `web` 输出以外，`main` 和 `renderer` 在安装过程中都是相似的。两者都使用 `babel-preset-env` 来针对 `node@7` 的功能特性、使用`babili`、并把所有的模块都视为 `externals`。 4 | 5 | ### `.electron-vue/webpack.main.config.js` 6 | 7 | 针对 electron 的 `main` 进程。这种配置是相当简单的，但确实包括一些常见的 `webpack` 做法。 8 | 9 | ### `.electron-vue/webpack.renderer.config.js` 10 | 11 | 针对 electron 的 `renderer` 进程。此配置用来处理你的 Vue 应用程序，因此它包含 `vue-loader` 和许多其他可在官方 `vuejs-templates/webpack` 样板中找到的配置。 12 | 13 | ##### 白名单里的外部组件 14 | 15 | 一个关于此配置的重要的事情是，你可以将特定的模块列入白名单，而不是把它视为 webpack 的 `externals`。并没有很多情况需要这个功能，但在某些情况下，对于提供原始的 `*.vue` 组件的 Vue UI 库，他们需要被列入白名单，以至于 `vue-loader` 能够编译它们。另一个使用情况是使用 webpack 的 `alias`，例如设置 `vue` 来导入完整的 编译+运行环境 的构建。因此，`vue` 已经在白名单中了。 16 | 17 | ### `.electron-vue/webpack.web.config.js` 18 | 19 | 针对为浏览器构建你的 `renderer` 进程的源代码。如果你需要把代码发布到网上，此配置则是其强大的起步基础。 **electron-vue 不支持更多其他的 Web 输出。** 与 Web 输出相关的 Issues 很可能会被推迟或关闭。 20 | -------------------------------------------------------------------------------- /docs/en/building_your_app.md: -------------------------------------------------------------------------------- 1 | # Building Your App 2 | 3 | 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. 4 | 5 | ## [`electron-packager`](using-electron-packager.md) 6 | 7 | If you are new to making electron applications or just need to create simple executables, then `electron-packager` is perfect for your needs. 8 | 9 | ## [`electron-builder`](using-electron-builder.md) 10 | 11 | If you are looking for full installers, auto-update support, CI building with Travis CI & AppVeyor, or automation of rebuilding native node modules, then `electron-builder` is what you will need. 12 | 13 | -------------------------------------------------------------------------------- /docs/cn/new-releases.md: -------------------------------------------------------------------------------- 1 | # 新版本 2 | 3 | electron-vue 自 2016年5月初 创建以来有了很大的发展，并引入了许多新奇的功能。你能相信有一段时间该项目还不支持 `vue-cli` 脚手架吗？新功能的开发计划不会停止。唯一的缺点是，每天都有华而不实的东西存在，进而把你的项目卡在一个老的脚手架上。尽管 electron-vue 利用了 `vue-cli` 的优势，遗憾的是，并没有一个结构化的方式来 _版本化_ (_version_) 样板 或 使其变得 _可更新_ (_updatable_)。 4 | 5 | electron-vue 的主要更新将通过 GitHub 的 里程碑 (Milestones) 进行，并将包含许多新的功能和错误的修复，这使得这些版本成为了最佳的 [迁移](/migration-guide.md) 契机，用来从任何现有项目转换为较新的架构。这些里程碑通常不是预先计划的，而是随着问题提交里的功能请求，在追踪问题的时候加上去的。 6 | 7 | ### 之前的里程碑 8 | 9 | #### [复用](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) 10 | 11 | * 迁移到 `webpack` 2 12 | * 支持 `electron-builder` 13 | * 支持 `main` 进程的捆绑 14 | * 一般的错误修复 15 | 16 | #### [简化](https://github.com/SimulatedGREG/electron-vue/issues/171) 17 | 18 | * 迁移到单一的 `package.json` 结构 19 | * 针对 `electron-builder` 用户的 Travis CI / AppVeyor 配置 20 | * `renderer` 进程的最小化网页输出 21 | * 迁移到 `axios` 22 | * 完全支持 `main` 进程捆绑 23 | * 重写开发和构建的脚本 24 | * 迁移到 `babili` 以避免完全反编译到 ES5 25 | * 在使用需要完整路径 \([`__static`](/using-static-assets.md)\) 的模块时支持 `static/` 资源 26 | -------------------------------------------------------------------------------- /docs/pt_BR/building_your_app.md: -------------------------------------------------------------------------------- 1 | # Construindo seu App 2 | 3 | electron-vue dá suporte aos dois [electron-packager](https://github.com/electron-userland/electron-packager) e [electron-builder](https://github.com/electron-userland/electron-builder) para construir e distruibir sua aplicação pronta para produção. As duas ferrametas para buildar são apoiadas pela incrível comunidade [@electron-userland](https://github.com/electron-userland) e tem uma documentação detalhada. Durante `vue-cli` a estruturação você será perguntado quanto ao builder que deseja usar. 4 | 5 | ## [`electron-packager`](using-electron-packager.md) 6 | 7 | Se você está contruindo uma nova aplicação electron ou apenas precisa criar um simples executável, então `electron-packager` é perfeito para você. 8 | 9 | ## [`electron-builder`](using-electron-builder.md) 10 | 11 | Se você está olhando para instaladores completos, auto-update suporte, construtores CI com Travis CI & AppVeyor, ou automação de reconstrução nativa de node modules, então `electron-builder` é o que você precisa. 12 | -------------------------------------------------------------------------------- /docs/ja/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 概要 2 | 3 | - [導入](./README.md) 4 | - [はじめに](getting_started.md) 5 | - [プロジェクト構造](project_structure.md) 6 | - [ファイルツリー](file-tree.md) 7 | - [レンダラープロセス](renderer-process.md) 8 | - [メインプロセス](main-process.md) 9 | - [Webpack 構成](webpack-configurations.md) 10 | - [開発](development.md) 11 | - [index.html](entry_indexhtml.md) 12 | - [Vue プラグイン](vue_accessories.md) 13 | - [NPM スクリプト](npm_scripts.md) 14 | - [CSS フレームワークの使用](using_css_frameworks.md) 15 | - [プリプロセッサの使用](using_pre-processors.md) 16 | - [静的アセットの使用](using-static-assets.md) 17 | - [ローカルファイルの読み書き](savingreading-local-files.md) 18 | - [アプリケーション構築](building_your_app.md) 19 | - [electron-packager の使用](using-electron-packager.md) 20 | - [electron-builder の使用](using-electron-builder.md) 21 | - [テスト](testing.md) 22 | - [ユニットテスト](unittesting.md) 23 | - [エンドツーエンドテスト](end-to-end_testing.md) 24 | - [メタ](meta.md) 25 | - [FAQ](faqs.md) 26 | - [新しいリリース](new-releases.md) 27 | - [マイグレーションガイド](migration-guide.md) 28 | - [貢献](contributing.md) 29 | -------------------------------------------------------------------------------- /docs/cn/npm_scripts.md: -------------------------------------------------------------------------------- 1 | # NPM 脚本 2 | 3 | 为了帮助你消除开发过程中的冗余任务，请注意一些可用的 NPM 脚本。以下命令应该运行在项目的根目录下。当然，你可以使用 `yarn run ` 的方式运行下列任何命令。 4 | 5 | ### `npm run build` 6 | 7 | 为了产品和打包来构建你的应用程序。更多信息可以在 [**构建你的应用程序**](building_your_app.md) 部分找到。 8 | 9 | ### `npm run dev` 10 | 11 | 在开发环境中运行程序 12 | 13 | ### `npm run lint` 14 | 15 | 静态分析所有在 `src/` 和 `test/` 下面的 JS 以及 Vue 组件文件。 16 | 17 | ### `npm run lint:fix` 18 | 19 | 静态分析所有在 `src/` 和 `test/` 下面的 JS 以及 Vue 组件文件并且尝试修复问题。 20 | 21 | ### `npm run pack` 22 | 23 | 同时运行 `npm run pack:main` 和 `npm run pack:renderer`。 虽然这些命令是可用的，但很少情况下，你需要手动执行此操作，因为 `npm run build` 将处理此步骤。 24 | 25 | ### `npm run pack:main` 26 | 27 | 运行 webpack 来打包 `main` 进程的源代码。 28 | 29 | ### `npm run pack:renderer` 30 | 31 | 运行 webpack 来打包 `renderer` 进程的源代码。 32 | 33 | ### `npm run unit` 34 | 35 | 运行使用了 Karma + Jasmine 的单元测试。更多信息请见 [**单元测试**](unittesting.md)。 36 | 37 | ### `npm run e2e` 38 | 39 | 运行使用了 Spectron + Mocha 的端对端测试。更多信息请见 [**端对端测试**](unittesting.md)。 40 | 41 | ### `npm test` 42 | 43 | 运行 `npm run unit` 和 `npm run e2e`. 更多信息请见 [**测试**](unittesting.md)。 44 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Greg Holguin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | node: true 10 | }, 11 | {{#if_eq eslintConfig 'standard'}} 12 | extends: 'standard', 13 | {{/if_eq}} 14 | {{#if_eq eslintConfig 'airbnb'}} 15 | extends: 'airbnb-base', 16 | {{/if_eq}} 17 | globals: { 18 | __static: true 19 | }, 20 | plugins: [ 21 | 'html' 22 | ], 23 | 'rules': { 24 | {{#if_eq eslintConfig 'standard'}} 25 | // allow paren-less arrow functions 26 | 'arrow-parens': 0, 27 | // allow async-await 28 | 'generator-star-spacing': 0, 29 | {{/if_eq}} 30 | {{#if_eq eslintConfig 'airbnb'}} 31 | 'global-require': 0, 32 | 'import/no-unresolved': 0, 33 | 'no-param-reassign': 0, 34 | 'no-shadow': 0, 35 | 'import/extensions': 0, 36 | 'import/newline-after-import': 0, 37 | 'no-multi-assign': 0, 38 | {{/if_eq}} 39 | // allow debugger during development 40 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /docs/ja/new-releases.md: -------------------------------------------------------------------------------- 1 | # 新しいリリース 2 | 3 | electron-vue は2016年5月に作成して以来、大きく進化し、多くの新しく素晴らしい機能を導入してきました。`vue-cli` のスキャフォールディングが提供されていない時があったことを信じられますか？新しい機能の開発はすぐに終了するつもりはありません。新しいオプション機能の唯一の欠点は、あなたのプロジェクトが古いスキャフォールディングから離れられないでいることです。electron-vue は `vue-cli` を使用しているため、残念ながら、ボイラープレートを*バージョンアップ* したり、*更新可能*にする構造化の方法はありません。 4 | 5 | electron-vue のメジャーアップデートは GitHub マイルストーンを介して行われ、一度に多くの新しい機能/バグ修正を含み、これらのリリースは既存のプロジェクトを新しくスキャフォールディングし、[移行](/migration-guide.md)するのに最適な時です。これらのマイルストーンは通常は計画されていませんが、機能要求が課題トラッカーに追加されると発生します。 6 | 7 | ### 過去のマイルストーン 8 | 9 | #### [複合化](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) 10 | 11 | - `webpack` 2 への移行 12 | - `electron-builder` のサポート 13 | - `main` プロセスバンドルのサポート 14 | - 全体的なバグ修正 15 | 16 | #### [最小化](https://github.com/SimulatedGREG/electron-vue/issues/171) 17 | 18 | - 単一の `package.json` 構造への移行 19 | - `electron-builder` ユーザー向けの Travis CI / AppVeyor 構成 20 | - `renderer` プロセスの最小 web 出力 21 | - `axios` への移行 22 | - `main` プロセスバンドルの完全サポート 23 | - 開発とビルドスクプリトの書き直し 24 | - ES5 へのトランスパイルの必要を取り除く `babili` への移行 25 | - フルパスを必要とするモジュールを使用する際の `static/` アセットをサポート ([`__static`](/using-static-assets.md)) 26 | -------------------------------------------------------------------------------- /docs/cn/main-process.md: -------------------------------------------------------------------------------- 1 | # 主进程 2 | 3 | > 在 Electron 中，运行 package.json 主脚本的过程称为主进程 (main process)。在主进程中运行的脚本可以通过创建网页来显示其图形化界面。 4 | 5 | **摘自** [**Electron 文档**](http://electron.atom.io/docs/tutorial/quick-start/#main-process) 6 | 7 | --- 8 | 9 | 由于 `main` 进程本质上是一个完整的 node 环境，所以除了以下两个文件之外，并没有什么初始的项目结构。 10 | 11 | #### `src/main/index.js` 12 | 13 | 这个文件是你应用程序的主文件，`electron` 也从这里启动。它也被用作 `webpack` 产品构建的入口文件。所有的 `main` 进程工作都应该从这里开始。 14 | 15 | #### `app/src/main/index.dev.js` 16 | 17 | 这个文件专门用于开发阶段，因为它会安装 `electron-debug` 和 `vue-devtools`。一般不需要修改此文件，但它可以用于扩展你开发的需求。 18 | 19 | ## 关于 `__dirname` 与 `__filename` 的使用 20 | 21 | 由于 `main` 进程是使用 `webpack` 来绑定的，所以使用 `__dirname` 和 `__filename` **将不会** 在产品阶段给你提供一个预期的值。若参考 [**文件树**](/file-tree.md) 你会注意到，在产品阶段，`main.js` 被放在了 `dist/electron` 文件夹里面。应根据此点相应地使用 `__dirname` 和 `__filename`。 22 | 23 | **如果你需要 `static/` 资源目录的路径，请务必阅读** [**使用静态资源**](/using-static-assets.md) **学习了解非常方便的 `__static` 变量。** 24 | 25 | 26 | ``` 27 | app.asar 28 | ├─ dist 29 | │ └─ electron 30 | │ ├─ static/ 31 | │ ├─ index.html 32 | │ ├─ main.js 33 | │ └─ renderer.js 34 | ├─ node_modules/ 35 | └─ package.json 36 | ``` 37 | -------------------------------------------------------------------------------- /docs/en/migration-guide.md: -------------------------------------------------------------------------------- 1 | # Migration Guide 2 | 3 | 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. 4 | 5 | 1. Scaffold a fresh version of electron-vue using `vue init simulatedgreg/electron-vue my-project` 6 | 2. Copy over current project `src` files into the new scaffold's `src` directory 7 | 3. Copy over `package.json` dependencies from current project to the new scaffold's `package.json` 8 | 4. Install dependencies with `yarn` or `npm install` 9 | 5. Run project in development mode \(`yarn run dev` or `npm run dev`\) 10 | 6. Watch console for errors to fix 11 | 12 | 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. 13 | 14 | -------------------------------------------------------------------------------- /docs/ko/migration-guide.md: -------------------------------------------------------------------------------- 1 | # Migration Guide 2 | 3 | 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. 4 | 5 | 1. Scaffold a fresh version of electron-vue using `vue init simulatedgreg/electron-vue my-project` 6 | 2. Copy over current project `src` files into the new scaffold's `src` directory 7 | 3. Copy over `package.json` dependencies from current project to the new scaffold's `package.json` 8 | 4. Install dependencies with `yarn` or `npm install` 9 | 5. Run project in development mode \(`yarn run dev` or `npm run dev`\) 10 | 6. Watch console for errors to fix 11 | 12 | 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. 13 | 14 | -------------------------------------------------------------------------------- /docs/cn/file-tree.md: -------------------------------------------------------------------------------- 1 | # 文件树 2 | 3 | ### 在开发过程中 4 | 5 | **注意**: 某些文件或文件夹可能会根据在 `vue-cli` 脚手架中所选设置的不同而有所不同。 6 | 7 | ``` 8 | my-project 9 | ├─ .electron-vue 10 | │ └─ .js files 11 | ├─ build 12 | │ └─ icons/ 13 | ├─ dist 14 | │ ├─ electron/ 15 | │ └─ web/ 16 | ├─ node_modules/ 17 | ├─ src 18 | │ ├─ main 19 | │ │ ├─ index.dev.js 20 | │ │ └─ index.js 21 | │ ├─ renderer 22 | │ │ ├─ components/ 23 | │ │ ├─ router/ 24 | │ │ ├─ store/ 25 | │ │ ├─ App.vue 26 | │ │ └─ main.js 27 | │ └─ index.ejs 28 | ├─ static/ 29 | ├─ test 30 | │ ├─ e2e 31 | │ │ ├─ specs/ 32 | │ │ ├─ index.js 33 | │ │ └─ utils.js 34 | │ ├─ unit 35 | │ │ ├─ specs/ 36 | │ │ ├─ index.js 37 | │ │ └─ karma.config.js 38 | │ └─ .eslintrc 39 | ├─ .babelrc 40 | ├─ .eslintignore 41 | ├─ .eslintrc.js 42 | ├─ .gitignore 43 | ├─ package.json 44 | └─ README.md 45 | ``` 46 | 47 | #### 产品构建 48 | 49 | ``` 50 | app.asar 51 | ├─ dist 52 | │ └─ electron 53 | │ ├─ static/ 54 | │ ├─ index.html 55 | │ ├─ main.js 56 | │ └─ renderer.js 57 | ├─ node_modules/ 58 | └─ package.json 59 | ``` 60 | 61 | 可以说，几乎所有的东西都在最终的产品构建中被删除。在分发 electron 应用程序时，这几乎是强制性的，因为你不希望用户下载拥有庞大文件的臃肿的软件。 62 | -------------------------------------------------------------------------------- /docs/en/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | 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. 4 | 5 | ## [Unit testing](unittesting.md) 6 | 7 | Run unit tests with Karma + Mocha 8 | 9 | ```bash 10 | npm run unit 11 | ``` 12 | 13 | ## [End-to-end testing](end-to-end_testing.md) 14 | 15 | Run end-to-end tests with Spectron + Mocha 16 | 17 | ```bash 18 | npm run e2e 19 | ``` 20 | 21 | ## Running all tests 22 | 23 | ```bash 24 | npm test 25 | ``` 26 | 27 | ### On the subject of CI testing 28 | 29 | 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. 30 | 31 | -------------------------------------------------------------------------------- /docs/pt_BR/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | 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. 4 | 5 | ## [Unit testing](unittesting.md) 6 | 7 | Run unit tests with Karma + Mocha 8 | 9 | ```bash 10 | npm run unit 11 | ``` 12 | 13 | ## [End-to-end testing](end-to-end_testing.md) 14 | 15 | Run end-to-end tests with Spectron + Mocha 16 | 17 | ```bash 18 | npm run e2e 19 | ``` 20 | 21 | ## Running all tests 22 | 23 | ```bash 24 | npm test 25 | ``` 26 | 27 | ### On the subject of CI testing 28 | 29 | 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. 30 | 31 | -------------------------------------------------------------------------------- /docs/ja/webpack-configurations.md: -------------------------------------------------------------------------------- 1 | # Webpack構成 2 | 3 | electron-vue には `.electron-vue/` ディレクトリに置かれた3つの別々の webpack 設定ファイルが入っています。 `web` 出力のオプションは別として、 `main` と `renderer`はセットアップが似通っています。どちらも `node@7` の機能を対象にするために `babel-preset-env` と `babili` を使用し、全てのモジュールを `externals` として扱います。 4 | 5 | ### `.electron-vue/webpack.main.config.js` 6 | 7 | electron の `main` プロセスを対象にします。この構成はかなり最低限ですが、いくつかの一般的な `webpack` のプラクティスが含まれています。 8 | 9 | ### `.electron-vue/webpack.renderer.config.js` 10 | 11 | electron の `renderer` プロセスを対象にします。この構成は Vue アプリケーションを取り扱うので、 `vue-loader` や公式の `vuejs-templates/webpack` ボイラープレートで使用可能なその他多くの構成が含まれます。 12 | 13 | ##### 外部依存のホワイトリスト化 14 | 15 | この構成について考慮すべき重要なことの1つは、特定のモジュールを webpack `externals` として扱わないようにホワイトリストに登録できることです。この機能性が必要になるユースケースはあまりありませんが、 `*.vue` コンポーネントそのままを提供する Vue UI ライブラリーの場合は、ホワイトリストに登録が必要なため、 `vue-loader` はそれらをコンパイルできます。もう1つのユースケースは、フルコンパイラとランタイムビルドをインポートするために `vue` を設定するなどのような webpack の `alias` を使用する場合です。このため、 `vue` はすでにホワイトリストに入っています。 16 | 17 | ### `.electron-vue/webpack.web.config.js` 18 | 19 | ブラウザ用に `renderer` プロセスのソースコードをビルド対象にします。この設定は web に公開する必要がある場合に強力な開始基盤として提供されています。**electron-vue は提供されているもの以上の web 出力をサポートしていません。**web 出力に関する課題は延期されるかクローズする可能性が高いでしょう。 20 | -------------------------------------------------------------------------------- /docs/cn/savingreading-local-files.md: -------------------------------------------------------------------------------- 1 | # 读写本地文件 2 | 3 | 使用 `electron` 的一大好处是可以访问用户的文件系统。这使你可以读取和写入本地系统上的文件。为了避免 Chromium 的限制以及对应用程序内部文件的改写，请确保使用 `electron` 的 API，特别是 [`app.getPath(name)`](https://electron.atom.io/docs/api/app/#appgetpathname) 函数。这个帮助函数可以使你获得指向系统目录的文件路径，如用户的桌面、系统临时文件 等等。 4 | 5 | ### 使用案例 6 | 7 | 假设我们想为我们的应用程序提供本地的数据库存储。在这个例子中，我们将用 [`nedb`](https://github.com/louischatriot/nedb) 作为演示。 8 | 9 | ```bash 10 | yarn add nedb # 或 npm install nedb --save 11 | ``` 12 | 13 | **src/renderer/datastore.js** 14 | 15 | 这里，我们设置 NeDB 并将其指向我们的 `userData` 目录。这个空间专门为我们的应用程序所保留，所以，我们可以确信，其他程序 或 与其他用户的交互不应该篡改这个文件空间。至此，我们可以在 `renderer` 进程中导入 `datastore.js` 并使用它。 16 | 17 | ```js 18 | import Datastore from 'nedb' 19 | import path from 'path' 20 | import { remote } from 'electron' 21 | 22 | export default new Datastore({ 23 | autoload: true, 24 | filename: path.join(remote.app.getPath('userData'), '/data.db') 25 | }) 26 | ``` 27 | 28 | **src/renderer/main.js** 29 | 30 | 为了更进一步，我们可以将数据存储导入到 `src/renderer/main.js` 里，并将其附加到 Vue 的 原型 (prototype) 上。通过在所有组件文件中使用 `this.$db`，我们现在可以访问数据存储的 API。 31 | 32 | ```js 33 | import db from './datastore' 34 | 35 | /* 其它代码 */ 36 | 37 | Vue.prototype.$db = db 38 | ``` 39 | -------------------------------------------------------------------------------- /docs/en/meta.md: -------------------------------------------------------------------------------- 1 | # Meta 2 | 3 | ### Thank You 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | #### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/ko/meta.md: -------------------------------------------------------------------------------- 1 | # Meta 2 | 3 | ### Thank You 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | #### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/cn/project_structure.md: -------------------------------------------------------------------------------- 1 | # 项目结构 2 | 3 | 当涉及制作 electron 应用程序的问题时，项目结构会有些不同。如果你以前使用过官方的 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) 设置，那么你对这个结构应该很熟悉。本文档在此章节将尝试解释样板代码的工作原理以及应用程序在构建中的一些区别。 4 | 5 | ### 单一的 `package.json` 设置 6 | 7 | 就在不久之前，两个 `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` 设置。 8 | 9 | #### `dependencies` 10 | 11 | 这些依赖项 **将会被** 包含在你最终产品的应用程序中。所以，如果你的应用程序需要某个模块才能运行，那么请在此安装！ 12 | 13 | #### `devDependencies` 14 | 15 | 这些依赖项 **不会被** 包含在你最终产品的应用程序中。在这里，你可以安装专门用于开发的模块，如构建脚本、`webpack` 加载器等等。 16 | 17 | #### 安装原生 NPM 模块 18 | 19 | 我们需要确保我们本地的 npm 模块是针对 electron 来构建的。为了做到这一点，我们可以使用 [`electron-rebuild`](https://github.com/electron/electron-rebuild)，但是为了使事情变得更简单，我们强烈建议使用 [`electron-builder`](https://github.com/electron-userland/electron-builder) 作为你的构建工具，因为它会为你处理很多任务。 20 | 21 | ### 关于 `main` 进程 22 | 23 | 在开发过程中，你可能会注意到 `src/main/index.dev.js`。该文件专门用于开发以及安装开发工具。原则上，该文件不应该被修改，但是可以被用来扩展你的开发需求。在构建的过程中，`webpack` 将介入其中并创建一个的捆绑，以 `src/main/index.js` 作为该捆绑的入口文件。 24 | -------------------------------------------------------------------------------- /docs/en/using_css_frameworks.md: -------------------------------------------------------------------------------- 1 | # Using CSS Frameworks 2 | 3 | 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. 4 | 5 | ## Use Case 6 | 7 | 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`. 8 | 9 | #### Example 10 | 11 | Let's install `bulma` 12 | 13 | ```bash 14 | npm install bulma --save 15 | ``` 16 | 17 | Then inside `src/renderer/main.js` let's add this line. 18 | 19 | ```bash 20 | import 'bulma/css/bulma.css' 21 | ``` 22 | 23 | Alternatively, you can also include `bulma` from inside a component file. 24 | 25 | **App.vue** 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | Now `webpack` will know to load in `bulma` for our application and make it available in our production builds. 34 | 35 | -------------------------------------------------------------------------------- /docs/pt_BR/using_css_frameworks.md: -------------------------------------------------------------------------------- 1 | # Using CSS Frameworks 2 | 3 | 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. 4 | 5 | ## Use Case 6 | 7 | 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`. 8 | 9 | #### Example 10 | 11 | Let's install `bulma` 12 | 13 | ```bash 14 | npm install bulma --save 15 | ``` 16 | 17 | Then inside `src/renderer/main.js` let's add this line. 18 | 19 | ```bash 20 | import 'bulma/css/bulma.css' 21 | ``` 22 | 23 | Alternatively, you can also include `bulma` from inside a component file. 24 | 25 | **App.vue** 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | Now `webpack` will know to load in `bulma` for our application and make it available in our production builds. 34 | 35 | -------------------------------------------------------------------------------- /docs/cn/unittesting.md: -------------------------------------------------------------------------------- 1 | # 单元测试 2 | 3 | 对于进行单元测试，electron-vue 使用 [Karma](https://karma-runner.github.io/1.0/index.html) 作为测试的运行器，使用 [Mocha](https://mochajs.org/) \(与 [Chai](http://chaijs.com/)\ 作为测试框架。 4 | 5 | Mocha 和 Chai 分别使用 `karma-mocha` 和 `karma-chai` 进行集成，所以所有的 API（例如 `expect`）都可以在测试文件中全局使用。 6 | 7 | ### 运行测试 8 | 9 | ```bash 10 | # 开始 Karma 11 | npm run unit 12 | ``` 13 | 14 | ### 文件结构 15 | 16 | ``` 17 | my-project 18 | ├─ test 19 | | ├─ unit 20 | │ │ ├─ specs/ 21 | │ │ ├─ index.js 22 | └─ └─ └─ karma.conf.js 23 | ``` 24 | 25 | **在大多数情况下，你可以忽略** `index.js` **和** `karma.conf.js` **，只专注于编写** `specs/` **。** 26 | 27 | #### `specs/` 28 | 29 | 这个目录里面是编写实际测试代码的地方。由于 Webpack 的强大功能，你可以完全依照 ES2015 和 其支持的加载程序编写。 30 | 31 | #### `index.js` 32 | 33 | 这是 `karma-webpack` 使用的入口文件。该文件的目的是一次性收集加载所有的测试和源代码。 34 | 35 | #### `karma.conf.js` 36 | 37 | 在这里，你可以找到实际的 `karma` 配置，并使用 spec/coverage 记录器进行设置。你可以根据 [karma 官方文档](http://karma-runner.github.io/1.0/config/configuration-file.html) 进一步定制。 38 | 39 | ### Mocking Dependencies 40 | 41 | electron-vue 默认安装 [`inject-loader`](https://github.com/plasticine/inject-loader)。有关使用 Vue 组件文件的信息，请参阅 [`vue-loader' 的测试与仿真文档](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html)。 42 | -------------------------------------------------------------------------------- /docs/ja/file-tree.md: -------------------------------------------------------------------------------- 1 | # ファイルツリー 2 | 3 | ### 開発中 4 | 5 | **注**: 一部のファイル/フォルダは `vue-cli` スキャフォールディングで選択した設定に応じて異なる場合があります。 6 | 7 | ``` 8 | my-project 9 | ├─ .electron-vue 10 | │ └─ .js files 11 | ├─ build 12 | │ └─ icons/ 13 | ├─ dist 14 | │ ├─ electron/ 15 | │ └─ web/ 16 | ├─ node_modules/ 17 | ├─ src 18 | │ ├─ main 19 | │ │ ├─ index.dev.js 20 | │ │ └─ index.js 21 | │ ├─ renderer 22 | │ │ ├─ components/ 23 | │ │ ├─ router/ 24 | │ │ ├─ store/ 25 | │ │ ├─ App.vue 26 | │ │ └─ main.js 27 | │ └─ index.ejs 28 | ├─ static/ 29 | ├─ test 30 | │ ├─ e2e 31 | │ │ ├─ specs/ 32 | │ │ ├─ index.js 33 | │ │ └─ utils.js 34 | │ ├─ unit 35 | │ │ ├─ specs/ 36 | │ │ ├─ index.js 37 | │ │ └─ karma.config.js 38 | │ └─ .eslintrc 39 | ├─ .babelrc 40 | ├─ .eslintignore 41 | ├─ .eslintrc.js 42 | ├─ .gitignore 43 | ├─ package.json 44 | └─ README.md 45 | ``` 46 | 47 | #### 本番ビルド 48 | 49 | ``` 50 | app.asar 51 | ├─ dist 52 | │ └─ electron 53 | │ ├─ static/ 54 | │ ├─ index.html 55 | │ ├─ main.js 56 | │ └─ renderer.js 57 | ├─ node_modules/ 58 | └─ package.json 59 | ``` 60 | 61 | おそらくお分かりの通り、ほとんどすべてが最終的な本番ビルドでは取り除かれます。electron アプリケーションを配布する際は、大きいファイルサイズのソフトウェアをユーザーにダウンロードさせたくないので、これはほとんど必須です。 62 | -------------------------------------------------------------------------------- /docs/ko/webpack-configurations.md: -------------------------------------------------------------------------------- 1 | # Webpack Configurations 2 | 3 | electron-vue에는 `.electron-vue/` 디렉토리에 위치한 별도의 webpack 설정 파일이 세개가 있습니다. `web` 출력의 선택적 사용을 제외하고, `main`과 `renderer`는 비슷한 설정 입니다. 둘 다 모든 모듈을 `externals`로 처리하고 babil을 사용하며 `node@7` 기능을 타겟으로 `babel-preset-env`을 사용합니다. 4 | 5 | ### `.electron-vue/webpack.main.config.js` 6 | 7 | electron의 `main` 프로세스가 타겟입니다. 이 구성은 다소 모자라지만 일반적인 `webpack` 관례를 포함합니다. 8 | 9 | ### `.electron-vue/webpack.renderer.config.js` 10 | 11 | electron의 `renderer` 프로세스가 타겟입니다. 이 configurationd은 Vue 애플리케이션을 다룹니다. 그래서 `vue-loader`와 공식 `vuejs-templates/webpack` 보일러플레이트에서 사용 가능한 많은 configurations를 포함합니다. 12 | 13 | ##### White-listing Externals 14 | 15 | 이 설정에 대해 고려해야 할 중요한 점 중 하나는 webpack `externals`로 취급하지 않는 특정 모듈을 whitelist에 추가 할 수 있다는 점입니다. 이 기능이 필요한 use case는 많지 않지만 가공하지 않는 `*.vue` components를 제공하는 Vue UI 라이브러리의 경우 허용목록(whitelist)에 있어야합니다. 그래야 `vue-loader`은 컴파일 할 수 있습니다. 또 다른 use case는 전체 컴파일러 + 런타임 빌드를 가져오기 위해 vue를 설정하는 것과 같은 webpack `alias`을 사용하는 것입니다. 이 때문에 `vue`는 이미 허용목록에 있습니다. 16 | 17 | ### `.electron-vue/webpack.web.config.js` 18 | 19 | 브라우저를 위한 `renderer` 프로세스 소스 코드 빌드가 타겟입니다. 이 config은 웹 배포가 필요한 경우 강력한 시작 기반을 제공합니다. **electron-vue은 제공되던 웹 출력을 더 이상 지원하지 않습니다.** 웹 출력과 관련된 문제는 지연되거나 닫힐 가능성이 높습니다. -------------------------------------------------------------------------------- /docs/en/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](./README.md) 4 | * [Getting Started](getting_started.md) 5 | * [Project Structure](project_structure.md) 6 | * [File Tree](file-tree.md) 7 | * [Renderer Process](renderer-process.md) 8 | * [Main Process](main-process.md) 9 | * [Webpack Configurations](webpack-configurations.md) 10 | * [Development](development.md) 11 | * [Entry index.html](entry_indexhtml.md) 12 | * [Vue Plugins](vue_accessories.md) 13 | * [NPM Scripts](npm_scripts.md) 14 | * [Using CSS Frameworks](using_css_frameworks.md) 15 | * [Using Pre-Processors](using_pre-processors.md) 16 | * [Using Static Assets](using-static-assets.md) 17 | * [Read & Write Local Files](savingreading-local-files.md) 18 | * [Debugging](debugging-production.md) 19 | * [Building Your App](building_your_app.md) 20 | * [Using electron-packager](using-electron-packager.md) 21 | * [Using electron-builder](using-electron-builder.md) 22 | * [Testing](testing.md) 23 | * [Unit Testing](unittesting.md) 24 | * [End-to-End Testing](end-to-end_testing.md) 25 | * [Meta](meta.md) 26 | * [FAQs](faqs.md) 27 | * [New Releases](new-releases.md) 28 | * [Migration Guide](migration-guide.md) 29 | * [Contributing](contributing.md) 30 | 31 | -------------------------------------------------------------------------------- /docs/ko/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](./README.md) 4 | * [Getting Started](getting_started.md) 5 | * [Project Structure](project_structure.md) 6 | * [File Tree](file-tree.md) 7 | * [Renderer Process](renderer-process.md) 8 | * [Main Process](main-process.md) 9 | * [Webpack Configurations](webpack-configurations.md) 10 | * [Development](development.md) 11 | * [Entry index.html](entry_indexhtml.md) 12 | * [Vue Plugins](vue_accessories.md) 13 | * [NPM Scripts](npm_scripts.md) 14 | * [Using CSS Frameworks](using_css_frameworks.md) 15 | * [Using Pre-Processors](using_pre-processors.md) 16 | * [Using Static Assets](using-static-assets.md) 17 | * [Read & Write Local Files](savingreading-local-files.md) 18 | * [Debugging](debugging-production.md) 19 | * [Building Your App](building_your_app.md) 20 | * [Using electron-packager](using-electron-packager.md) 21 | * [Using electron-builder](using-electron-builder.md) 22 | * [Testing](testing.md) 23 | * [Unit Testing](unittesting.md) 24 | * [End-to-End Testing](end-to-end_testing.md) 25 | * [Meta](meta.md) 26 | * [FAQs](faqs.md) 27 | * [New Releases](new-releases.md) 28 | * [Migration Guide](migration-guide.md) 29 | * [Contributing](contributing.md) 30 | 31 | -------------------------------------------------------------------------------- /docs/ja/npm_scripts.md: -------------------------------------------------------------------------------- 1 | # NPM スクリプト 2 | 3 | 開発プロセスに関する冗長なタスクを排除するために、役立つ NPM スクリプトに注目してください。次のコマンドは、プロジェクトのルートディレクトリから実行する必要があります。そしてもちろん、以下のコマンドのどれでも `yarn run ` を使用して実行することが可能です。 4 | 5 | ### `npm run build` 6 | 7 | 本番用にアプリケーションをビルドし、パッケージングします。詳細は [**アプリケーションのビルド**](building_your_app.md) セクションを参照してください。 8 | 9 | ### `npm run dev` 10 | 11 | 開発用にアプリケーションを実行します。 12 | 13 | ### `npm run lint` 14 | 15 | 全ての `src/` と `test/` の JS と Vue コンポーネントファイルをリントします。 16 | 17 | ### `npm run lint:fix` 18 | 19 | 全ての `src/` と `test/` の JS と Vue コンポーネントファイルをリントし、問題を解決しようとします。 20 | 21 | ### `npm run pack` 22 | 23 | `npm run pack:main` と `npm run pack:renderer` の両方を実行します。これらのコマンドは利用可能ですが、`npm run build` がこのステップを処理するため、手動で実行する場面はそれほど多くありません。 24 | 25 | ### `npm run pack:main` 26 | 27 | `main` プロセスのソースコードをビルドするために webpack を実行します。 28 | 29 | ### `npm run pack:renderer` 30 | 31 | `renderer` プロセスのソースコードをビルドするために webpack を実行します。 32 | 33 | ### `npm run unit` 34 | 35 | Karma と Jasmine でユニットテストを実行します。詳細は[**ユニットテスト**](unittesting.md)を参照してください。 36 | 37 | ### `npm run e2e` 38 | 39 | Spectron と Mocha でE2Eテストを実行します。詳細は[**E2Eテスト**](end-to-end_testing.md)を参照してください。 40 | 41 | ### `npm test` 42 | 43 | `npm run unit` と `npm run e2e` の両方を実行します。詳細は[**テスト**](testing.md)を参照してください。 44 | -------------------------------------------------------------------------------- /docs/ko/file-tree.md: -------------------------------------------------------------------------------- 1 | # 파일 트리 2 | 3 | ### 개발 파일 트리 4 | 5 | **Note**: 일부 파일,폴더는 `vue-cli` 스캐폴딩 중 선택한 설정에 따라 다를 수 있습니다.. 6 | 7 | ``` 8 | my-project 9 | ├─ .electron-vue 10 | │ └─ .js files 11 | ├─ build 12 | │ └─ icons/ 13 | ├─ dist 14 | │ ├─ electron/ 15 | │ └─ web/ 16 | ├─ node_modules/ 17 | ├─ src 18 | │ ├─ main 19 | │ │ ├─ index.dev.js 20 | │ │ └─ index.js 21 | │ ├─ renderer 22 | │ │ ├─ components/ 23 | │ │ ├─ router/ 24 | │ │ ├─ store/ 25 | │ │ ├─ App.vue 26 | │ │ └─ main.js 27 | │ └─ index.ejs 28 | ├─ static/ 29 | ├─ test 30 | │ ├─ e2e 31 | │ │ ├─ specs/ 32 | │ │ ├─ index.js 33 | │ │ └─ utils.js 34 | │ ├─ unit 35 | │ │ ├─ specs/ 36 | │ │ ├─ index.js 37 | │ │ └─ karma.config.js 38 | │ └─ .eslintrc 39 | ├─ .babelrc 40 | ├─ .eslintignore 41 | ├─ .eslintrc.js 42 | ├─ .gitignore 43 | ├─ package.json 44 | └─ README.md 45 | ``` 46 | 47 | #### 프로덕션 빌드 파일 트리 48 | 49 | ``` 50 | app.asar 51 | ├─ dist 52 | │ └─ electron 53 | │ ├─ static/ 54 | │ ├─ index.html 55 | │ ├─ main.js 56 | │ └─ renderer.js 57 | ├─ node_modules/ 58 | └─ package.json 59 | ``` 60 | 61 | 여러분도 알 수 있듯이 거의 모든 것이 최종 프로덕션 빌드에서 제거 됩니다. 사용자가 큰 파일 크기로 부푼 소프트웨어를 다운로드하는 것을 원하지 않으므로 electron 앱을 배포 할 때는 거의 필수 입니다. 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /docs/pt_BR/meta.md: -------------------------------------------------------------------------------- 1 | # Meta 2 | 3 | ### Obrigado 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | #### [**PayPal.me**](https://www.paypal.me/simulatedgreg/5) 10 | -------------------------------------------------------------------------------- /docs/ja/main-process.md: -------------------------------------------------------------------------------- 1 | # メインプロセス 2 | 3 | > Electron では、package.json のメインスクリプトを実行するプロセスをメインプロセスと呼びます。メインプロセスで実行されるスクリプトは、Web ページを作成して GUI を表示できます。 4 | 5 | [**Electron ドキュメンテーション**](http://electron.atom.io/docs/tutorial/quick-start/#main-process)**より ** 6 | 7 | --- 8 | 9 | `main` プロセスは根本的に完全な Node 環境なので、2つのファイル以外の初期プロジェクト構造は存在しません。 10 | 11 | #### `src/main/index.js` 12 | 13 | このファイルはアプリケーションのメインファイルであり、 `electron` が起動するファイルです。本番向けの `webpack` のエントリーファイルとしても使われます。すべての `main` プロセスの作業はここから開始しなければなりません。 14 | 15 | #### `app/src/main/index.dev.js` 16 | 17 | このファイルは開発時にのみ `electron-debug` と `vue-devtools`をインストールするために使われます。このファイルを修正する必要はありませんが、開発の必要に応じて拡張することもできます。 18 | 19 | ## `__dirname` と `__filename` の使用について 20 | 21 | `main` プロセスは `webpack` を使用してバンドルされているため、`__dirname` と `__filename` を使用しても本番環境で期待した値は得られ **ないでしょう**。[**ファイルツリー**](/file-tree.md) を参照すると、本番環境では `main.js` が `dist/electron` フォルダの中に置かれていることがわかるでしょう。この知識に基づいて、`__dirname` と `__filename` を適切に使用してください。 22 | 23 | **`static/` アセットディレクトリへのパスが必要な場合は、**[**静的なアセットの使用**](/using-static-assets.md)** を参照して、とても便利な `__static` 変数について学んでください。** 24 | 25 | ``` 26 | app.asar 27 | ├─ dist 28 | │ └─ electron 29 | │ ├─ static/ 30 | │ ├─ index.html 31 | │ ├─ main.js 32 | │ └─ renderer.js 33 | ├─ node_modules/ 34 | └─ package.json 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/ko/npm_scripts.md: -------------------------------------------------------------------------------- 1 | # NPM Scripts 2 | 3 | 개발 프로세스에 대한 중복 작업을 제거하려면, 사용 가능한 NPM 스크립트 중 일부를 기록해 두세요. 다음 명령은 프로젝트의 루트 디렉토리에서 실행해야합니다. `yarn run `를 사용하여 아래 명령어 중 하나를 실행할 수도 있습니다. 4 | 5 | ### `npm run build` 6 | 7 | 프로덕션과 패키지 용 앱을 빌드 합니다. 더 자세한 정보는 [**Building Your App**](building_your_app.md) 섹션을 참조하세요. 8 | 9 | ### `npm run dev` 10 | 11 | 개발 중인 앱을 실행합니다. 12 | 13 | ### `npm run lint` 14 | 15 | 모든 `src/`와 `test/`의 JS & Vue component 파일을 Lint 합니다. 16 | 17 | ### `npm run lint:fix` 18 | 19 | 모든 `src/`와 `test/`의 JS & Vue component 파일을 Lint하고 문재 해결을 시도합니다. 20 | 21 | ### `npm run pack` 22 | 23 | `npm run pack:main` & `npm run pack:renderer` 둘 다 실행합니다. 이러한 명령어를 사용 할 수 있지만, `npm run build`로 이 단계를 처리 할 때 수동으로 수행하는 경우는 많지 않습니다. 24 | 25 | ### `npm run pack:main` 26 | 27 | `main` 프로세스 소스 코드를 번들하기 위해 webpack을 실행합니다. 28 | 29 | ### `npm run pack:renderer` 30 | 31 | `renderer` 프로세스 소스 코드를 번들하기 위해 webpack을 실행합니다. 32 | 33 | ### `npm run unit` 34 | 35 | Karma와 Jasmine로 단위 테스트를 실행합니다. 자세한 내용은 [**Unit Testing**](unittesting.md)를 참조하세요. 36 | 37 | ### `npm run e2e` 38 | 39 | Spectron + Mocha로 end-to-end 테스트를 실행합니다. 자세한 내용은 [**End-to-end Testing**](end-to-end_testing.md)를 참조하세요. 40 | 41 | ### `npm test` 42 | 43 | `npm run unit` & `npm run e2e` 둘 다 실행합니다. 자세한 내용은 [**Testing**](testing.md)을 참조하세요. 44 | -------------------------------------------------------------------------------- /docs/ko/main-process.md: -------------------------------------------------------------------------------- 1 | # Main Process 2 | 3 | > Electron에서 package.json의 main 스크립트를 실행하는 프로세스를 main 프로세스라고 합니다. main 프로세스에서 실행되는 스크립트는 웹 페이지를 생성하여 GUI를 표시 할 수 있습니다. 4 | 5 | [**Electron 문서**](http://electron.atom.io/docs/tutorial/quick-start/#main-process)**로 부터** 6 | 7 | --- 8 | 9 | `main` 프로세스는 근본적으로 완전한 Node 환경이기 때문에 두 파일 이외의 초기 프로젝트 구조는 존재하지 않습니다. 10 | 11 | #### `src/main/index.js` 12 | 13 | 이 파일은 애플리케이션의 main 파일이며 `electron`을 부팅하는 파일 입니다. `webpack`의 프로덕션 용 엔트리 파일로도 사용됩니다. 모든 `main` 프로세스 작업은 여기서 시작해야 합니다. 14 | 15 | #### `app/src/main/index.dev.js` 16 | 17 | 이 파일은 특별히 `electron-debug` & `vue-devtools`를 설치하기 때문에 개발에만 사용됩니다. 이 파일을 수정할 필요가 없지만 개발 요구사항을 확장하는 데 사용할 수 있습니다. 18 | 19 | ## `__dirname` & `__filename` 사용에 관하여 20 | 21 | `webpack`을 사용하여 `main` 프로세스는 번들되기 때문에, `__dirname` & `__filename`은 프로덕션에서 예상 값을 **제공하지 않습니다**. [**File Tree**](/file-tree.md)를 보면, main.js가 `dist/electron` 폴더 안에 위치 함을 알 수 있습니다. 이 지식을 바탕으로 적절하게 `__dirname` & `__filename`를 사용하세요. 22 | 23 | `static/` **assets 디렉토리에 대한 경로가 필요한 경우, **[**Static Assets 사용법**](/using-static-assets.md)을 읽으세요. __static 변수는 정말 유용합니다.** 24 | 25 | ``` 26 | app.asar 27 | ├─ dist 28 | │ └─ electron 29 | │ ├─ static/ 30 | │ ├─ index.html 31 | │ ├─ main.js 32 | │ └─ renderer.js 33 | ├─ node_modules/ 34 | └─ package.json 35 | ``` 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/ja/global_configuration.md: -------------------------------------------------------------------------------- 1 | # Global Configuration 2 | 3 | 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`. 4 | 5 | #### `config.js` 6 | 7 | **Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. 8 | 9 | ```js 10 | { 11 | // Name of electron app 12 | // Will be used in production builds 13 | name: 'app', 14 | // Use ESLint 15 | // Further changes can be made in `.eslintrc.js` 16 | eslint: true, 17 | // webpack-dev-server port 18 | port: 9080, 19 | // electron-packager options 20 | // See `Building you app` for more info 21 | building: { 22 | arch: 'x64', 23 | asar: true, 24 | dir: path.join(__dirname, 'app'), 25 | icon: path.join(__dirname, 'app/icons/icon'), 26 | ignore: /\b(src|index\.ejs|icons)\b/, 27 | name: pkg.name, 28 | out: path.join(__dirname, 'builds'), 29 | overwrite: true, 30 | platform: process.env.PLATFORM_TARGET || 'all' 31 | } 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/pt_BR/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Sumário 2 | 3 | * [Introdução](./README.md) 4 | * [Início "Rápido"](getting_started.md) 5 | * [Estrutura de Projeto](project_structure.md) 6 | * [Árvore de Arquivos](file-tree.md) 7 | * [Processo de Renderização](renderer-process.md) 8 | * [Processo Primário](main-process.md) 9 | * [Configurações Webpack](webpack-configurations.md) 10 | * [Desenvolvimento](development.md) 11 | * [Acesso index.html](entry_indexhtml.md) 12 | * [Vue Plugins](vue_accessories.md) 13 | * [NPM Scripts](npm_scripts.md) 14 | * [Utilizando CSS Frameworks](using_css_frameworks.md) 15 | * [Utilizando Pre-Processors](using_pre-processors.md) 16 | * [Utilizando Arquivos (imagens e coisas parecidas) Estáticos](using-static-assets.md) 17 | * [Lendo & Escrevendo Arquivos Locais](savingreading-local-files.md) 18 | * [ Seu App](building_your_app.md) 19 | * [Usando electron-packager](using-electron-packager.md) 20 | * [Usando electron-builder](using-electron-builder.md) 21 | * [Testando](testing.md) 22 | * [Teste unitário](unittesting.md) 23 | * [End-to-End teste](end-to-end_testing.md) 24 | * [Meta](meta.md) 25 | * [Perguntas Frequentes](faqs.md) 26 | * [Novas Atualizações](new-releases.md) 27 | * [Guia de Migração](migration-guide.md) 28 | * [Contribuindo](contributing.md) 29 | -------------------------------------------------------------------------------- /docs/pt_BR/global_configuration.md: -------------------------------------------------------------------------------- 1 | # Configuração Global 2 | 3 | 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`. 4 | 5 | #### `config.js` 6 | **Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. 7 | 8 | ```js 9 | { 10 | // Name of electron app 11 | // Will be used in production builds 12 | name: 'app', 13 | 14 | // Use ESLint 15 | // Further changes can be made in `.eslintrc.js` 16 | eslint: true, 17 | 18 | // webpack-dev-server port 19 | port: 9080, 20 | 21 | // electron-packager options 22 | // See `Building you app` for more info 23 | building: { 24 | arch: 'x64', 25 | asar: true, 26 | dir: path.join(__dirname, 'app'), 27 | icon: path.join(__dirname, 'app/icons/icon'), 28 | ignore: /\b(src|index\.ejs|icons)\b/, 29 | name: pkg.name, 30 | out: path.join(__dirname, 'builds'), 31 | overwrite: true, 32 | platform: process.env.PLATFORM_TARGET || 'all' 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/cn/global_configuration.md: -------------------------------------------------------------------------------- 1 | # Global Configuration 2 | 3 | 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`. 4 | 5 | #### `config.js` 6 | **Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. 7 | 8 | ```js 9 | { 10 | // Name of electron app 11 | // Will be used in production builds 12 | name: 'app', 13 | 14 | // Use ESLint 15 | // Further changes can be made in `.eslintrc.js` 16 | eslint: true, 17 | 18 | // webpack-dev-server port 19 | port: 9080, 20 | 21 | // electron-packager options 22 | // See `Building you app` for more info 23 | building: { 24 | arch: 'x64', 25 | asar: true, 26 | dir: path.join(__dirname, 'app'), 27 | icon: path.join(__dirname, 'app/icons/icon'), 28 | ignore: /\b(src|index\.ejs|icons)\b/, 29 | name: pkg.name, 30 | out: path.join(__dirname, 'builds'), 31 | overwrite: true, 32 | platform: process.env.PLATFORM_TARGET || 'all' 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/en/global_configuration.md: -------------------------------------------------------------------------------- 1 | # Global Configuration 2 | 3 | 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`. 4 | 5 | #### `config.js` 6 | **Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. 7 | 8 | ```js 9 | { 10 | // Name of electron app 11 | // Will be used in production builds 12 | name: 'app', 13 | 14 | // Use ESLint 15 | // Further changes can be made in `.eslintrc.js` 16 | eslint: true, 17 | 18 | // webpack-dev-server port 19 | port: 9080, 20 | 21 | // electron-packager options 22 | // See `Building you app` for more info 23 | building: { 24 | arch: 'x64', 25 | asar: true, 26 | dir: path.join(__dirname, 'app'), 27 | icon: path.join(__dirname, 'app/icons/icon'), 28 | ignore: /\b(src|index\.ejs|icons)\b/, 29 | name: pkg.name, 30 | out: path.join(__dirname, 'builds'), 31 | overwrite: true, 32 | platform: process.env.PLATFORM_TARGET || 'all' 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/ko/global_configuration.md: -------------------------------------------------------------------------------- 1 | # Global Configuration 2 | 3 | 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`. 4 | 5 | #### `config.js` 6 | **Note**: Some options may differ based on the settings choosen during `vue-cli` scaffolding. 7 | 8 | ```js 9 | { 10 | // Name of electron app 11 | // Will be used in production builds 12 | name: 'app', 13 | 14 | // Use ESLint 15 | // Further changes can be made in `.eslintrc.js` 16 | eslint: true, 17 | 18 | // webpack-dev-server port 19 | port: 9080, 20 | 21 | // electron-packager options 22 | // See `Building you app` for more info 23 | building: { 24 | arch: 'x64', 25 | asar: true, 26 | dir: path.join(__dirname, 'app'), 27 | icon: path.join(__dirname, 'app/icons/icon'), 28 | ignore: /\b(src|index\.ejs|icons)\b/, 29 | name: pkg.name, 30 | out: path.join(__dirname, 'builds'), 31 | overwrite: true, 32 | platform: process.env.PLATFORM_TARGET || 'all' 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/ja/savingreading-local-files.md: -------------------------------------------------------------------------------- 1 | # ローカルファイルの読み書き 2 | 3 | `electron` を使用する利点の一つは、ユーザーのファイルシステムにアクセスできることです。これにより、ローカルシステム上のファイルを読み書きすることができます。Chromium の制限を回避し、アプリケーションの内部ファイルに書き込むには、`electron` の API 、特に [`app.getPath(name)`](https://electron.atom.io/docs/api/app/#appgetpathname) 関数を使用してください。このヘルパーメソッドは、ユーザーのデスクトップ、システムの一時ファイルなどのシステムディレクトリへのファイルパスを取得できます。 4 | 5 | ### ユースケース 6 | 7 | アプリケーション用のローカルデータベースストアを用意したいとしましょう。この例では、[`nedb`](https://github.com/louischatriot/nedb) を使って説明します。 8 | 9 | ```bash 10 | yarn add nedb # or npm install nedb --save 11 | ``` 12 | 13 | **src/renderer/datastore.js** 14 | 15 | ここでは NeDB を設定し、パスを `userData` ディレクトリに向けます。このファイルスペースは、アプリケーション専用に確保されているため、他のプログラムや他のユーザーのやりとりがこのファイルスペースを改ざんしないだろうという確信を得ることができます。ここから、 `renderer` プロセスで `datastore.js` をインポートし、使うことができます。 16 | 17 | ```js 18 | import Datastore from 'nedb' 19 | import path from 'path' 20 | import { remote } from 'electron' 21 | export default new Datastore({ 22 | autoload: true, 23 | filename: path.join(remote.app.getPath('userData'), '/data.db') 24 | }) 25 | ``` 26 | 27 | **src/renderer/main.js** 28 | 29 | さらに手順を進めると、データストアを `src/renderer/main.js` にインポートし、 Vue のプロトタイプに設定することができます。そうすることで、全てのコンポーネントファイルで `this.$db` を通してデータストア API にアクセスすることができるようになりました。 30 | 31 | ```js 32 | import db from './datastore' 33 | /* 他のコード */ 34 | Vue.prototype.$db = db 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/ja/unittesting.md: -------------------------------------------------------------------------------- 1 | # ユニットテスト 2 | 3 | electron-vue はユニットテストのためにテストランナーの [Karma](https://karma-runner.github.io/1.0/index.html) とテストフレームワークの [Mocha](https://mochajs.org/) ([Chai](http://chaijs.com/) と一緒に) を利用しています。 4 | 5 | Mocha と Chai はそれぞれ `karma-mocha` と `karma-chai` を使用して統合されているため、`expect` などの全ての API はテストファイルで全て使用可能です。 6 | 7 | ### テストの実行 8 | 9 | ```bash 10 | # Karma を始める 11 | npm run unit 12 | ``` 13 | 14 | ### ファイル構造 15 | 16 | ``` 17 | my-project 18 | ├─ test 19 | | ├─ unit 20 | │ │ ├─ specs/ 21 | │ │ ├─ index.js 22 | └─ └─ └─ karma.conf.js 23 | ``` 24 | 25 | **ほとんどの場合、**`index.js`** と **`karma.conf.js`** は無視して **`specs/`** を書くことだけに集中できます。** 26 | 27 | #### `specs/` 28 | 29 | このディレクトリの中に実際のテストが書かれています。webpackのおかげで、ES2015とサポートされているローダーにフルアクセスできます。 30 | 31 | #### `index.js` 32 | 33 | これは `karma-webpack` で使われるエントリーファイルです。このファイルの目的は、全てのテストとソースコードをワンショットで集めることです。 34 | 35 | #### `karma.conf.js` 36 | 37 | ここでは、スペック/カバレッジレポーターで設定された実際の `karma` 構成を見つけることができます。さらなるカスタマイズは[公式の karma のドキュメント](http://karma-runner.github.io/1.0/config/configuration-file.html)に従って行うことができます。 38 | 39 | ### 依存関係のモック化 40 | 41 | electron-vue にはデフォルトでインストールされた [`inject-loader`](https://github.com/plasticine/inject-loader) が付属しています。Vue コンポーネントファイルでの使用については、[`vue-loader` のドキュメントのモックを使用したテスト](http://vue-loader.vuejs.org/ja/workflow/testing-with-mocks.html)を参照してください。 42 | -------------------------------------------------------------------------------- /tests/scaffold.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const projectDir = process.env.SEMAPHORE_PROJECT_DIR 4 | const templateName = process.argv[2] 5 | 6 | const suppose = require('suppose') 7 | const template = require('./builds.json')[templateName] 8 | 9 | const YELLOW = '\x1b[33m' 10 | const END = '\x1b[0m' 11 | 12 | process.chdir(process.cwd() + '/builds') 13 | 14 | generate(templateName, template) 15 | 16 | setTimeout(() => { 17 | process.exit() 18 | }, 4000) 19 | 20 | function generate (key, build) { 21 | console.log(`${YELLOW}Generating \`${key}\`${END}`) 22 | 23 | suppose('vue', ['init', `${projectDir}`, key], { debug: process.stdout }) 24 | .when(/Application Name/g).respond(build[0]) 25 | .when(/Application Id/g).respond(build[1]) 26 | .when(/Application Version/g).respond(build[2]) 27 | .when(/Project description/g).respond(build[3]) 28 | .when(/Scss/g).respond(build[4]) 29 | .when(/plugins/g).respond(build[5]) 30 | .when(/ESLint/g).respond(build[6]) 31 | .when(/config/g).respond(build[7]) 32 | .when(/unit/g).respond(build[8]) 33 | .when(/end-to-end/g).respond(build[9]) 34 | .when(/build tool/g).respond(build[10]) 35 | .when(/author/g).respond(build[11]) 36 | .on('error', err => { 37 | console.log(err.message) 38 | }) 39 | .end(code => { 40 | process.exit(code) 41 | }) 42 | } 43 | 44 | -------------------------------------------------------------------------------- /docs/cn/vue_accessories.md: -------------------------------------------------------------------------------- 1 | # Vue 插件 2 | 3 | electron-vue 包含以下 `vue` 插件，可以使用 `vue-cli` 脚手架安装... 4 | 5 | * [axios](https://github.com/mzabriskie/axios)\(网络请求\) 6 | * [vue-electron](https://github.com/SimulatedGREG/vue-electron) \(将 electron API 附加到 Vue 对象\) 7 | * [vue-router](https://github.com/vuejs/vue-router) \(单页应用路由\) 8 | * [vuex](https://github.com/vuejs/vuex) \(flux 启发的应用程序架构\) 9 | 10 | --- 11 | 12 | ### [`axios`](https://github.com/mzabriskie/axios) 13 | 14 | > 基于 Promise，用于浏览器和 node.js 的 HTTP 客户端 15 | 16 | 如果你熟悉 `vue-resource`，那么你也会觉得 `axios` 并不陌生，因为大部分 API 几乎是一样的。你可以在 `main` 进程脚本中轻松导入 `axios`，或者在 `renderer` 进程中使用 `this.$http` 或 `Vue.http`。 17 | 18 | ### [`vue-electron`](https://github.com/SimulatedGREG/vue-electron) 19 | 20 | > 将 electron API 附加到 Vue 对象的 vue 插件，使所有组件可以访问它们。 21 | 22 | 一个可以轻松通过 `this.$electron` 访问 electron API 的简单的 `vue` 插件，不再需要将 `electron` 导入到每一个组件中。 23 | 24 | ### [`vue-router`](https://github.com/vuejs/vue-router) 25 | 26 | > `vue-router` 是 [Vue.js](http://vuejs.org/) 的官方路由。它与 Vue.js 的核心深度整合，使 Vue.js 单页应用程序的构建变得轻而易举。 27 | 28 | 本项目所提供的项目结构应该与官方样板 `vuejs-templates/webpack` 中提供的设置很相似。 29 | 30 | ### [`vuex`](https://github.com/vuejs/vuex) 31 | 32 | > Vuex 是 Vue.js 应用程序的 **状态管理模式 + 库**。它作为程序中所有组件的集中存储，其规则确保了状态量只能以可预测的方式被改变。 33 | 34 | 本项目所提供的项目结构相当简单，但我们鼓励使用 `vuex` 的模块模式来帮助组织你的数据存储。外加的 `@/store/modules/index.js` 让你的 `vuex` 存储能够一次性导入所有的模块。 35 | -------------------------------------------------------------------------------- /docs/cn/getting_started.md: -------------------------------------------------------------------------------- 1 | # 起步 2 | 3 | ## 脚手架 4 | 5 | 该样板代码被构建为 [`vue-cli`](https://github.com/vuejs/vue-cli) 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 `node@^7` 或更高版本。electron-vue 官方推荐 [`yarn`](https://yarnpkg.org) 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 `yarn clean` 帮助减少最后构建文件的大小。 6 | 7 | ```bash 8 | # 安装 vue-cli 和 脚手架样板代码 9 | npm install -g vue-cli 10 | vue init simulatedgreg/electron-vue my-project 11 | 12 | # 安装依赖并运行你的程序 13 | cd my-project 14 | yarn # 或者 npm install 15 | yarn run dev # 或者 npm run dev 16 | ``` 17 | 18 | #### 关于 electron 19 | 20 | 虽然是可选的，仍旧我们建议在创建项目之后锁定你 electron 的版本。这样可以防止在同一项目上工作的其他开发者使用不同的版本进行开发。electron 经常发布新版本，所以一些功能特性总是会发生相应的变化。[更多信息](http://electron.atom.io/docs/tutorial/electron-versioning/)。 21 | 22 | 23 | #### Windows 用户注意事项 24 | 25 | 如果在 `npm install` 期间遇到关于 `node-gyp` 的错误，那么你很有可能没有在你的系统上安装正确的构建工具。构建工具包括 Python 和 Visual Studio 等等。感谢 [@felixrieseberg](https://github.com/felixrieseberg)，有几个软件包可以帮助简化此过程。 26 | 27 | 我们需要检查的第一项是 npm 的版本，并确保它是最新的。这个可以使用 [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade) 来完成。如果你使用 `yarn`，则可以跳过此项检查。 28 | 29 | 若上一项检查完成，我们可以继续设置所需的构建工具。使用 [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools) 来为我们完成大部分烦人的工作。全局安装此工具将依次设置 Visual C++ 软件包、Python 等等。 30 | 31 | 到现在为止，所有工具都应该成功安装了，如果没有，那么你就会需要安装一个干净的 Visual Studio。请注意，这些并不是 electron-vue 自身的问题 \(Windows 有时候可能会很难用 ¯\\\_\(ツ\)\_/¯\)。 32 | -------------------------------------------------------------------------------- /template/.electron-vue/dev-client.js: -------------------------------------------------------------------------------- 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 2 | 3 | hotClient.subscribe(event => { 4 | /** 5 | * Reload browser when HTMLWebpackPlugin emits a new index.html 6 | * 7 | * Currently disabled until jantimon/html-webpack-plugin#680 is resolved. 8 | * https://github.com/SimulatedGREG/electron-vue/issues/437 9 | * https://github.com/jantimon/html-webpack-plugin/issues/680 10 | */ 11 | // if (event.action === 'reload') { 12 | // window.location.reload() 13 | // } 14 | 15 | /** 16 | * Notify `mainWindow` when `main` process is compiling, 17 | * giving notice for an expected reload of the `electron` process 18 | */ 19 | if (event.action === 'compiling') { 20 | document.body.innerHTML += ` 21 | 34 | 35 |
36 | Compiling Main Process... 37 |
38 | ` 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /docs/ko/savingreading-local-files.md: -------------------------------------------------------------------------------- 1 | # Read & Write Local Files 2 | 3 | `electron` 사용의 큰 이점 중 하나는 사용자의 파일 시스템에 액세스 할 수 있다는 것 입니다. 여러분은 로컬 시스템에서 파일을 읽고 쓸 수 있습니다. Chromium 제한을 피하고 애플리케이션의 내부 파일에 글을 쓰려면 `electron`의 API, 특히 [`app.getPath(name)`](https://electron.atom.io/docs/api/app/#appgetpathname) 함수를 사용해야합니다. 이 도우미 메소드는 사용자의 데스크탑, 시스템 임시 파일 등과 같은 시스템 디렉토리에 대한 파일 경로를 가져올 수 있습니다. 4 | 5 | ### Use Case 6 | 7 | 애플리케이션를 위한 로컬 데이터베이스 저장소를 갖기를 원한다고 가정 해 봅시다. 이 예제에서는 [`nedb`](https://github.com/louischatriot/nedb)를 사용하여 시연합니다. 8 | 9 | ```bash 10 | yarn add nedb # or npm install nedb --save 11 | ``` 12 | 13 | **src/renderer/datastore.js** 14 | 15 | 여기서는 NeDB를 설정하고 `userData` 디렉토리를 가리 킵니다. 이 공간은 애플리케이션을 위해 특별히 예약되어 있습니다. 그러므로 다른 프로그램이나 다른 사용자의 상호작용이 이 파일 공간을 변경해서는 안된다는 확신을 가질 수 있습니다. `renderer` 프로세스에서 `datastore.js`를 가져와서 소비 할 수 있습니다. 16 | 17 | ```js 18 | import Datastore from 'nedb' 19 | import path from 'path' 20 | import { remote } from 'electron' 21 | 22 | export default new Datastore({ 23 | autoload: true, 24 | filename: path.join(remote.app.getPath('userData'), '/data.db') 25 | }) 26 | ``` 27 | 28 | **src/renderer/main.js** 29 | 30 | 단계를 더 진행하기 위해, datastore를 `src/renderer/main.js`로 가져와서 Vue 프로토타입에 연결할 수 있습니다. 이렇게 하면, 모든 component 파일에서 `this.$db`를 사용하여 datastore API에 액세스 할 수 있게되었습니다. 31 | 32 | ```js 33 | import db from './datastore' 34 | 35 | /* Other Code */ 36 | 37 | Vue.prototype.$db = db 38 | ``` 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/cn/entry_indexhtml.md: -------------------------------------------------------------------------------- 1 | # 入口 `index.html` 2 | 3 | 在产品阶段，electron-vue 使用 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) 创建 `index.html`。在开发过程中，你将在 `src/` 目录中找到一个 `index.ejs`。在这里，你可以更改 HTML 入口文件。 4 | 5 | 如果你不熟悉这个插件的工作原理，那么我鼓励你看看它的 [文档](https://www.npmjs.com/package/html-webpack-plugin)。简而言之，这个插件会自动将产品阶段的资源（包括 `renderer.js` 和 `styles.css`）注入到最终压缩版的 `index.html` 中。 6 | 7 | ### 开发阶段的 `index.ejs` 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | <%= ... %> 16 | 17 | 18 |
19 | 20 | 21 | 22 | ``` 23 | 24 | ### 产品阶段的 `index.html` \(非压缩版\) 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | app 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | ``` 40 | 41 | ### 关于 CDNs 的使用 42 | 43 | 虽然使用 CDN 提供的资源有益于你的应用程序的最终版本的大小，但我建议不要使用它们。主要原因是，通过这样做，你其实是在假设你的应用程序始终可以访问互联网，而 Electron 应用程序并不总是如此。这成为使用 CSS 框架（如 bootstrap）的一个相当重要的问题，因为没有互联网，你的应用程序将迅速变得没有任何样式并且乱七八糟。 44 | 45 | > “我不在乎，我还是想用CDN。” 46 | 47 | 如果你坚持使用 CDN，那么你仍可以通过将标签添加到 `src/index.ejs` 文件中达到目的。只是当你的应用程序处于离线模式时，请确保设置适当的 UI/UX 流程。 48 | -------------------------------------------------------------------------------- /docs/en/file-tree.md: -------------------------------------------------------------------------------- 1 | # File Tree 2 | 3 | ### During development 4 | 5 | **Note**: Some files/folders may differ based on the settings chosen during `vue-cli` scaffolding. 6 | 7 | ``` 8 | my-project 9 | ├─ .electron-vue 10 | │ └─ .js files 11 | ├─ build 12 | │ └─ icons/ 13 | ├─ dist 14 | │ ├─ electron/ 15 | │ └─ web/ 16 | ├─ node_modules/ 17 | ├─ src 18 | │ ├─ main 19 | │ │ ├─ index.dev.js 20 | │ │ └─ index.js 21 | │ ├─ renderer 22 | │ │ ├─ components/ 23 | │ │ ├─ router/ 24 | │ │ ├─ store/ 25 | │ │ ├─ App.vue 26 | │ │ └─ main.js 27 | │ └─ index.ejs 28 | ├─ static/ 29 | ├─ test 30 | │ ├─ e2e 31 | │ │ ├─ specs/ 32 | │ │ ├─ index.js 33 | │ │ └─ utils.js 34 | │ ├─ unit 35 | │ │ ├─ specs/ 36 | │ │ ├─ index.js 37 | │ │ └─ karma.config.js 38 | │ └─ .eslintrc 39 | ├─ .babelrc 40 | ├─ .eslintignore 41 | ├─ .eslintrc.js 42 | ├─ .gitignore 43 | ├─ package.json 44 | └─ README.md 45 | ``` 46 | 47 | #### Production builds 48 | 49 | ``` 50 | app.asar 51 | ├─ dist 52 | │ └─ electron 53 | │ ├─ static/ 54 | │ ├─ index.html 55 | │ ├─ main.js 56 | │ └─ renderer.js 57 | ├─ node_modules/ 58 | └─ package.json 59 | ``` 60 | 61 | 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. 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /docs/pt_BR/migration-guide.md: -------------------------------------------------------------------------------- 1 | # Guia de migração 2 | 3 | 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. 4 | 5 | A documentação a seguir tenta te explicar a migração do seu projeto que _should_ precisa ser completado, mas não e a prova de falhas o metodo ja que a estrutura do projeto esta sempre aberto a mudanças. 6 | 7 | 1. Inicie uma versão nova do electron-vue usando `vue init simulatedgreg/electron-vue my-project` 8 | 2. Copie por cima o projeto atual para a pasta `src` para a nova pasta do {tradução de scaffold} `src` 9 | 3. Copie sobre o `package.json` as dependencias do projeto atual para o novo {tradução de scaffold} `package.json` 10 | 4. Instale as dependencias com `yarn` ou `npm install` 11 | 5. Rode o projeto no modo de desenvolvimento com \(`yarn run dev` ou `npm run dev`\) 12 | 6. Olhe para o terminal para encontrar erros e resolver. 13 | 14 | Como previamente mencionaddo acima, não tem metodo sem erros para fazer a migração para o novo {tradução de scaffold}, mas isso vai se tornar grandes passos para chegar o mais perto de ter tudo feito. 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 ve se isso reflete a versão atual do electron-vue da branch `master`. 15 | -------------------------------------------------------------------------------- /docs/ja/project_structure.md: -------------------------------------------------------------------------------- 1 | # プロジェクト構造 2 | 3 | electron アプリケーションの作成に関しては、プロジェクト構造は少し変わっています。これまで公式の [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) セットアップを使用していたのならば、構造はかなり似通っていると感じるでしょう。このセクションのドキュメントではどのようにボイラープレートが動作するかの概要とアプリケーションをビルドする際の違いを説明しようと思います。 4 | 5 | ### 単一の `package.json` によるセットアップ 6 | 7 | そんなに前のことではありませんが、2つの `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` によるセットアップをサポートしています。 8 | 9 | #### `dependencies` 10 | 11 | これらの依存関係は最終的な本番アプリケーションに含まれ**ます**。つまり、アプリケーションが動作するのに必要なモジュールがある場合は、ここにインストールしてください！ 12 | 13 | #### `devDependencies` 14 | 15 | これらの依存関係は最終的な本番アプリケーションに含まれ**ません**。ビルドスクリプトや`webpack` ローダーなどの開発に必要な特定のモジュールをインストールします。 16 | 17 | #### ネイティブ NPM モジュールのインストール 18 | 19 | ネイティブ npm モジュールが electron に対してビルドされていることを確認する必要があります。それをするためには、 [`electron-rebuild`](https://github.com/electron/electron-rebuild) を使用できます。しかし、単純化のため、これらのタスクをうまく処理するビルドツールに [`electron-builder`](https://github.com/electron-userland/electron-builder) を使用することを強くお勧めします。 20 | 21 | ### `main` プロセスについて 22 | 23 | 開発中に `src/main/index.dev.js` に気付くかもしれません。このファイルは特に開発のために使用され、開発ツールのインストールにも使用されます。このファイルを変更する必要はありませんが、開発の必要に応じて拡張するために使用することができます。ビルド時、`webpack` は `src/main/index.js` 自身をエントリーファイルとしてバンドルを作成します。 24 | -------------------------------------------------------------------------------- /docs/ko/unittesting.md: -------------------------------------------------------------------------------- 1 | # Unit Testing 2 | 3 | electron-vue는 유닛 테스트를 위해 [Karma](https://karma-runner.github.io/1.0/index.html) 테스트 러너, \(Chai[Chai](http://chaijs.com/)와 함께\)[Mocha](https://mochajs.org/) 테스트 프레임워크를 사용합니다. 4 | 5 | Mocha와 Chai는 각각 `karma-mocha`와 `karma-chai`를 사용하여 통합되므로 `expect`와 같은 모든 API는 테스트 파일 전역에서 사용할 수 있습니다. 6 | 7 | ### Running Tests 8 | 9 | ```bash 10 | # Begin Karma 11 | npm run unit 12 | ``` 13 | 14 | ### File Structure 15 | 16 | ``` 17 | my-project 18 | ├─ test 19 | | ├─ unit 20 | │ │ ├─ specs/ 21 | │ │ ├─ index.js 22 | └─ └─ └─ karma.conf.js 23 | ``` 24 | 25 | 대부분의 경우, index.js와 karma.conf.js 둘 다 무시하고 specs/ 작성에만 집중할 수 있습니다. 26 | 27 | **대부분의 경우,** `index.js` **와** `karma.conf.js` **둘 다 무시하고** `specs/` **작성에만 집중 할 수 있습니다.** 28 | 29 | #### `specs/` 30 | 31 | 이 디렉토리 안은 실제 테스트가 작성되는 곳이 있습니다. webpack의 힘으로 ES2015 및 지원되는 로더에 대한 모든 액세스 권한을 갖게됩니다. 32 | 33 | #### `index.js` 34 | 35 | `karma-webpack`에서 사용하는 엔트리 파일입니다. 이 파일의 목적은 모든 테스트 및 소스 코드를 "한 번에" 수집하는 것입니다. 36 | 37 | #### `karma.conf.js` 38 | 39 | 여기서 spec/coverage 리포터와 함께 설정한 실제 `karma` 구성을 찾을 수 있습니다. 추가 사용자 정의는 [official karma documentation](http://karma-runner.github.io/1.0/config/configuration-file.html)를 따라 만들 수 있습니다. 40 | 41 | ### Mocking Dependencies 42 | 43 | electron-vue는 기본적으로 [`inject-loader`](https://github.com/plasticine/inject-loader)가 설치되어 있습니다. 44 | Vue 컴포넌트 파일 사용법은 [`vue-loader` docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html)를 참조하세요. 45 | 46 | -------------------------------------------------------------------------------- /docs/ko/project_structure.md: -------------------------------------------------------------------------------- 1 | # 프로젝트 구조 2 | 3 | electron-vue 프로젝트 구조는 Electron App을 만들 때와 조금 다릅니다. 이전에 공식 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpack) 설정을 사용했다면, 구조가 매우 유사하다고 느낄 것 입이다. 4 | 이 섹션의 문서는 보일러 플레이트가 작동하는 방법의 개요와 애플리케이션을 빌드 할 때의 차이점을 설명하려고합니다. 이번 섹션의 문서는 보일러플레이트가 어떻게 작동하는지에 대한 일반적인 개요와 애플리케이션을 만들 때의 차이점을 설명합니다. 5 | 6 | ### 단일 `package.json` 설정 7 | 8 | 예전에는 두 개의 `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` 설정을 지원합니다. 9 | 10 | #### `dependencies` 11 | 12 | dependencies는 최종 프로덕션 앱에 **포함 됩니다**. 그러므로 애플리케이션에 특정 모듈이 필요하다면 여기에 설치하세요! 13 | 14 | #### `devDependencies` 15 | 16 | devDependencies는 최종 프로덕션 앱에 **포함되지 않습니다**. 여기에는 빌드 스크립트, `webpack` loaders 등과 같은 개발을 위해 특별히 필요한 모듈을 설치할 수 있습니다. 17 | 18 | #### Native NPM Modules 설치하기 19 | 20 | 우리는 네이티브 npm 모듈이 electron을 고려하여 빌드되었는지 확인해야합니다. 그러기 위해 우리는 [`electron-rebuild`]를 사용 할 수 있습니다.(https://github.com/electron/electron-rebuild), 그러나 더 간단하게하기 위해, 많은 작업을 처리하는 [`electron-builder`](https://github.com/electron-userland/electron-builder) 빌드 도구를 사용하는 것을 더욱 추천합니다. 21 | 22 | ### `main` 프로세스에 관해서 23 | 24 | 개발 중에 `src/main/index.dev.js`를 주목 했을 수도 있습니다. 이 파일은 특별히 개발 용으로 사용되며 dev-tools를 설치하는 데 사용됩니다. 이 파일은 수정할 필요가 없지만 개발 요구를 확장하는 데 사용할 수 있습니다. 빌드가 끝나면 `webpack`은 `src/main/index.js`와 함께 번들을 생성하여 엔트리 파일로 만듭니다. -------------------------------------------------------------------------------- /docs/pt_BR/file-tree.md: -------------------------------------------------------------------------------- 1 | # Árvore de Arquivos 2 | 3 | ### Durante desenvolvimento 4 | 5 | **Nota**: Alguns arquivos/pastas podem estar diferentes das configurações "da base" escolhidos durante a estruturação na `vue-cli`. 6 | 7 | ``` 8 | my-project 9 | ├─ .electron-vue 10 | │ └─ .js files 11 | ├─ build 12 | │ └─ icons/ 13 | ├─ dist 14 | │ ├─ electron/ 15 | │ └─ web/ 16 | ├─ node_modules/ 17 | ├─ src 18 | │ ├─ main 19 | │ │ ├─ index.dev.js 20 | │ │ └─ index.js 21 | │ ├─ renderer 22 | │ │ ├─ components/ 23 | │ │ ├─ router/ 24 | │ │ ├─ store/ 25 | │ │ ├─ App.vue 26 | │ │ └─ main.js 27 | │ └─ index.ejs 28 | ├─ static/ 29 | ├─ test 30 | │ ├─ e2e 31 | │ │ ├─ specs/ 32 | │ │ ├─ index.js 33 | │ │ └─ utils.js 34 | │ ├─ unit 35 | │ │ ├─ specs/ 36 | │ │ ├─ index.js 37 | │ │ └─ karma.config.js 38 | │ └─ .eslintrc 39 | ├─ .babelrc 40 | ├─ .eslintignore 41 | ├─ .eslintrc.js 42 | ├─ .gitignore 43 | ├─ package.json 44 | └─ README.md 45 | ``` 46 | 47 | #### "Build" de produção 48 | 49 | ``` 50 | app.asar 51 | ├─ dist 52 | │ └─ electron 53 | │ ├─ static/ 54 | │ ├─ index.html 55 | │ ├─ main.js 56 | │ └─ renderer.js 57 | ├─ node_modules/ 58 | └─ package.json 59 | ``` 60 | 61 | 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. 62 | -------------------------------------------------------------------------------- /docs/cn/end-to-end_testing.md: -------------------------------------------------------------------------------- 1 | # 端对端测试 2 | 3 | 对于端到端测试，electron-vue 使用 [Spectron](http://electron.atom.io/spectron/) 和 测试框架 [Mocha](https://mochajs.org/) \(以及 [Chai](http://chaijs.com/)\)。Mocha 和 Chai 的 API (包括 `expect`、`should` 以及 `assert` 在内) 均在全局范围内可用。 4 | 5 | ### 运行测试 6 | 7 | ```bash 8 | # 开始 Mocha 9 | npm run e2e 10 | ``` 11 | 12 | ##### 注意 13 | 14 | 在运行端到端测试之前，为了使 Spectron 在测试的时候可用，请调用 `npm run pack` 来创建一个产品构建。 15 | 16 | ### 文件结构 17 | 18 | ``` 19 | my-project 20 | ├─ test 21 | | ├─ e2e 22 | │ │ ├─ specs/ 23 | │ │ ├─ index.js 24 | └─ └─ └─ utils.js 25 | ``` 26 | 27 | **在大多数情况下，你可以忽略** `index.js` **，只专注于编写** `specs/` **。** 28 | 29 | #### `specs/` 30 | 31 | 这个目录里面是编写实际测试代码的地方。由于 `babel-register` 的强大功能，你可以完全依照 ES2015 进行编写。 32 | 33 | #### `index.js` 34 | 35 | 这是 Mocha 入口文件，并收集加载在 `specs/` 内的所有测试代码用于测试。 36 | 37 | #### `utils.js` 38 | 39 | 在这里，你会发现一些通用的函数，你可以在 `specs/` 中使用。其基本功能包括处理 electron 创建/销毁过程的 `beforeEach` 和 `afterEach`。 40 | 41 | ### 关于 Spectron 42 | 43 | Spectron 是使用 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) 和 [WebDriverIO](http://webdriver.io/) 来操作 DOM 元素的 [electron](http://electron.atom.io) 官方测试框架。 44 | 45 | #### WebDriverIO 的使用 46 | 47 | 如 Spectron 的 [文档](https://github.com/electron/spectron#client) 中所述，你可以通过访问 `this.app.client` 来访问 [WebDriverIO APIs](http://webdriver.io/api.html)。 由于 electron-vue 使用了 Mocha，`this` 在 `afterEach`、`beforeEach` 和 `it` 之间共享。 因此，值得注意的是，ES2015 的 箭头函数 (arrow function) 不能在某些情况下使用，因为 `this` 的语境将被覆盖 \([更多信息](https://mochajs.org/#arrow-functions)\)。 48 | -------------------------------------------------------------------------------- /docs/ja/entry_indexhtml.md: -------------------------------------------------------------------------------- 1 | # `index.html` 2 | 3 | electron-vue は本番ビルドで `index.html` を作成するために [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) を使用します。開発中は `src/` ディレクトリの`index.ejs` となります。ここではエントリーとなる HTML ファイルを変更することができます。 4 | 5 | このプラグインがどのように動作するかわからない場合は、その[ドキュメント](https://www.npmjs.com/package/html-webpack-plugin)を見ることを勧めます。しかし要するに、このプラグインは自動的に `renderer.js` と `styles.css` を含む本番アセットを最終的にファイルサイズを小さくし、 `index.html` に挿入します。 6 | 7 | ### 開発中の `index.ejs` 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | <%= ... %> 16 | 17 | 18 |
19 | 20 | 21 | 22 | ``` 23 | 24 | ### 本番の(ファイルサイズを小さくしていない) `index.html` 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | app 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | ``` 40 | 41 | ### CDN の利用について 42 | 43 | CDN から提供されるアセットを利用することは、アプリケーションの最終的なビルドサイズにとっては素晴らしい利点があるかもしれませんが、それらを使用することは勧めません。主な理由は、そうすることによってアプリケーションが必ずインターネットにアクセスできると仮定することになりますが、Electron アプリケーションの場合は必ずしもそうとは限りません。これは bootstrap のような CSS フレームワークではかなり重大な問題となり、アプリケーションはすぐに整っていない状態になるでしょう。 44 | 45 | > "私は気にしません、それでも CDN を使いたいです" 46 | 47 | それでも CDN を利用すると決めた場合は、 `src/index.ejs` ファイルにタグを追加することでできます。ただアプリケーションがオフラインの時の UI/UX フローを適切に設定してください。 48 | -------------------------------------------------------------------------------- /docs/ko/debugging-production.md: -------------------------------------------------------------------------------- 1 | # Debugging 2 | 3 | ### Main Process 4 | 5 | 개발 중인 애플리케이션을 실행할 때, 여러분은 원격 디버거를 언급하는 `main` 프로세스에서 메시지를 발견했을 수도 있습니다. `electron@^1.7.2`가 출시 된 이래로 Inspect API를 통한 원격 디버깅이 도입되었으며 Google 크롬 또는 기본 포트 5858을 사용하는 프로세스(Visual Studio Code)에 원격으로 연결할 수 있는 다른 디버거를 제공된 링크를 열면 쉽게 액세스 할 수 있습니다. 6 | 7 | ```bash 8 | ┏ Electron ------------------- 9 | 10 | Debugger listening on port 5858. 11 | Warning: This is an experimental feature and could change at any time. 12 | To start debugging, open the following URL in Chrome: 13 | chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/22271e96-df65-4bab-9207-da8c71117641 14 | 15 | ┗ ---------------------------- 16 | ``` 17 | 18 | ### Production Builds 19 | 20 | ###### Notice 21 | 22 | 프로덕션 환경에서 애플리케이션을 디버그하는 것이 가능할 수도 있지만 개발 중에 발견 된 것과 비교하여 프로덕션 코드가 축소되어 읽을 수 없다는 것을 알고 있으세요. 23 | 24 | ##### `renderer` Process 25 | 26 | 현재 개발중인 것보다 큰 차이점이 없습니다. [`BrowserWindow` APIs](https://electron.atom.io/docs/api/web-contents/#contentsopendevtoolsoptions)를 사용하여 개발자 도구를 간단하게 호출 할 수 있습니다. 초기 electron-vue 설정을 사용하여 `src/main/index.js` 안에 다음과 같은 코드 스니펫을 추가 할 수 있습니다. `new BrowserWindow` 구축 직후, 개발 도구를 강제로 열 수 있습니다. 27 | 28 | ```js 29 | mainWindow.webContents.openDevTools() 30 | ``` 31 | 32 | ##### `main` Process 33 | 34 | 위에서 언급 한 것과 비슷하게 `main` 프로세스에 외부 디버거를 연결하여 애플리케이션을 원격 디버깅 할 수도 있습니다. 프로덕션 환경에서 디버거를 활성화하려면 `src/main/index.js`에서 `app`을 import 후에 다음 스니펫을 추가하면 됩니다. 그런 다음 Google 크롬에서 `chrome://inspect`를 통해 연결하여 탐색 할 수 있습니다. 35 | 36 | ```js 37 | app.commandLine.appendSwitch('inspect', '5858') 38 | ``` 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/pt_BR/npm_scripts.md: -------------------------------------------------------------------------------- 1 | # NPM Scripts 2 | 3 | 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 `. 4 | 5 | ### `npm run build` 6 | 7 | Build your app for production and package. More info can be found in the [**Building Your App**](building_your_app.md) section. 8 | 9 | ### `npm run dev` 10 | 11 | Run app in development. 12 | 13 | ### `npm run lint` 14 | 15 | Lint all your `src/`'s and `test/`'s JS & Vue component files. 16 | 17 | ### `npm run lint:fix` 18 | 19 | Lint all your `src/`'s and `test/`'s JS & Vue component files and attempt to fix issues. 20 | 21 | ### `npm run pack` 22 | 23 | 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. 24 | 25 | ### `npm run pack:main` 26 | 27 | Run webpack to bundle `main` process source code. 28 | 29 | ### `npm run pack:renderer` 30 | 31 | Run webpack to bundle `renderer` process source code. 32 | 33 | ### `npm run unit` 34 | 35 | Run unit tests with Karma + Jasmine. More information on [**Unit Testing**](unittesting.md). 36 | 37 | ### `npm run e2e` 38 | 39 | Run end-to-end tests with Spectron + Mocha. More information on [**End-to-end Testing**](end-to-end_testing.md). 40 | 41 | ### `npm test` 42 | 43 | Runs both `npm run unit` & `npm run e2e`. More information on [**Testing**](testing.md). 44 | 45 | -------------------------------------------------------------------------------- /docs/ko/entry_indexhtml.md: -------------------------------------------------------------------------------- 1 | # Entry `index.html` 2 | 3 | electron-vue는 프로덕션 빌드 중 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin)을 사용하여 `index.html`을 만듭니다. 4 | 여러분은 개발 중에 `src/` 디렉토리에서 `index.ejs`를 발견할 것 입니다. 여기서 엔트리 HTML 파일을 변경 할 수 있습니다. 5 | 6 | 이 플러그인의 작동 방식에 익숙하지 않은 경우, 이 [문서](https://www.npmjs.com/package/html-webpack-plugin)를 읽기 바랍니다. 간단히 말해, 이 플러그인은 `renderer.js`과 `styles.css`을 포함한 프로덕션 assets을 최종으로 축소된 index.html에 자동으로 삽입합니다. 7 | 8 | ### 개발 할 때 `index.ejs` 9 | 10 | ```html 11 | 12 | 13 | 14 | 15 | <%= htmlWebpackPlugin.options.title %> 16 | <%= ... %> 17 | 18 | 19 |
20 | 21 | 22 | 23 | ``` 24 | 25 | ### 프로덕션의 `index.html` \(non-minified\) 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 | app 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | ``` 41 | 42 | ### CDNs 사용에 관하여 43 | 44 | CDN에서 제공되는 assets을 사용하면 애플리케이션의 최종 빌드 사이즈에 득이 되지만 사용하지 않는 것을 권합니다. 주된 이유는 여러분은 애플리케이션이 인터넷에 항상 액세스 할 수 있다고 가정하지만 Electron 앱의 경우 항상 그렇지 않습니다. 이는 bootstrap 같은 CSS 프레임워크에서 중요한 이슈가 됩니다. 여러분의 앱은 아주 빠른 속도로 스타일이 없는 난잡한 상태가 될 수 있습니다. 45 | 46 | > "나는 이를 신경쓰지 않고 CDN을 계속 사용하고 싶습니다." 47 | 48 | CDN을 계속 사용하기로 결정한 경우, `src/index.ejs`에 태그를 추가하여 계속해서 사용 할 수 있습니다. 다만, 앱이 오프라인 일 때 적절한 UI/UX 플로우를 설정하길 바랍니다. 49 | -------------------------------------------------------------------------------- /docs/ja/vue_accessories.md: -------------------------------------------------------------------------------- 1 | # Vue プラグイン 2 | 3 | electron-vue には `vue-cli` でのスキャフォールディングの間にインストールできる次の `vue` プラグインが入っています... 4 | 5 | - [axios ](https://github.com/mzabriskie/axios)(web リクエスト) 6 | - [vue-electron](https://github.com/SimulatedGREG/vue-electron) (electron API を Vue オブジェクトに付け加える) 7 | - [vue-router](https://github.com/vuejs/vue-router) (シングルページアプリケーションのルーティング) 8 | - [vuex](https://github.com/vuejs/vuex) (Flux にインスパイアされたアプリケーションアーキテクチャ) 9 | 10 | --- 11 | 12 | ### [`axios`](https://github.com/mzabriskie/axios) 13 | 14 | > ブラウザーと Node.js のための Promise ベースの HTTP クライアント 15 | 16 | `vue-resource` をよく知っている場合、 `axios` はほとんどの API がほぼ同じであるため、とても馴染みやすいでしょう。`main` プロセススクリプトで簡単に `axios` をインポートしたり、 `renderer` プロセスで `this.$http` や `Vue.http` を使用することができます。 17 | 18 | ### [`vue-electron`](https://github.com/SimulatedGREG/vue-electron) 19 | 20 | > electron API を Vue オブジェクトに付け加え、全てのコンポーネントからアクセス可能にする vue プラグイン。 21 | 22 | electron API に `this.$electron` で簡単にアクセスできるようにするシンプルな `vue` プラグインです。全てのコンポーネントで `electron` をインポートする必要はありません。 23 | 24 | ### [`vue-router`](https://github.com/vuejs/vue-router) 25 | 26 | > `vue-router` は [Vue.js](http://jp.vuejs.org/) 公式のルーターです。Vue.js でシングルページアプリケーションを構築するために Vue.js のコアと深く結びついています。 27 | 28 | 提供されるプロジェクト構造は公式で提供されている `vuejs-templates/webpack` のボイラープレートの設定と似ているため馴染みやすいでしょう。 29 | 30 | ### [`vuex`](https://github.com/vuejs/vuex) 31 | 32 | > Vuex は Vue.js アプリケーション向けの**状態管理パターンであり、ライブラリ**でもあります。アプリケーション内の全てのコンポーネントの集中型ストアとして機能し、状態を予測可能な方法でのみ変更できることを保証するルールを備えています。 33 | 34 | 提供されるプロジェクト構造はかなり最低限ですが、`vuex` のモジュールパターンを使用してデータストアを整理することを勧めます。`@/store/modules/index.js` は `vuex` のストアが全てのモジュールをワンショットでインポートできるようにします。 35 | -------------------------------------------------------------------------------- /docs/ko/getting_started.md: -------------------------------------------------------------------------------- 1 | # 시작하기 2 | 3 | ## 스캐폴딩 4 | 5 | 이 보일러플레이트는 [vue-cli](https://github.com/vuejs/vue-cli) 템플릿으로 제작되었으며 최종 스캐폴드 된 애플리케이션을 사용자 정의 하는 옵션을 포함합니다. `node@^7` 또는 그 이상의 버전을 사용해야합니다. 또한 electron-vue는 의존성을 훨씬 잘 처리하고 `yarn clean`으로 최종 빌드 크기를 줄일 수 있는 [`yarn`](https://yarnpkg.org) 패키지 매니저를 공식적으로 추천합니다. 6 | 7 | ```bash 8 | # Install vue-cli and scaffold boilerplate 9 | npm install -g vue-cli 10 | vue init simulatedgreg/electron-vue my-project 11 | 12 | # Install dependencies and run your app 13 | cd my-project 14 | yarn # or npm install 15 | yarn run dev # or npm run dev 16 | ``` 17 | 18 | #### electron에 관해서 19 | 20 | 선택사항이지만 프로젝트를 스캐폴딩 후에 electron 버전을 잠그는 것을 권장합니다.이렇게하면 같은 프로젝트에서 작업하는 다른 개발자가 다른 버전으로 개발하는 것을 방지 할 수 있습니다. Electron은 릴리스를 자주 사용하므로 기능이 항상 변경 될 수 있습니다. [More Info](http://electron.atom.io/docs/tutorial/electron-versioning/). 21 | 22 | #### Windows 사용자를 위한 노트 23 | 24 | `node-gyp`에 대한 `npm install` 중에 오류가 발생하면 시스템에 적절한 빌드 도구가 설치되어 있지 않을 가능성이 높습니다. 빌드 도구에는 Python 및 Visual Studio와 같은 항목이 포함됩니다. [@felixrieseberg](https://github.com/felixrieseberg)에게 감사드립니다. 이 프로세스를 단순화하는 데 도움이 되는 몇 가지 패키지가 있습니다. 25 | 26 | 우리가 점검해야 할 첫 번째 항목은 npm 버전이 구식이 아닌지 확인하는 것입니다. [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade)를 사용하여 수행 할 수 있습니다. 만약 yarn을 사용한다면, 여러분은 이러한 확인을 건너뛸 수 있습니다. 27 | 28 | 완료되면 필요한 빌드 도구를 이어서 설정할 수 있습니다. [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools)를 사용하면 대부분의 더러운 작업이 완료됩니다. 전역으로 설치하면 Visual C ++ 패키지, Python 등을 차례로 설치하게 됩니다. 29 | 30 | 이 시점에서 성공적으로 설치해야하지만, 그렇지 않은 경우에는 Visual Studio를 새로 설치해야합니다. 이는 electron-vue의 문제가 아님에 주의하세요. \(Windows는 때로는 어려울 수 있습니다. ¯\\\_\(ツ\)\_/¯\). 31 | -------------------------------------------------------------------------------- /docs/ja/getting_started.md: -------------------------------------------------------------------------------- 1 | # はじめに 2 | 3 | ## スキャフォールディング 4 | 5 | このボイラープレートは [vue-cli](https://github.com/vuejs/vue-cli) のテンプレートとして作成され、スキャフォールディングされたアプリケーションをカスタマイズするためのオプションが含まれています。`node@^7` かそれ以上のバージョンを使用する必要があります。 electron-vue はパッケージマネージャの [`yarn`](https://yarnpkg.org) を公式に推奨しています。 依存関係をよりよく処理し、`yarn clean` により最終的なビルドサイズを減らすことができます。 6 | 7 | ```bash 8 | # vue-cli をインストールしボイラープレートをスキャフォールディングします 9 | npm install -g vue-cli 10 | vue init simulatedgreg/electron-vue my-project 11 | # 依存関係をインストールし、アプリケーションを実行します 12 | cd my-project 13 | yarn # or npm install 14 | yarn run dev # or npm run dev 15 | ``` 16 | 17 | #### electron について 18 | 19 | オプションとはいっても、プロジェクトをスキャフォールディングした後は electron のバージョンを固定することをお勧めします。これは、同じプロジェクトで作業している開発者が異なるバージョンで開発することを防ぐことに役立ちます。electron はリリースを頻繁に行うため、機能は常に変更対象となります。 [詳細な情報はこちら](http://electron.atom.io/docs/tutorial/electron-versioning/)。 20 | 21 | #### Windows ユーザーのための注意 22 | 23 | `npm install` 中に `node-gyp` に関するエラーが発生した場合、システムに適切なビルドツールがインストールされていない可能性が非常に高いです。ビルドツールには、Python や Visual Studio などのアイテムが含まれています。[@felixrieseberg](https://github.com/felixrieseberg) のおかげで、このプロセスを簡潔にするのに役立つパッケージがいくつかあります。 24 | 25 | 最初に確認する項目は npm のバージョンで、古いバージョンでないことを確認します。これは [`npm-windows-upgrade`](https://github.com/felixrieseberg/npm-windows-upgrade) を使用することで達成できます。`yarn` を使用する場合は、この確認をスキップすることができます。 26 | 27 | それが完了したら、引き続きビルドツールをセットアップします。[`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools) を使用することで、めんどくさいことの大半は完了します。これをグローバルにインストールすると Visual C ++パッケージ、 Python などがセットアップされます。 28 | 29 | この時点では正常にインストールされるはずですが、そうでない場合は Visual Studio をクリーンインストールする必要があります。これらは electron-vue 自身の問題ではないことに注意してください(Windows は時々面倒になることがあります ¯\\\_\(ツ\)\_/¯\)。 30 | -------------------------------------------------------------------------------- /docs/ja/end-to-end_testing.md: -------------------------------------------------------------------------------- 1 | # エンドツーエンドテスト 2 | 3 | electron-vue はエンドツーエンドテストのために [Spectron](http://electron.atom.io/spectron/) とテストフレームワークの [Mocha](https://mochajs.org/) ([Chai](http://chaijs.com/) と一緒に) を利用しています。Mocha と Chai の APIは、`expect`、`should`、`assert`を含め、グローバルスコープで利用可能です。 4 | 5 | ### テストの実行 6 | 7 | ```bash 8 | # Mocha を始める 9 | npm run e2e 10 | ``` 11 | 12 | ##### 注意 13 | 14 | エンドツーエンドテストを実行する前に、Spectron がテスト中に使用する本番ビルドを作成するために、`npm run pack` が呼び出されます。 15 | 16 | ### ファイル構造 17 | 18 | ``` 19 | my-project 20 | ├─ test 21 | | ├─ e2e 22 | │ │ ├─ specs/ 23 | │ │ ├─ index.js 24 | └─ └─ └─ utils.js 25 | ``` 26 | 27 | **ほとんどの場合、 **`index.js`** は無視して、 **`specs/`** を書くことだけに集中できます。** 28 | 29 | #### `specs/` 30 | 31 | このディレクトリの中に実際のテストが書かれています。`babel-register` の機能のおかげで、ES2015にフルアクセスできます。 32 | 33 | #### `index.js` 34 | 35 | このファイルは Mocha のメインエントリーとして機能し、テスト用に `specs/` で書かれた全てのテストを集めます。 36 | 37 | #### `utils.js` 38 | 39 | ここでは、`specs/` 全体で使用することができる汎用関数を見つけることができます。基本関数には、 electron の作成/破壊プロセスを処理する `beforeEach` と `afterEach` が含まれます。 40 | 41 | ### Spectron について 42 | 43 | Spectron は 公式の [electron](http://electron.atom.io) テストフレームワークであり、DOM 要素を操作するために [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) と [WebDriverIO](http://webdriver.io/) の両方を使用します。 44 | 45 | #### WebDriverIO の使用 46 | 47 | Spectron の[ドキュメント](https://github.com/electron/spectron#client)に記載されている通り、[WebDriverIO API](http://webdriver.io/api.html) へのアクセスは `this.app.client` を通してすることができます。 electron-vue は Mocha を使用しているため、`this` のコンテキストは `afterEach`、`beforeEach`、`it` の間で共有されます。このため、ES2015 のアロー関数は、`this` のコンテキストが上書きされるため、特定の状況では使用できないことに注意することが重要です([詳細はこちら](https://mochajs.org/#arrow-functions))。 48 | -------------------------------------------------------------------------------- /template/.travis.yml: -------------------------------------------------------------------------------- 1 | {{#testing unit e2e}} 2 | # Commented sections below can be used to run tests on the CI server 3 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing 4 | {{/testing}} 5 | osx_image: xcode8.3 6 | sudo: required 7 | dist: trusty 8 | language: c 9 | matrix: 10 | include: 11 | - os: osx 12 | - os: linux 13 | env: CC=clang CXX=clang++ npm_config_clang=1 14 | compiler: clang 15 | cache: 16 | directories: 17 | - node_modules 18 | - "$HOME/.electron" 19 | - "$HOME/.cache" 20 | addons: 21 | apt: 22 | packages: 23 | - libgnome-keyring-dev 24 | - icnsutils 25 | {{#testing unit e2e}} 26 | #- xvfb 27 | {{/testing}} 28 | before_install: 29 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([ 30 | "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz 31 | | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull 32 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi 33 | install: 34 | {{#testing unit e2e}} 35 | #- export DISPLAY=':99.0' 36 | #- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 37 | {{/testing}} 38 | - nvm install 10 39 | - curl -o- -L https://yarnpkg.com/install.sh | bash 40 | - source ~/.bashrc 41 | - npm install -g xvfb-maybe 42 | - yarn 43 | script: 44 | {{#unit}} 45 | #- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js 46 | {{/unit}} 47 | {{#e2e}} 48 | #- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e 49 | {{/e2e}} 50 | - yarn run build 51 | branches: 52 | only: 53 | - master 54 | -------------------------------------------------------------------------------- /docs/en/unittesting.md: -------------------------------------------------------------------------------- 1 | # Unit Testing 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ### Running Tests 8 | 9 | ```bash 10 | # Begin Karma 11 | npm run unit 12 | ``` 13 | 14 | ### File Structure 15 | 16 | ``` 17 | my-project 18 | ├─ test 19 | | ├─ unit 20 | │ │ ├─ specs/ 21 | │ │ ├─ index.js 22 | └─ └─ └─ karma.conf.js 23 | ``` 24 | 25 | **For the most part, you can ignore both **`index.js`** and **`karma.conf.js`** and focus solely on writing **`specs/`**.** 26 | 27 | #### `specs/` 28 | 29 | Inside this directory is where actual tests are written. Thanks to the power of webpack, you have full access to ES2015 and supported loaders. 30 | 31 | #### `index.js` 32 | 33 | 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. 34 | 35 | #### `karma.conf.js` 36 | 37 | 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). 38 | 39 | ### Mocking Dependencies 40 | 41 | 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). 42 | 43 | -------------------------------------------------------------------------------- /docs/pt_BR/unittesting.md: -------------------------------------------------------------------------------- 1 | # Unit Testing 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ### Running Tests 8 | 9 | ```bash 10 | # Begin Karma 11 | npm run unit 12 | ``` 13 | 14 | ### File Structure 15 | 16 | ``` 17 | my-project 18 | ├─ test 19 | | ├─ unit 20 | │ │ ├─ specs/ 21 | │ │ ├─ index.js 22 | └─ └─ └─ karma.conf.js 23 | ``` 24 | 25 | **For the most part, you can ignore both **`index.js`** and **`karma.conf.js`** and focus solely on writing **`specs/`**.** 26 | 27 | #### `specs/` 28 | 29 | Inside this directory is where actual tests are written. Thanks to the power of webpack, you have full access to ES2015 and supported loaders. 30 | 31 | #### `index.js` 32 | 33 | 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. 34 | 35 | #### `karma.conf.js` 36 | 37 | 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). 38 | 39 | ### Mocking Dependencies 40 | 41 | 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). 42 | 43 | -------------------------------------------------------------------------------- /docs/en/npm_scripts.md: -------------------------------------------------------------------------------- 1 | # NPM Scripts 2 | 3 | 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 `. 4 | 5 | ### `npm run build` 6 | 7 | Build your app for production and package. More info can be found in the [**Building Your App**](building_your_app.md) section. 8 | 9 | ### `npm run dev` 10 | 11 | Run app in development. 12 | 13 | You can also pass command line paramaters to the application with: 14 | 15 | npm run dev --arg1=val1 --arg2 16 | 17 | ### `npm run lint` 18 | 19 | Lint all your `src/`'s and `test/`'s JS & Vue component files. 20 | 21 | ### `npm run lint:fix` 22 | 23 | Lint all your `src/`'s and `test/`'s JS & Vue component files and attempt to fix issues. 24 | 25 | ### `npm run pack` 26 | 27 | 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. 28 | 29 | ### `npm run pack:main` 30 | 31 | Run webpack to bundle `main` process source code. 32 | 33 | ### `npm run pack:renderer` 34 | 35 | Run webpack to bundle `renderer` process source code. 36 | 37 | ### `npm run unit` 38 | 39 | Run unit tests with Karma + Jasmine. More information on [**Unit Testing**](unittesting.md). 40 | 41 | ### `npm run e2e` 42 | 43 | Run end-to-end tests with Spectron + Mocha. More information on [**End-to-end Testing**](end-to-end_testing.md). 44 | 45 | ### `npm test` 46 | 47 | Runs both `npm run unit` & `npm run e2e`. More information on [**Testing**](testing.md). 48 | 49 | -------------------------------------------------------------------------------- /docs/en/new-releases.md: -------------------------------------------------------------------------------- 1 | # New Releases 2 | 3 | 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_. 4 | 5 | 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. 6 | 7 | ### Past Milestones 8 | 9 | #### [Multiplex](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) 10 | 11 | * Migration to `webpack` 2 12 | * Support for `electron-builder` 13 | * Support for `main` process bundling 14 | * General bugfixing 15 | 16 | #### [Minimize](https://github.com/SimulatedGREG/electron-vue/issues/171) 17 | 18 | * Migration to single `package.json` structure 19 | * Travis CI / AppVeyor configs for `electron-builder` users 20 | * Minimal web output of `renderer` process 21 | * Migration to `axios` 22 | * Full support for `main` process bundling 23 | * Rewrite of development and build scripts 24 | * Migration to `babili` to remove the need of transpiling down completely to ES5 25 | * Support for `static/` assets when using modules that require a full path \([`__static`](/using-static-assets.md)\) 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/ko/new-releases.md: -------------------------------------------------------------------------------- 1 | # New Releases 2 | 3 | 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_. 4 | 5 | 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. 6 | 7 | ### Past Milestones 8 | 9 | #### [Multiplex](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) 10 | 11 | * Migration to `webpack` 2 12 | * Support for `electron-builder` 13 | * Support for `main` process bundling 14 | * General bugfixing 15 | 16 | #### [Minimize](https://github.com/SimulatedGREG/electron-vue/issues/171) 17 | 18 | * Migration to single `package.json` structure 19 | * Travis CI / AppVeyor configs for `electron-builder` users 20 | * Minimal web output of `renderer` process 21 | * Migration to `axios` 22 | * Full support for `main` process bundling 23 | * Rewrite of development and build scripts 24 | * Migration to `babili` to remove the need of transpiling down completely to ES5 25 | * Support for `static/` assets when using modules that require a full path \([`__static`](/using-static-assets.md)\) 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/en/webpack-configurations.md: -------------------------------------------------------------------------------- 1 | # Webpack Configurations 2 | 3 | electron-vue comes packed with three separate webpack config files located in the `.electron-vue/` directory. Aside for the optional use of the `web` output, both `main` and `renderer` are similar in setup. Both make use of `babel-preset-env` to target `node@7` features, use `babili`, and treat all modules as `externals`. 4 | 5 | ### `.electron-vue/webpack.main.config.js` 6 | 7 | Targets electron's `main` process. This configuration is rather bare, but does include some common `webpack` practices. 8 | 9 | ### `.electron-vue/webpack.renderer.config.js` 10 | 11 | Targets electron's `renderer` process. This configuration handles your Vue application, so it includes `vue-loader` and many other configurations that are available in the official `vuejs-templates/webpack` boilerplate. 12 | 13 | ##### White-listing Externals 14 | 15 | One important thing to consider about this config is that you can whitelist specific modules to not treat as webpack `externals`. There aren't many use cases where this functionality is needed, but for the case of Vue UI libraries that provide raw `*.vue` components they will need to be whitelisted, so `vue-loader` is able to compile them. Another use case would be using webpack `alias`es, such as setting `vue` to import the full Compiler + Runtime build. Because of this, `vue` is already in the whitelist. 16 | 17 | ### `.electron-vue/webpack.web.config.js` 18 | 19 | Targets building your `renderer` process source code for the browser. This config is provided as a strong starting base if you are in need of publishing to web. **electron-vue does not support web output further than what is provided.** Issues related to web output will most likely be deferred or closed. 20 | 21 | -------------------------------------------------------------------------------- /docs/pt_BR/webpack-configurations.md: -------------------------------------------------------------------------------- 1 | # Webpack Configurations 2 | 3 | electron-vue comes packed with three separate webpack config files located in the `.electron-vue/` directory. Aside for the optional use of the `web` output, both `main` and `renderer` are similar in setup. Both make use of `babel-preset-env` to target `node@7` features, use `babili`, and treat all modules as `externals`. 4 | 5 | ### `.electron-vue/webpack.main.config.js` 6 | 7 | Targets electron's `main` process. This configuration is rather bare, but does include some common `webpack` practices. 8 | 9 | ### `.electron-vue/webpack.renderer.config.js` 10 | 11 | Targets electron's `renderer` process. This configuration handles your Vue application, so it includes `vue-loader` and many other configurations that are available in the official `vuejs-templates/webpack` boilerplate. 12 | 13 | ##### White-listing Externals 14 | 15 | One important thing to consider about this config is that you can whitelist specific modules to not treat as webpack `externals`. There aren't many use cases where this functionality is need, but for the case of Vue UI libraries that provide raw `*.vue` components they will need to be whitelisted, so `vue-loader` is able to compile them. Another use case would be using webpack `alias`es, such as setting `vue` to import the full Compiler + Runtime build. Because of this, `vue` is already in the whitelist. 16 | 17 | ### `.electron-vue/webpack.web.config.js` 18 | 19 | Targets building your `renderer` process source code for the browser. This config is provided as a strong starting base if you are in need of publishing to web. **electron-vue does not support web output further than what is provided.** Issues related to web output will most likely be deferred or closed. 20 | 21 | -------------------------------------------------------------------------------- /template/test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const merge = require('webpack-merge') 5 | const webpack = require('webpack') 6 | 7 | const baseConfig = require('../../.electron-vue/webpack.renderer.config') 8 | const projectRoot = path.resolve(__dirname, '../../src/renderer') 9 | 10 | // Set BABEL_ENV to use proper preset config 11 | process.env.BABEL_ENV = 'test' 12 | 13 | let webpackConfig = merge(baseConfig, { 14 | devtool: '#inline-source-map', 15 | plugins: [ 16 | new webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': '"testing"' 18 | }) 19 | ] 20 | }) 21 | 22 | // don't treat dependencies as externals 23 | delete webpackConfig.entry 24 | delete webpackConfig.externals 25 | delete webpackConfig.output.libraryTarget 26 | 27 | // apply vue option to apply isparta-loader on js 28 | webpackConfig.module.rules 29 | .find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader' 30 | 31 | module.exports = config => { 32 | config.set({ 33 | browsers: ['visibleElectron'], 34 | client: { 35 | useIframe: false 36 | }, 37 | coverageReporter: { 38 | dir: './coverage', 39 | reporters: [ 40 | { type: 'lcov', subdir: '.' }, 41 | { type: 'text-summary' } 42 | ] 43 | }, 44 | customLaunchers: { 45 | 'visibleElectron': { 46 | base: 'Electron', 47 | flags: ['--show'] 48 | } 49 | }, 50 | frameworks: ['mocha', 'chai'], 51 | files: ['./index.js'], 52 | preprocessors: { 53 | './index.js': ['webpack', 'sourcemap'] 54 | }, 55 | reporters: ['spec', 'coverage'], 56 | singleRun: true, 57 | webpack: webpackConfig, 58 | webpackMiddleware: { 59 | noInfo: true 60 | } 61 | }) 62 | } 63 | -------------------------------------------------------------------------------- /docs/cn/using-electron-packager.md: -------------------------------------------------------------------------------- 1 | # [`electron-packager`](https://github.com/electron-userland/electron-packager) 的使用 2 | 3 | 所有 `electron-packager` 生成的文件都可以在 `build` 文件夹中找到。 4 | 5 | #### 针对所有平台的构建 6 | 7 | 请注意，并非所有操作系统都可以为所有其他平台进行构建。 8 | 9 | ```bash 10 | npm run build 11 | ``` 12 | 13 | #### 针对特定平台的构建 14 | 15 | 平台包括 `darwin`、 `mas`、 `linux` 和 `win32`。 16 | 17 | ```bash 18 | # build for darwin (macOS) 19 | npm run build:darwin 20 | ``` 21 | 22 | #### 清除 23 | 24 | 从 `build` 删除所有的构建文件。 25 | 26 | ```bash 27 | npm run build:clean 28 | ``` 29 | 30 | ### 非 Windows 用户注意事项 31 | 32 | 如果你想在非 Windows 平台上为 Windows 构建时 **使用自定义图标**，你必须安装 [wine](https://www.winehq.org/)。[更多信息](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms)。 33 | 34 | ### 默认的构建配置 35 | 36 | 可以在 `.electron-vue/build.config.js` 中使用基于 `electron-packager` 的 [各种选项](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options) 进行进一步定制。你可以设置 `package.json` 里的 `productName` 来设置构建后的程序名称。 37 | 38 | ```js 39 | { 40 | // 针对 'x64' 架构 41 | arch: 'x64', 42 | 43 | // 使用 'electron/asar' 压缩应用 44 | asar: true, 45 | 46 | // 应用程序的目录 47 | dir: path.join(__dirname, '../'), 48 | 49 | // 设置 electron 程序的图标 50 | // 基于平台添加文件的扩展 51 | // 52 | // 如果针对 Linux 进行构建, 请阅读 53 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#icon 54 | icon: path.join(__dirname, '../build/icons/icon'), 55 | 56 | // 忽略可能造成最后程序很大的文件 57 | ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/, 58 | 59 | // 把构建结果存储到 `builds` 60 | out: path.join(__dirname, '../build'), 61 | 62 | // 重写现有构建 63 | overwrite: true, 64 | 65 | // 指定平台的环境变量 66 | platform: process.env.BUILD_TARGET || 'all' 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/en/main-process.md: -------------------------------------------------------------------------------- 1 | # Main Process 2 | 3 | > 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. 4 | 5 | **From the **[**Electron Documentation**](http://electron.atom.io/docs/tutorial/quick-start/#main-process) 6 | 7 | --- 8 | 9 | Since the `main` process is essentially a full node environment, there is no initial project structure other than two files. 10 | 11 | #### `src/main/index.js` 12 | 13 | This file is your application's main file, the file in which `electron` boots with. It is also used as `webpack`'s entry file for production. All `main` process work should start from here. 14 | 15 | #### `app/src/main/index.dev.js` 16 | 17 | This file is used specifically and only for development as it installs `electron-debug` & `vue-devtools`. There shouldn't be any need to modify this file, but it can be used to extend your development needs. 18 | 19 | ## On the subject of using `__dirname` & `__filename` 20 | 21 | Since the `main` process is bundled using `webpack`, the use of `__dirname` & `__filename` **will not** provide an expected value in production. Referring to the [**File Tree**](/file-tree.md), you'll notice that in production the `main.js` is placed inside the `dist/electron` folder. Based on this knowledge, use `__dirname` & `__filename` accordingly. 22 | 23 | **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.** 24 | 25 | ``` 26 | app.asar 27 | ├─ dist 28 | │ └─ electron 29 | │ ├─ static/ 30 | │ ├─ index.html 31 | │ ├─ main.js 32 | │ └─ renderer.js 33 | ├─ node_modules/ 34 | └─ package.json 35 | ``` 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/en/savingreading-local-files.md: -------------------------------------------------------------------------------- 1 | # Read & Write Local Files 2 | 3 | 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. 4 | 5 | ### Use Case 6 | 7 | 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). 8 | 9 | ```bash 10 | yarn add nedb # or npm install nedb --save 11 | ``` 12 | 13 | **src/renderer/datastore.js** 14 | 15 | 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. 16 | 17 | ```js 18 | import Datastore from 'nedb' 19 | import path from 'path' 20 | import { remote } from 'electron' 21 | 22 | export default new Datastore({ 23 | autoload: true, 24 | filename: path.join(remote.app.getPath('userData'), '/data.db') 25 | }) 26 | ``` 27 | 28 | **src/renderer/main.js** 29 | 30 | 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. 31 | 32 | ```js 33 | import db from './datastore' 34 | 35 | /* Other Code */ 36 | 37 | Vue.prototype.$db = db 38 | ``` 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/pt_BR/savingreading-local-files.md: -------------------------------------------------------------------------------- 1 | # Read & Write Local Files 2 | 3 | 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. 4 | 5 | ### Use Case 6 | 7 | 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). 8 | 9 | ```bash 10 | yarn add nedb # or npm install nedb --save 11 | ``` 12 | 13 | **src/renderer/datastore.js** 14 | 15 | 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. 16 | 17 | ```js 18 | import Datastore from 'nedb' 19 | import path from 'path' 20 | import { remote } from 'electron' 21 | 22 | export default new Datastore({ 23 | autoload: true, 24 | filename: path.join(remote.app.getPath('userData'), '/data.db') 25 | }) 26 | ``` 27 | 28 | **src/renderer/main.js** 29 | 30 | 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. 31 | 32 | ```js 33 | import db from './datastore' 34 | 35 | /* Other Code */ 36 | 37 | Vue.prototype.$db = db 38 | ``` 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/cn/using-static-assets.md: -------------------------------------------------------------------------------- 1 | # 静态资源的使用 2 | 3 | 如果你以前使用过官方的 `vuejs-templates/webpack` 样板，那么你应该对 `static/` 目录很熟悉。这里面，你可以放置可供 `main` 和 `renderer` 进程使用的静态资源。在 Vue 应用程序中使用这些资源很简单，但是使用 `fs` 和其他需要完整路径的模块可能会有点棘手。 幸运的是，electron-vue 提供了一个 `__static` 变量，它可以在开发和产品阶段生成 `static/` 目录的路径。 4 | 5 | ### Vue 组件里 `src` 标签的使用案例 6 | 7 | 假设我有一个组件需要下载一个图像，但是直到一些其他任务完成后这个图像的地址才能知道。简单起见，让我们用一个 `data` 变量来绑定图像的来源。 8 | 9 | **SomeComponent.vue** 10 | 11 | ```html 12 | 15 | 16 | 24 | ``` 25 | 26 | 此处，`webpack` 并不会捆绑图像 `unsplash.png`，并且应用程序可以看到 `static/imgs/unsplash.png` 目录里的资源。感谢 `vue-loader` 为我们完成了所有繁琐的工作。 27 | 28 | ### JS 搭配 `fs`、`path` 和 `__static` 的使用案例 29 | 30 | 假设我们有一个静态资源，我们需要使用 `fs` 将它读入到我们的应用程序中，但是我们如何在开发和产品阶段为 `static/` 目录获得可靠的路径呢？electron-vue 提供了一个名为 `__static` 的全局变量，它将产生一个指向 `static/` 目录的正确路径。以下是我们在开发和产品阶段如何使用它读取一个简单的文本文件。 31 | 32 | **static/someFile.txt** 33 | 34 | ```txt 35 | foobar 36 | ``` 37 | 38 | **SomeFile.js \(** `main` **或** `renderer` **进程\)** 39 | 40 | ```js 41 | import fs from 'fs' 42 | import path from 'path' 43 | 44 | let fileContents = fs.readFileSync(path.join(__static, '/someFile.txt'), 'utf8') 45 | 46 | console.log(fileContents) 47 | // => "foobar" 48 | ``` 49 | 50 | 请注意，在产品阶段，默认情况下，所有文件都包含 [`asar`](https://github.com/electron/asar)，因为它是被极力推荐的。因此，`static/` 文件夹中的资源只能在 `electron` 内部访问，因为只有 `electron` 了解此行为。由此，如果你打算将文件分发给用户，例如在外部程序中打开文件，那么，首先你需要将这些资源从应用程序复制到用户的文档空间或桌面中。从那里，你可以使用 electron 的 API [`shell.openItem()`](https://electron.atom.io/docs/api/shell/#shellopenitemfullpath) 来打开这些资源。 51 | 52 | 这种情况的一种替代方法，是配置 `electron-packager` 或 `electron-builder`，设置特定文件，用来 “解压缩” 在产品阶段的 `asar` 存档。electron-vue 并没有计划支持这种方法; 任何与此或与如何设定此事项相关的问题将被关闭。 53 | -------------------------------------------------------------------------------- /docs/ko/vue_accessories.md: -------------------------------------------------------------------------------- 1 | # Vue Plugins 2 | 3 | 4 | electron-vue에는 `vue-cli`의 스캐폴딩 중 설치 할 수 있는 다음의 `vue` 플러그인이 포함되어 있습니다. 5 | 6 | * [axios ](https://github.com/mzabriskie/axios)\(web requests\) 7 | * [vue-electron](https://github.com/SimulatedGREG/vue-electron) \(Vue 객체에 붙은 electron APIs\) 8 | * [vue-router](https://github.com/vuejs/vue-router) \(단일 페이지 애플리케이션 라우트\) 9 | * [vuex](https://github.com/vuejs/vuex) \(유동적이고 직관적이며 정확한 애플리케이션 아키텍처\) 10 | 11 | --- 12 | 13 | ### [`axios`](https://github.com/mzabriskie/axios) 14 | 15 | > 브라우저와 Node.js를위한 Promise 기반의 HTTP 클라이언트 16 | 17 | `vue-resource`에 익숙하다면 대부분의 `axios` API가 거의 동일하기 때문에 익숙 할 것 입니다. `main` 프로세스 스크립트에서 `axios`을 쉽게 가져 오거나 `renderer` 프로세스에서 `this.$http` & `Vue.http`를 함께 사용할 수 있습니다. 개발 중에는 `webpack-dev-server`를 통해 요청이 전달되기 때문에 CORS 관련 이슈가 발생할 수 있음을 주의하세요. 작은 예비 수단으로 BrowserWindow configuration에서 [`webSecurity`](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions)를 ​​비활성화 할 수 있지만 개발 중에 비활성화하는 것을 잊미 마세요. 프로덕션에서 비활성화하는 것은 정말 권장하지 않습니다. 최종 애플리케이션에 심각한 보안 위험을 초래할 수 있습니다. 18 | 19 | ### [`vue-electron`](https://github.com/SimulatedGREG/vue-electron) 20 | 21 | > electron API를 Vue 객체에 덧붙여 모든 components에 액세스 할 수 있도록하는 vue 플러그인 22 | 23 | `this.$electron`으로 electron APIs에 접근할 수 있게 만든 간단한 `vue` 플러그인, 더 이상 모든 컴포넌트에서 `electron`을 import할 필요가 없습니다. 24 | 25 | ### [`vue-router`](https://github.com/vuejs/vue-router) 26 | 27 | > `vue-router`는 [Vue.js](http://vuejs.org/) 공식 라우터 입니다. Vue.js와 통합된 `vue-router`를 사용하여 단일 페이지 애플리케이션을 쉽게 만들 수 있습니다. 28 | 29 | 제공되는 프로젝트 구조는 공식적으로 제공되는 `vuejs-templates/webpack` 보일러플레이트 설정과 비슷하기 때문에 낯설지 않을 것입니다. 30 | 31 | ### [`vuex`](https://github.com/vuejs/vuex) 32 | 33 | > Vuex는 Vue.js 애플리케이션을 위한 **상태 관리 패턴 + 라이브러리** 입니다. 애플리케이션의 모든 components에 대한 중앙 집중식 저장소 역할을 하며 상태는 예측 가능한 방식으로만 변경 될 수 있습니다. 34 | 35 | 제공된 프로젝트 구조는 다소 모자라지만 `vuex` 모듈 패턴을 사용하여 데이터 저장소를 구성하는 데 도움이 됩니다. 특별한 `@/store/modules/index.js`로 `vuex` store에서 모든 모듈을 한 번에 가져와 봅시다. 36 | -------------------------------------------------------------------------------- /docs/pt_BR/main-process.md: -------------------------------------------------------------------------------- 1 | # Main Process 2 | 3 | > 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. 4 | 5 | **Tirado da **[**documentação do Electron**](http://electron.atom.io/docs/tutorial/quick-start/#main-process) 6 | 7 | --- 8 | 9 | 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. 10 | 11 | #### `src/main/index.js` 12 | 13 | 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. 14 | 15 | #### `app/src/main/index.dev.js` 16 | 17 | 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. 18 | 19 | ## No caso de usar o `__dirname` & `__filename` 20 | 21 | 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. 22 | 23 | **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`.** 24 | 25 | 26 | ``` 27 | app.asar 28 | ├─ dist 29 | │ └─ electron 30 | │ ├─ static/ 31 | │ ├─ index.html 32 | │ ├─ main.js 33 | │ └─ renderer.js 34 | ├─ node_modules/ 35 | └─ package.json 36 | ``` 37 | -------------------------------------------------------------------------------- /docs/ja/using-electron-packager.md: -------------------------------------------------------------------------------- 1 | # [`electron-packager`](https://github.com/electron-userland/electron-packager) の使用 2 | 3 | `electron-packager` によって作成された全てのビルドは `build` フォルダ内にあります。 4 | 5 | #### 全てのプラットフォーム用にビルド 6 | 7 | すべてのオペレーティングシステムが他のすべてのプラットフォーム用に構築できるとは限りません。 8 | 9 | ```bash 10 | npm run build 11 | ``` 12 | 13 | #### 特定のプラットフォーム用のビルド 14 | 15 | プラットフォームには `darwin`、 `mas`、 `linux` と `win32` があります。 16 | 17 | ```bash 18 | # darwin 用にビルドする(macOS) 19 | npm run build:darwin 20 | ``` 21 | 22 | #### クリーニング 23 | 24 | `build` から全てのビルドを削除します。 25 | 26 | ```bash 27 | npm run build:clean 28 | ``` 29 | 30 | ### Windows以外のユーザーのためのメモ 31 | 32 | Windows 以外のプラットフォームを使用して**カスタムアイコン付きで** Windows 用にビルドしたい場合、[wine](https://www.winehq.org/) をインストールする必要があります。[詳細な情報はこちら](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms)。 33 | 34 | ### デフォルトのビルド構成 35 | 36 | [こちら](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options) に記載のある `electron-packager` のオプションの通りに `.electron-vue/build.config.js` でさらなるカスタマイズが可能です。ビルドされたアプリケーションに適用される名前は `package.json` の `productName` の値が設定されます。 37 | 38 | ```js 39 | { 40 | // 'x64' アーキテクチャを対象にします 41 | arch: 'x64', 42 | // 'electron/asar' を使用してアプリケーションを圧縮します 43 | asar: true, 44 | // アプリケーションのディレクトリ 45 | dir: path.join(__dirname, '../'), 46 | // electron のアプリケーションアイコンを設定します 47 | // ファイル拡張子はプラットフォームに基づいて追加されます 48 | // 49 | // Linux 用にビルドする場合、以下を参照してください 50 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#icon 51 | icon: path.join(__dirname, '../build/icons/icon'), 52 | // 最終的なビルドサイズを膨らませるファイルを無視する 53 | ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/, 54 | // ビルドファイルを `builds` に保存する 55 | out: path.join(__dirname, '../build'), 56 | // ビルドファイルを上書きする 57 | overwrite: true, 58 | // プラットフォームを設定する環境変数 59 | platform: process.env.BUILD_TARGET || 'all' 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /docs/pt_BR/new-releases.md: -------------------------------------------------------------------------------- 1 | # Novas versões 2 | 3 | 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_. 4 | 5 | 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. 6 | 7 | ### Objetivos passados 8 | 9 | #### [Multiplex](https://github.com/SimulatedGREG/electron-vue/milestone/1?closed=1) 10 | 11 | * Migração para o `webpack` 2 12 | * Suporte para o `electron-builder` 13 | * Supoerte para a contrução de processo `main` 14 | * Resolvendo problemas gerais 15 | 16 | #### [Minimizar](https://github.com/SimulatedGREG/electron-vue/issues/171) 17 | 18 | * Migração para um unico arquivo `package.json` 19 | * Travis CI / AppVeyor configs for `electron-builder` users 20 | * Configuraçẽos para Travis CI / AppVeyor para os usuarios de `electron-builder` 21 | * Saida web minima no processo `renderer` 22 | 23 | * Migração para o `axios` 24 | * Suporte completo para agrupar o processo `main` 25 | * Reescrevendo os scripts de desenvolvimento e construção 26 | * Migration to `babili` to remove the need of transpiling down completely to ES5 27 | * Migração para o `babili` para remover a nescessidade de transpilar completamente para o ES5 28 | * Suporte para `static/` assets enquanto usam modulos que nescessitam de prover um caminho completo \([`__static`](/using-static-assets.md)\) 29 | -------------------------------------------------------------------------------- /template/src/main/index.js: -------------------------------------------------------------------------------- 1 | {{#if_eq eslintConfig 'standard'}} 2 | 'use strict' 3 | 4 | {{/if_eq}} 5 | import { app, BrowserWindow } from 'electron'{{#if_eq eslintConfig 'airbnb'}} // eslint-disable-line{{/if_eq}} 6 | 7 | /** 8 | * Set `__static` path to static files in production 9 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html 10 | */ 11 | if (process.env.NODE_ENV !== 'development') { 12 | global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\'){{#if_eq eslintConfig 'airbnb'}} // eslint-disable-line{{/if_eq}} 13 | } 14 | 15 | let mainWindow 16 | const winURL = process.env.NODE_ENV === 'development' 17 | ? `http://localhost:9080` 18 | : `file://${__dirname}/index.html` 19 | 20 | function createWindow () { 21 | /** 22 | * Initial window options 23 | */ 24 | mainWindow = new BrowserWindow({ 25 | height: 563, 26 | useContentSize: true, 27 | width: 1000 28 | }) 29 | 30 | mainWindow.loadURL(winURL) 31 | 32 | mainWindow.on('closed', () => { 33 | mainWindow = null 34 | }) 35 | } 36 | 37 | app.on('ready', createWindow) 38 | 39 | app.on('window-all-closed', () => { 40 | if (process.platform !== 'darwin') { 41 | app.quit() 42 | } 43 | }) 44 | 45 | app.on('activate', () => { 46 | if (mainWindow === null) { 47 | createWindow() 48 | } 49 | }) 50 | {{#if_eq builder 'builder'}} 51 | 52 | /** 53 | * Auto Updater 54 | * 55 | * Uncomment the following code below and install `electron-updater` to 56 | * support auto updating. Code Signing with a valid certificate is required. 57 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating 58 | */ 59 | 60 | /* 61 | import { autoUpdater } from 'electron-updater' 62 | 63 | autoUpdater.on('update-downloaded', () => { 64 | autoUpdater.quitAndInstall() 65 | }) 66 | 67 | app.on('ready', () => { 68 | if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() 69 | }) 70 | */ 71 | {{/if_eq}} 72 | -------------------------------------------------------------------------------- /docs/cn/renderer-process.md: -------------------------------------------------------------------------------- 1 | # 渲染器进程 2 | 3 | > 由于 Electron 使用 Chromium 显示网页，那么，Chromium 的多进程架构也被使用。Electron 中的每个网页都在自己的进程中运行，称为渲染器进程 (renderer process)。 4 | > 5 | > 在正常的浏览器中，网页通常运行在沙盒封装化的环境中，并且不允许访问本机资源。然而，Electron 用户有权在网页中使用 Node.js 的 API，从而允许较低级别的操作系统交互。 6 | 7 | **选自** [**Electron 文档**](http://electron.atom.io/docs/tutorial/quick-start/#renderer-process) 8 | 9 | --- 10 | 11 | ## 关于 `vue` 和 `vuex` 12 | 13 | ### vue 组件 14 | 15 | 如果你不熟悉 Vue 组件，请阅读 [此处](http://vuejs.org/v2/guide/single-file-components.html)。组件的使用使我们大型、复杂的应用程序更加有组织化。每个组件都有能力封装自己的 CSS、模板 和 JavaScript 的功能。 16 | 17 | 组件存放在 `src/renderer/components` 里。创建子组件时，一个常用的组织化实践是将它们放置在一个使用其父组件名称的新文件夹中。在协调不同的路由时，这一点特别有用。 18 | 19 | ``` 20 | src/renderer/components 21 | ├─ ParentComponentA 22 | │ ├─ ChildComponentA.vue 23 | │ └─ ChildComponentB.vue 24 | └─ ParentComponentA.vue 25 | ``` 26 | 27 | ### vue 路由 28 | 29 | 有关 `vue-router` 的更多信息请点击 [这里](https://github.com/vuejs/vue-router)。 简而言之，我们鼓励使用 `vue-router`，因为创建 单页应用程序 (Single Page Application) 在制作 electron 程序的时候更加实用。你真的想管理一堆 BrowserWindows，然后在其之间传达信息吗？恐怕不会。 30 | 31 | 路由被保存在 `src/renderer/router/index.js` 里并定义如下... 32 | 33 | ```js 34 | { 35 | path: '', 36 | name: '', 37 | component: require('@/components/View') 38 | } 39 | ``` 40 | 41 | ... 其中 `` 和 `` 都是变量。然后，这些路由使用 `src/renderer/App.vue` 的 `` 指令附加到组件树上。 42 | 43 | ##### 注意 44 | 45 | 在使用 `vue-router` 时，不要使用 [**HTML5 历史模式**](http://router.vuejs.org/en/essentials/history-mode.html)。 此模式严格用于通过 `http` 协议提供文件，并且不能正常使用 `file` 协议，但是 electron 在产品构建中使用此协议提供文件。默认的 `hash` 模式正是我们所需要的。 46 | 47 | ### vuex 模块 48 | 49 | 描述 `vuex` 并不是简单的事情，所以请阅读 [这里](https://vuex.vuejs.org/zh/)，以便更好地了解它试图解决的问题及其工作原理。 50 | 51 | electron-vue 利用 `vuex` 的模块结构创建多个数据存储，并保存在 `src/renderer/store/modules` 中。 52 | 53 | 拥有多个数据存储对于组织化来说可能很好，但你必须导入每一个数据，这也可能令人厌烦。但是不要担心，因为 `src/renderer/store/modules/index.js` 帮我们处理了这些麻烦事！这个简单的脚本让 `src/renderer/store/index.js` 一次性导入我们所有的模块。如果所有这些都没有，只要知道你可以轻松地复制给定的 `Counter.js` 模块，它将以 "神奇" 的方式被加载进来。 54 | -------------------------------------------------------------------------------- /docs/en/project_structure.md: -------------------------------------------------------------------------------- 1 | # Project Structure 2 | 3 | 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. 4 | 5 | ### Single `package.json` Setup 6 | 7 | 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. 8 | 9 | #### `dependencies` 10 | 11 | These dependencies **will** be included in your final production app. So if your application needs a certain module to function, then install it here! 12 | 13 | #### `devDependencies` 14 | 15 | 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. 16 | 17 | #### Installing Native NPM Modules 18 | 19 | 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. 20 | 21 | ### On the subject of the `main` process 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /docs/pt_BR/project_structure.md: -------------------------------------------------------------------------------- 1 | # Project Structure 2 | 3 | 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. 4 | 5 | ### Single `package.json` Setup 6 | 7 | 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. 8 | 9 | #### `dependencies` 10 | 11 | These dependencies **will** be included in your final production app. So if your application needs a certain module to function, then install it here! 12 | 13 | #### `devDependencies` 14 | 15 | 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. 16 | 17 | #### Installing Native NPM Modules 18 | 19 | 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. 20 | 21 | ### On the subject of the `main` process 22 | 23 | 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. 24 | -------------------------------------------------------------------------------- /docs/cn/using_pre-processors.md: -------------------------------------------------------------------------------- 1 | # 预处理器的使用 2 | 3 | 将 [`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) 相关的详细信息。 4 | 5 | ## 使用案例 6 | 7 | 假设我们需要使用 Sass/SCSS 来预处理我们的 CSS。首先，我们需要安装正确的 `webpack` 加载器来处理这种语法。 8 | 9 | #### 安装 `sass-loader` 10 | 11 | ```bash 12 | npm install --save-dev sass-loader node-sass 13 | ``` 14 | 15 | 一旦安装了我们需要的加载器，一切就都差不多完成了。`vue-loader` 将神奇地做好其余的工作。现在我们可以轻松地将 `lang="sass"` 或 `lang="scss"` 添加到我们的 Vue 组件文件中。注意，我们还安装了 `node-sass`，因为它是 `sass-loader` 的依赖包。 16 | 17 | #### 应用 `lang` 属性 18 | 19 | 所以... 20 | 21 | ```html 22 | 27 | ``` 28 | 29 | ... 现在变成了 ... 30 | 31 | ```html 32 | 37 | ``` 38 | 39 | 相同的原理适用于任何其他预处理器。那么，也许你的 JS 需要 coffeescript？只需安装 [coffeescript-loader](https://github.com/webpack/coffee-loader)，并将属性 `lang=“coffeescript”` 应用到你的 ` 37 | 38 | 39 | ``` 40 | 41 | ### On the subject of using CDNs 42 | 43 | Although the benefits of using assets served from a CDN can be great for your application's final build size, I would advised against using them. The main reason being is that by doing so you are assuming the application always has access to the internet, which is not always the case for Electron apps. This becomes a rather major issue with CSS frameworks like bootstrap, as your app will quickly become an un-styled mess. 44 | 45 | > "I don't care, I still want to use a CDN" 46 | 47 | 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. 48 | 49 | -------------------------------------------------------------------------------- /docs/ja/using-static-assets.md: -------------------------------------------------------------------------------- 1 | # 静的アセットの使用 2 | 3 | もし以前に `vuejs-templates/webpack` ボイラープレートを使用したことがある場合、 `static/` ディレクトリに詳しいでしょう。ここは `main` プロセスや `renderer` プロセスが使用する静的アセットを配置する場所です。 これらのアセットを Vue アプリケーション内で使用するのは簡単ですが、フルパスを必要とする `fs` や他のモジュールで使用するのには少し難解です。幸いなことに、electron-vue は開発と本番で `static/` ディレクトリまでのパスを返却する `__static` 変数を提供しています。 4 | 5 | ### Vue コンポーネント内で `src` タグを使用する場合 6 | 7 | 画像を読み込むコンポーネントがありますが、他のタスクが完了するまで画像のパスが分からないとします。物事を簡単にするために、 `` の src をバインドするために、 `data` 変数を使用しましょう。 8 | 9 | **SomeComponent.vue** 10 | 11 | ```html 12 | 15 | 23 | ``` 24 | 25 | `webpack` は `unsplash.png` をバンドルしません。アプリケーションは `static/imgs/unsplash.png` ディレクトリ内を調べます。`vue-loader` のおかげで、全てのめんどくさいことを代わりにやってくれます。 26 | 27 | ### JS で `fs`、`path`、`__static` を使用する場合 28 | 29 | `fs` を使用してアプリケーションに読み込む必要のある静的アセットがある場合、開発と本番の両方で `static/` ディレクトリまでの信頼できるパスを取得するにはどのようにすれば良いでしょうか？electron-vue は `static/` ディレクトリまでの適切なパスを返却する `__static` という名前のグローバル変数を提供しています。ここでは、開発と本番の両方で簡単なテキストファイルを読むためにそれを使う方法を示します。 30 | 31 | **static/someFile.txt** 32 | 33 | ```txt 34 | foobar 35 | ``` 36 | 37 | **SomeFile.js (**`main`** プロセスもしくは **`renderer`** プロセス)** 38 | 39 | ```js 40 | import fs from 'fs' 41 | import path from 'path' 42 | let fileContents = fs.readFileSync(path.join(__static, '/someFile.txt'), 'utf8') 43 | console.log(fileContents) 44 | // => "foobar" 45 | ``` 46 | 47 | 本番では全てのファイルが強く推奨されている通り、デフォルトで [`asar`](https://github.com/electron/asar) でパッケージングされていることに注意してください。このため、この挙動を認識しているので、`static/` フォルダ内のアセットは `electron` 内でのみアクセスできます。例えば外部プログラムで開けるようにユーザにファイルを配布したい場合、これらのアプリケーションのアセットをユーザのドキュメントスペースまたはデスクトップにコピーする必要があります。そこからそれらのアセットを開くために [`shell.openItem()`](https://electron.atom.io/docs/api/shell/#shellopenitemfullpath) という electron API を使用することができます。 48 | 49 | この状況の別の解決策は特定のファイルを本番の `asar` アーカイブから "解凍" するように `electron-packager`/`electron-builder` を構成することです。electron-vue はこの方法をサポートする予定はありません。これに関連する課題、または設定方法に関する課題は終了します。 50 | -------------------------------------------------------------------------------- /template/src/renderer/components/LandingPage/SystemInformation.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 53 | 54 | 80 | -------------------------------------------------------------------------------- /docs/en/debugging-production.md: -------------------------------------------------------------------------------- 1 | # Debugging 2 | 3 | ### Main Process 4 | 5 | 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. 6 | 7 | ```bash 8 | ┏ Electron ------------------- 9 | 10 | Debugger listening on port 5858. 11 | Warning: This is an experimental feature and could change at any time. 12 | To start debugging, open the following URL in Chrome: 13 | chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/22271e96-df65-4bab-9207-da8c71117641 14 | 15 | ┗ ---------------------------- 16 | ``` 17 | 18 | ### Production Builds 19 | 20 | ###### Notice 21 | 22 | Although it is possible to debug your application in production, please do know that production code is minified and highly unreadable compared to what you find during development. 23 | 24 | ##### `renderer` Process 25 | 26 | There isn't much of a big difference here than it is in development. You can simply invoke the dev tools using the [`BrowserWindow` APIs](https://electron.atom.io/docs/api/web-contents/#contentsopendevtoolsoptions). Using the initial electron-vue setup, you can add the following snippet of code inside `src/main/index.js` , just after the `new BrowserWindow` construction, to force the dev tools to open on launch. 27 | 28 | ```js 29 | mainWindow.webContents.openDevTools() 30 | ``` 31 | 32 | ##### `main` Process 33 | 34 | Similar to what is mentioned above, you can also attach an external debugger to the `main` process to remotely debug your application. In order to activate the debugger in production you can add the follow snippet after the `app` import inside `src/main/index.js`. Then you can navigate Google Chrome to `chrome://inspect` and get connected. 35 | 36 | ```js 37 | app.commandLine.appendSwitch('inspect', '5858') 38 | ``` 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/pt_BR/entry_indexhtml.md: -------------------------------------------------------------------------------- 1 | # `index.html` de entrada 2 | 3 | electron-vue se utiliza do [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) para criar o `index.html` nas builds de produção. Durante o desenvolviment você ira encontrar o `index.ejs` na pasta `src/`. E aqui que você faz as mudanças no HTML de entrada. 4 | 5 | Se vocês esta desfamiliarizado sobre como o plugin funciona, então eu encorajo você dar uma olhada nisso [documentação](https://www.npmjs.com/package/html-webpack-plugin). Resumindo, esse plugin vai automaticamente injetar os assets da produção incluindo `renderer.js` e `styles.css` no arquivo minificado no `index.html`. 6 | 7 | ### `index.ejs` durante desenvolvimento 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | <%= ... %> 16 | 17 | 18 |
19 | 20 | 21 | 22 | ``` 23 | 24 | ### `index.html` em produção \(não minificado\) 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | app 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | ``` 40 | 41 | ### No assunto de usar CDNs 42 | 43 | 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. 44 | 45 | > "Eu não ligo, eu ainda quero usar CDNs" 46 | 47 | 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. 48 | -------------------------------------------------------------------------------- /docs/pt_BR/vue_accessories.md: -------------------------------------------------------------------------------- 1 | # Vue Plugins 2 | 3 | electron-vue comes packed with the following `vue` plugins that can be installed during `vue-cli` scaffolding... 4 | 5 | * [axios ](https://github.com/mzabriskie/axios)\(web requests\) 6 | * [vue-electron](https://github.com/SimulatedGREG/vue-electron) \(attach electron APIs to Vue object\) 7 | * [vue-router](https://github.com/vuejs/vue-router) \(single page application routes\) 8 | * [vuex](https://github.com/vuejs/vuex) \(flux-inspired application architecture\) 9 | 10 | --- 11 | 12 | ### [`axios`](https://github.com/mzabriskie/axios) 13 | 14 | > Promise based HTTP client for the browser and node.js 15 | 16 | If you are familiar with `vue-resource`, then `axios` will feel very familiar as most of the API is nearly identical. You can easily import `axios` in your `main` process scripts or use with `this.$http` & `Vue.http` in the `renderer` process. 17 | 18 | ### [`vue-electron`](https://github.com/SimulatedGREG/vue-electron) 19 | 20 | > The vue plugin that attaches electron APIs to the Vue object, making them accessible to all components. 21 | 22 | A simple `vue` plugin that makes electron APIs easily accessible with`this.$electron`, no longer needing to import `electron` into every component necessary. 23 | 24 | ### [`vue-router`](https://github.com/vuejs/vue-router) 25 | 26 | > `vue-router` is the official router for [Vue.js](http://vuejs.org/). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. 27 | 28 | The provided project structure should feel familiar to the setup provided in the official `vuejs-templates/webpack` boilerplate. 29 | 30 | ### [`vuex`](https://github.com/vuejs/vuex) 31 | 32 | > Vuex is a **state management pattern + library **for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. 33 | 34 | The provided project structure is rather bare but does encourage the use of `vuex`'s module pattern to help organize your data stores. The extra `@/store/modules/index.js` let's your `vuex` store import all modules in a one-shot manner. 35 | 36 | -------------------------------------------------------------------------------- /template/.electron-vue/webpack.main.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'main' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const MinifyPlugin = require("babel-minify-webpack-plugin") 10 | 11 | let mainConfig = { 12 | entry: { 13 | main: path.join(__dirname, '../src/main/index.js') 14 | }, 15 | externals: [ 16 | ...Object.keys(dependencies || {}) 17 | ], 18 | module: { 19 | rules: [ 20 | {{#if eslint}} 21 | { 22 | test: /\.(js)$/, 23 | enforce: 'pre', 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'eslint-loader', 27 | options: { 28 | formatter: require('eslint-friendly-formatter') 29 | } 30 | } 31 | }, 32 | {{/if}} 33 | { 34 | test: /\.js$/, 35 | use: 'babel-loader', 36 | exclude: /node_modules/ 37 | }, 38 | { 39 | test: /\.node$/, 40 | use: 'node-loader' 41 | } 42 | ] 43 | }, 44 | node: { 45 | __dirname: process.env.NODE_ENV !== 'production', 46 | __filename: process.env.NODE_ENV !== 'production' 47 | }, 48 | output: { 49 | filename: '[name].js', 50 | libraryTarget: 'commonjs2', 51 | path: path.join(__dirname, '../dist/electron') 52 | }, 53 | plugins: [ 54 | new webpack.NoEmitOnErrorsPlugin() 55 | ], 56 | resolve: { 57 | extensions: ['.js', '.json', '.node'] 58 | }, 59 | target: 'electron-main' 60 | } 61 | 62 | /** 63 | * Adjust mainConfig for development settings 64 | */ 65 | if (process.env.NODE_ENV !== 'production') { 66 | mainConfig.plugins.push( 67 | new webpack.DefinePlugin({ 68 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 69 | }) 70 | ) 71 | } 72 | 73 | /** 74 | * Adjust mainConfig for production settings 75 | */ 76 | if (process.env.NODE_ENV === 'production') { 77 | mainConfig.plugins.push( 78 | new MinifyPlugin(), 79 | new webpack.DefinePlugin({ 80 | 'process.env.NODE_ENV': '"production"' 81 | }) 82 | ) 83 | } 84 | 85 | module.exports = mainConfig 86 | -------------------------------------------------------------------------------- /docs/en/end-to-end_testing.md: -------------------------------------------------------------------------------- 1 | # End-to-End Testing 2 | 3 | electron-vue makes use of [Spectron](http://electron.atom.io/spectron/) and the [Mocha](https://mochajs.org/) \(with [Chai](http://chaijs.com/)\) test framework for end-to-end testing. Mocha & Chai APIs, including `expect`, `should`, and `assert`, are made available in global scope. 4 | 5 | ### Running tests 6 | 7 | ```bash 8 | # Begin Mocha 9 | npm run e2e 10 | ``` 11 | 12 | ##### Note 13 | 14 | Before running end-to-end tests, a `npm run pack` is called to create a production build that Spectron can consume during tests. 15 | 16 | ### File Structure 17 | 18 | ``` 19 | my-project 20 | ├─ test 21 | | ├─ e2e 22 | │ │ ├─ specs/ 23 | │ │ ├─ index.js 24 | └─ └─ └─ utils.js 25 | ``` 26 | 27 | **For the most part, you can ignore **`index.js`** and focus solely on writing **`specs/`**.** 28 | 29 | #### `specs/` 30 | 31 | Inside this directory is where actual tests are written. Thanks to the power of `babel-register`, you have full access to ES2015. 32 | 33 | #### `index.js` 34 | 35 | This file acts as the main entry to Mocha and gathers all tests written in `specs/` for testing. 36 | 37 | #### `utils.js` 38 | 39 | 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. 40 | 41 | ### On the subject of Spectron 42 | 43 | Spectron is the official [electron](http://electron.atom.io) testing framework that uses both [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) and [WebDriverIO](http://webdriver.io/) for manipulating DOM elements. 44 | 45 | #### Using WebDriverIO 46 | 47 | As stated in the Spectron [documentation](https://github.com/electron/spectron#client), access to [WebDriverIO APIs](http://webdriver.io/api.html) can be accessed through `this.app.client`. Since electron-vue uses Mocha, the context of `this` is shared between `afterEach`, `beforeEach`, and `it`. Because of this, it is important to note that ES2015 arrow functions cannot not be used in certain situations as the context of `this` will be overwritten \([more info](https://mochajs.org/#arrow-functions)\). 48 | 49 | -------------------------------------------------------------------------------- /docs/ko/end-to-end_testing.md: -------------------------------------------------------------------------------- 1 | # End-to-End Testing 2 | 3 | electron-vue makes use of [Spectron](http://electron.atom.io/spectron/) and the [Mocha](https://mochajs.org/) \(with [Chai](http://chaijs.com/)\) test framework for end-to-end testing. Mocha & Chai APIs, including `expect`, `should`, and `assert`, are made available in global scope. 4 | 5 | ### Running tests 6 | 7 | ```bash 8 | # Begin Mocha 9 | npm run e2e 10 | ``` 11 | 12 | ##### Note 13 | 14 | Before running end-to-end tests, a `npm run pack` is called to create a production build that Spectron can consume during tests. 15 | 16 | ### File Structure 17 | 18 | ``` 19 | my-project 20 | ├─ test 21 | | ├─ e2e 22 | │ │ ├─ specs/ 23 | │ │ ├─ index.js 24 | └─ └─ └─ utils.js 25 | ``` 26 | 27 | **For the most part, you can ignore **`index.js`** and focus solely on writing **`specs/`**.** 28 | 29 | #### `specs/` 30 | 31 | Inside this directory is where actual tests are written. Thanks to the power of `babel-register`, you have full access to ES2015. 32 | 33 | #### `index.js` 34 | 35 | This file acts as the main entry to Mocha and gathers all tests written in `specs/` for testing. 36 | 37 | #### `utils.js` 38 | 39 | 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. 40 | 41 | ### On the subject of Spectron 42 | 43 | Spectron is the official [electron](http://electron.atom.io) testing framework that uses both [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) and [WebDriverIO](http://webdriver.io/) for manipulating DOM elements. 44 | 45 | #### Using WebDriverIO 46 | 47 | As stated in the Spectron [documentation](https://github.com/electron/spectron#client), access to [WebDriverIO APIs](http://webdriver.io/api.html) can be accessed through `this.app.client`. Since electron-vue uses Mocha, the context of `this` is shared between `afterEach`, `beforeEach`, and `it`. Because of this, it is important to note that ES2015 arrow functions cannot not be used in certain situations as the context of `this` will be overwritten \([more info](https://mochajs.org/#arrow-functions)\). 48 | 49 | -------------------------------------------------------------------------------- /docs/cn/faqs.md: -------------------------------------------------------------------------------- 1 | # 常见问题 2 | 3 | * [为什么运行 `npm run dev` 之后我的 electron 应用程序是空白的？](#why-is-my-electron-app-blank-after-running-npm-run-dev) 4 | * [为什么我的 electron 程序显示了文件浏览器？](#why-does-my-electron-app-show-a-file-explorer) 5 | * [为什么没有 `vue-devtools` 或 `devtron`？](#why-is-vue-devtoolsdevtron-missing) 6 | * [在哪里放置我的静态资源？](#where-do-i-put-static-assets) 7 | * [为什么 `npm run lint` 会出现错误？](#why-did-npm-run-lint-end-with-an-error) 8 | * [为什么我无法在网页浏览器中加载应用程序？](#why-cant-i-load-my-app-in-a-web-browser) 9 | * [如何导入 `jquery`？](#how-do-import-jquery) 10 | * [如何调试 `main` 进程？](#how-can-i-debug-the-main-process) 11 | 12 | --- 13 | 14 | ## 为什么运行 `npm run dev` 之后我的 electron 程序是空白的？ 15 | 16 | #### 简要 17 | 18 | 请确认你没有设置可能篡改 `webpack-dev-server` 的个人 **代理**。 19 | 20 | ## 为什么我的 electron 程序显示了文件浏览器？ 21 | 22 | #### 简要 23 | 24 | 你的 `src/renderer` 包含错误。请检查 控制台 (console)，修复错误，然后用 `CommandOrControl+R` 刷新 electron。 25 | 26 | ##### 详述 27 | 28 | 如果你的 `src/renderer` 中出现错误，则会在首次运行时与 ESLint 产生冲突。接着，一个无效的 webpack 的 `renderer.js` 会被生成出来，它会打断 `HtmlWebpackPlugin` 创建 `index.html`。由于 `webpack-dev-server` 没有 `index.html` 可以提供服务，所以服务器失败，程序返回到文件浏览器。 29 | 30 | ## 为什么没有 `vue-devtools` 或 `devtron`？ 31 | 32 | 如果缺少 `vue-devtools` 或 `devtron`，请确保首次启动时，关闭并重新打开开发者工具面板。另外，请检查你的终端，检查是否在安装过程中有任何可能的错误消息。 33 | 34 | ## 在哪里放置我的静态资源？ 35 | 36 | [**静态资源的使用**](using-static-assets.md) 37 | 38 | ## 为什么 `npm run lint` 会出现错误？ 39 | 40 | eslint 的默认属性是将控制台的错误打印出来，如果发现脚本以非零值退出结束时 \(它会产生 npm 错误\)。这是正常的行为。 41 | 42 | ## 为什么我无法在网页浏览器中加载应用程序？ 43 | 44 | [\#195](https://github.com/SimulatedGREG/electron-vue/issues/195) 45 | 46 | ## 如何导入 `jquery`？ 47 | 48 | 如果你想使用 `bootstrap`，我将不得不在此打住你。在同一环境中使用 `vue` 和 `jquery` 并不是一个好的做法，这导致两个框架的相互冲突。我强烈建议使用一个 `bootstrap` 的替代方法，并使用 `vue` 提供的 JavaScript 的功能。一些建议包括使用 [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) 和 [`vue-strap`](https://github.com/yuche/vue-strap)。若有任何原因使你必须使用 `jquery`，记得从 `webpack` 的文档里寻求有关 `ProvidePlugin` 的指导，或者参见 [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192)。 49 | 50 | ## 如何调试 `main` 进程？ 51 | 52 | 当使用 `electron@^1.7.2` 时，你可以打开 Goog​​le Chrome，然后转到 `chrome://inspect`，在应用程序以开发模式运行时，弹出远程的 electron 进程。 53 | 54 | [Electron 文档]（https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md） 55 | -------------------------------------------------------------------------------- /docs/ja/using_pre-processors.md: -------------------------------------------------------------------------------- 1 | # プリプロセッサの使用 2 | 3 | [`webpack`](https://github.com/webpack/webpack) で [`vue-loader`](https://github.com/vuejs/vue-loader) を使用することの大きな利点の一つは、特に努力せずに Vue コンポーネントファイル内で HTML/CSS/JS を直接前もって処理できることです。詳細は[**こちら**](https://jp.vuejs.org/v2/guide/single-file-components.html)を確認してください。 4 | 5 | ## ユースケース 6 | 7 | CSS の前処理に Sass/SCSS を使う必要があるとします。まず、この構文を処理するために適切な `webpack` ローダーをインストールする必要があります。 8 | 9 | #### `sass-loader` のインストール 10 | 11 | ```bash 12 | npm install --save-dev sass-loader node-sass 13 | ``` 14 | 15 | 必要なローダーがインストールされると、完成です。`vue-loader` は魔法のように残り作業をやってくれます。これで、Vue コンポーネントファイルに `lang="sass"` または `lang="scss"` を簡単に追加できます。 `sass-loader` の依存パッケージであるため、 `node-sass` もインストールしたことに注意してください。 16 | 17 | #### `lang` 属性を適用する 18 | 19 | これを... 20 | 21 | ```html 22 | 27 | ``` 28 | 29 | ...こうします... 30 | 31 | ```html 32 | 37 | ``` 38 | 39 | 他のプリプロセッサにも同じ原則が適用されます。JS に coffeescript が必要かもしれませんね？[coffeescript-loader](https://github.com/webpack/coffee-loader) をインストールして、 ` 24 | ``` 25 | 26 | 여기서 `webpack`은 `unsplash.png` 이미지를 번들로 제공하지 않으며 애플리케이션은 해당 asset을 `static/imgs/unsplash.png` 디렉토리에서 찾습니다. `vue-loader` 덕분에 모든 더러운 작업이 완료되었습니다. 27 | 28 | ### Use Case within JS with `fs`,`path` and `__static` 29 | 30 | `fs`를 사용하여 애플리케이션에서 읽을 static asset이 있다고 가정 해 봅시다. 근대 개발과 프로덕션 둘 다에서 `static/` 디렉토리에 대한 신뢰할 수있는 경로를 얻는 방법은 무엇입니까? electron-vue는 `static/` 디렉토리에 대한 적절한 경로를 생성하는 `__static`이라는 전역 변수를 제공합니다. 다음은 개발과 프로덕션 둘 다에서 간단한 텍스트 파일을 읽는 방법입니다. 31 | 32 | **static/someFile.txt** 33 | 34 | ```txt 35 | foobar 36 | ``` 37 | 38 | **SomeFile.js \(**`main`** or **`renderer`** process\)** 39 | 40 | ```js 41 | import fs from 'fs' 42 | import path from 'path' 43 | 44 | let fileContents = fs.readFileSync(path.join(__static, '/someFile.txt'), 'utf8') 45 | 46 | console.log(fileContents) 47 | // => "foobar" 48 | ``` 49 | 50 | 프로덕션 환경에서는 기본적으로 모든 파일이 [`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을 열 수 있습니다. 51 | 52 | 이 상황에서 다른 대안은 특정 파일을 프로덕션 환경의 `asar` 아카이브에서 "unpack"하도록 `electron-packager`/`electron-builder`를 구성하는 것 입니다. electron-vue는 이 방법을 지원할 계획이 없습니다. 이 이슈와 관련된 것 또는 이를 설정하는 방법은 닫힙니다. 53 | 54 | -------------------------------------------------------------------------------- /docs/en/getting_started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | ## Scaffolding 4 | 5 | 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`. 6 | 7 | ```bash 8 | # Install vue-cli and scaffold boilerplate 9 | npm install -g vue-cli 10 | vue init simulatedgreg/electron-vue my-project 11 | 12 | # Install dependencies and run your app 13 | cd my-project 14 | yarn # or npm install 15 | yarn run dev # or npm run dev 16 | ``` 17 | 18 | #### On the subject of electron 19 | 20 | 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/). 21 | 22 | #### A note for Windows Users 23 | 24 | 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. 25 | 26 | 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. 27 | 28 | 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. 29 | 30 | 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 ¯\\\_\(ツ\)\_/¯\). 31 | 32 | -------------------------------------------------------------------------------- /docs/ko/using_pre-processors.md: -------------------------------------------------------------------------------- 1 | # 전처리기 사용하기 2 | 3 | [`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)를 참조하세요. 4 | 5 | ## Use Case 6 | 7 | CSS를 사전 처리하기 위해 Sass/SCSS를 사용해야한다고 가정 해봅시다. 먼저 다음 구문을 처리 할 적절한 `webpack` loader를 설치해야합니다. 8 | 9 | #### `sass-loader` 설치하기 10 | 11 | ```bash 12 | npm install --save-dev sass-loader node-sass 13 | ``` 14 | 15 | 필요한 로더가 설치되면, 거의 모든 것이 끝난 것 입니다. `vue-loader`는 마술처럼 나머지를 처리합니다. 이제 Vue component 파일에 `lang="sass"` 또는 `lang="scss"`를 쉽게 추가 할 수 있습니다 `sass-loader`의 의존성 패키지인 `node-sass`도 설치했음을 주의하세요. 16 | 17 | #### `lang` 속성 적용하기 18 | 19 | 그래서... 20 | 21 | ```html 22 | 27 | ``` 28 | 29 | ...이제 된다... 30 | 31 | ```html 32 | 37 | ``` 38 | 39 | 다른 전처리기에 대해서도 같은 원칙이 적용됩니다. 그러므로 JS에 coffeescript가 필요하다면, [coffeescript-loader](https://github.com/webpack/coffee-loader)를 설치하고 `lang="coffeescript"` 속성을 `