8000 Merge pull request #388 from GiovanniSM20/master · etherscan-io/electron-vue@32ecf6a · GitHub
[go: up one dir, main page]
Skip to content

Commit 32ecf6a

Browse files
XanderLucianoXanderLuciano
authored
Merge pull request SimulatedGREG#388 from GiovanniSM20/master
Portuguese Translation
2 parents 57f4993 + 1fed8db commit 32ecf6a

32 files changed

+1152
-1
lines changed

‎docs/LANGS.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
* [English](en/)
22
* [日本語](ja/)
33
* [中文](cn/)
4-
* [대한민국](ko/)
4+
* [대한민국](ko/)
< A3E2 /code>
5+
* [Português](pt_BR/)

‎docs/pt_BR/README.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
![](../images/logo.png)
2+
3+
> Um template para criar aplicações electron usando vue \(como o nome diz\).
4+
5+
[![Build Status](https://semaphoreci.com/api/v1/simulatedgreg/electron-vue/branches/master/badge.svg)](https://semaphoreci.com/simulatedgreg/electron-vue)
6+
7+
[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
8+
9+
[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/makes-people-smile.svg)](http://forthebadge.com)
10+
11+
## Resumo
12+
13+
O foco do template é remover a nescessidade de criar manualmente todo a organização do projeto usando electron e o vue. electron-vue tira vantagem da `vue-cli` para receber arquivos, `webpack` com `vue-loader`, `electron-packager` ou `electron-builder`, e também os plugins mais utilizados como `vue-router`, `vuex` e muito mais.
14+
15+
#### De uma olhada na documentação em português [aqui](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
16+
17+
Coisas que você vai achar no projeto...
18+
19+
* Estrutura basica de projeto, com arquivo um **unico** `package.json`
20+
* [Documentação](https://simulatedgreg.gitbooks.io/electron-vue/content/) detalhada
21+
* O projeto retira seus arquivos de vue da [vue-cli](https://github.com/vuejs/vue-cli)
22+
* Pronto para uso de plugins de vue como \([axios](https://github.com/mzabriskie/axios), [vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex)\)\*
23+
* Instalado [vue-devtools](https://github.com/vuejs/vue-devtools) e [devtron](https://github.com/electron/devtron) ferramentas para desenvolvimento
24+
* Habilidade para facilmente compilar e criar o arquivo final para instalar sua aplicação usando [electron-packager](https://github.com/electron-userland/electron-packager) ou [electron-builder](https://github.com/electron-userland/electron-builder)\*
25+
* `appveyor.yml` e `.travis.yml` configurados para automatizar o deploy com [electron-builder](https://github.com/electron-userland/electron-builder)\*
26+
* Habilidade para produzir saidas para browsers
27+
* Acessivel [NPM scripts](/npm_scripts.md)
28+
* Usa o [webpack](https://github.com/webpack/webpack) e [vue-loader](https://github.com/vuejs/vue-loader) com Hot Module Replacement
29+
* Automatização do reinicio dos processos `main` do electron
30+
* HTML/CSS/JS pre-processor suporte com [vue-loader](https://github.com/vuejs/vue-loader/)
31+
* ES6 com [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) by default
32+
* Uso de [`babili`](https://github.com/babel/babili) para remover a nescessidade de fazer transpiling completo para o ES5
33+
* ESLint \(com suporte ao [`standard`](https://github.com/feross/standard) e [`airbnb-base`](https://github.com/airbnb/javascript)\)\*
34+
* Teste unitario com \(with [`karma`](https://github.com/karma-runner/karma) + [`mocha`](https://github.com/mochajs/mocha)\)\*
35+
* End-to-end Testing \(with [`spectron`](https://github.com/electron/spectron) + [`mocha`](https://github.com/mochajs/mocha)\)\*
36+
37+
\*Customizavel durante o uso da `vue-cli`
38+
39+
### Introdução
40+
41+
Esse template foi construído utilizando [`vue-cli`](https://github.com/vuejs/vue-cli) e inclui opções para customizar a estrutura final do seu app. O template utiliza `node@^7` ou superior como mínimo. electron-vue também recomenda utilizar o [`yarn`](https://yarnpkg.org), gerenciador de pacotes que manipula seus pacotes de uma forma muito melhor e vai ajudar a reduzir o peso final do projeto `yarn clean`.
42+
43+
```bash
44+
# Instala o vue-cli e o template do projeto
45+
npm install -g vue-cli
46+
vue init simulatedgreg/electron-vue my-project
47+
48+
# Instala as dependencias e executa seu app (your app)
49+
cd my-project
50+
yarn # ou npm install
51+
yarn run dev # ou npm run dev
52+
```
53+
54+
##### Você e um usuario de Windows
55+
56+
Por favor olhe a [**Uma Nota Para Usuarios de Windows**](https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users) para que você tenha certeza que esta com todas as dependencias instaladas para conseguir fazer deploy e construir a aplicação.
57+
58+
##### Querendo usar Vue 1?
59+
60+
So um ponto a ser dado, a suporte ao Vue 1 foi oficialmente descontinuado então a estrutura do projeto, features e documentação vão refletir essas mudanças \([**documentação legado**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs)\).
61+
62+
```bash
63+
vue init simulatedgreg/electron-vue#1.0 my-project
64+
```
65+
66+
### Proximos Passos
67+
68+
Certifique-se de olhar a [documentação](https://simulatedgreg.gitbooks.io/electron-vue/content/). Aqui você vai achar informação util sobre a configuração, estrutura do projeto, e construção de sua aplicação. Tambe tem a acessivel [FAQs](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html), que ajuda a responder questões ja respondidas.
69+
70+
## Criado usando electron-vue
71+
72+
De uma olhada nesses projetos impressionantes, usando electron-vue. Que que seu projeto seja listado ? Se sinta livre de enviar um pull request.
73+
74+
* [**Surfbird**](https://github.com/surfbirdapp/surfbird): Um Twitter client criado usando Electron e Vue
75+
* [**Lulumi-browser**](https://github.com/qazbnm456/lulumi-browser): Lulumi-browser e um browser leve programado usando Vue.js 2 e Electron
76+
* [**Space-Snake**](https://github.com/ilyagru/Space-Snake): Um jogo para computador de criado usando Electron e Vue.js.
77+
* [**Forrest**](https://github.com/stefanjudis/forrest): An npm scripts desktop client
78+
* [**miikun**](https://github.com/hiro0218/miikun): Um simples editor de Markdown.
79+
* [**Dakika**](https://github.com/Madawar/Dakika): A minute taking application that makes writing minutes a breeze
80+
* [**Dynamoc**](https://github.com/ieiayaobb/dynamoc): Dynamoc is a GUI client for dynamodb-local, dynalite and AWS dynamodb
81+
* [**Dockeron**](https://github.com/dockeron/dockeron): A dockeron project, built on Electron + Vue.js for Docker
82+
* [**Easysubs**](https://github.com/matiastucci/easysubs): Download subtitles in a very fast and simple way

‎docs/pt_BR/SUMMARY.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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)

‎docs/pt_BR/book.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"root": ""
3+
}

‎docs/pt_BR/building_your_app.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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.

‎docs/pt_BR/contributing.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
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)

‎docs/pt_BR/development.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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.

‎docs/pt_BR/end-to-end_testing.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Teste End-to-End
2+
3+
O electron-vue utiliza o [Spectron](http://electron.atom.io/spectron/) o [Mocha](https://mochajs.org/) \(com o [Chai](http://chaijs.com/)\) frameworks de teste do tipo end-to-end. Mocha & Chai APIs, incluem `expect`, `should`, e `assert`, que estão disponíveis no escopo global.
4+
5+
### Rodando testes
6+
7+
```bash
8+
# Executando o mochajs
9+
npm run e2e
10+
```
11+
12+
##### Nota
13+
14+
Antes de ser executado os testes end-to end, o comando `npm run pack` é chamado para criar uma build de produção que o Spectron consome durante os testes.
15+
16+
### Estrutura de arquivos
17+
18+
```
19+
my-project
20+
├─ test
21+
| ├─ e2e
22+
│ │ ├─ specs/
23+
│ │ ├─ index.js
24+
└─ └─ └─ utils.js
25+
```
26+
27+
**Na maior parte, você pode ignorar o **`index.js`** e focar somente na escrita **`specs/`**.**
28+
29+
#### `specs/`
30+
31+
Dentro deste diretório é onde os testes são configurados. Graças ao `babel-register`, você possui acesso total ao ES2015.
32+
33+
#### `index.js`
34+
35+
Este arquivo atua como a entrada principal para o Mocha e reunir todos os testes escritos no `specs/` para os testes.
36+
37+
#### `utils.js`
38+
39+
Aqui você poderá encontrar funções genéricas
40+
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.
41+
42+
### On the subject of Spectron
43+
44+
Spectron é o framework de teste oficial do [electron](http://electron.atom.io) e é utilizado no [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) e [WebDriverIO](http://webdriver.io/) para manipulação dos elementos DOM.
45+
46+
#### Using WebDriverIO
47+
48+
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)\).
49+
50+
Como ja declardo na [documentação](https://github.com/electron/spectron#client) do Spectron, o acesso a [WebDriverIO APIs](http://webdriver.io/api.html) ele pode ser acessadp peçlo `this.app.client`. Desde que electron-vue começou a usar o mocha, no contexto de `this` e dividido entre `afterEach`, `beforeEach`, e `it`. Por conta disso, e importante saber que em certas condições as arrow functions não podem ser usadas onde o contexto de `this` vai ser sobreescrito \([mais informa](https://mochajs.org/#arrow-functions)\).

‎docs/pt_BR/entry_indexhtml.md

Lines changed: 47 additions & 0 deletions
10000
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<title><%= htmlWebpackPlugin.options.title %></title>
15+
<%= ... %>
16+
</head>
17+
<body>
18+
<div id="app"></div>
19+
<!-- webpack builds are automatically injected -->
20+
</body>
21+
</html>
22+
```
23+
24+
### `index.html` em produção \(não minificado\)
25+
26+
```html
27+
<!DOCTYPE html>
28+
<html>
29+
<head>
30+
<meta charset="utf-8">
31+
<title>app</title>
32+
<link href="styles.css" rel="stylesheet">
33+
</head>
34+
<body>
35+
<div id="app"></div>
36+
<script type="text/javascript" src="renderer.js"></script>
37+
</body>
38+
</html>
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.

‎docs/pt_BR/faqs.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# FAQs
2+
## Perguntas frequentes...
3+
4+
* [Por que meu app em electron esta branco sem nada depois de rodar `npm run dev` ?](#why-is-my-electron-app-blank-after-running-npm-run-dev)
5+
* [Por que o meu electron app mostra um explorador de arquivos ?](#why-does-my-electron-app-show-a-file-explorer)
6+
* [Por que `vue-devtools`/`devtron` esta faltando ?](#why-is-vue-devtoolsdevtron-missing)
7+
* [Onde eu coloco meus assets estaticos ?](#where-do-i-put-static-assets)
8+
* [Por que o `npm run lint` resulta em um erro ?](#why-did-npm-run-lint-end-with-an-error)
9+
* [Por que quando eu rodo `npm run lint` ele termina com um erro ?](#why-did-npm-run-lint-end-with-an-error)
10+
* [Por que eu não consigo carregar meu app no browser ?](#why-cant-i-load-my-app-in-a-web-browser)
11+
* [Como eu importo o `jquery` ?](#how-do-import-jquery)
12+
* [Como eu debugo o processo `main` ?](#how-can-i-debug-the-main-process)
13+
14+
---
15+
16+
## Por que meu app em electron esta branco sem nada depois de rodar `npm run dev` ?
17+
18+
#### TL;DR (Muito longo não lerei)
19+
20+
Tenha certeza que você não tenha uma **proxy** pessoal que possa estar atrapalhando o `webpack-dev-server`.
21+
22+
## Por que o meu electron app mostra um explorador de arquivos ?
23+
24+
#### TL;DR (Muito longo não lerei)
25+
26+
Your `src/renderer` contains error\(s\). Check console, fix errors, then refresh electron with `CommandOrControl+R`.
27+
28+
Seu `src/renderer` contem erro\(s\). Olha o console, para corrigir, e depois da um recarregar com o comando `CommandOrControl+R`.
29+
30+
##### Resposta longa
31+
32+
If error\(s\) are present in you `src/renderer` this creates conflicts with ESLint on first run. In turn, an INVALID webpack `renderer.js` is produced which interrupts `HtmlWebpackPlugin` from creating `index.html`. Since `webpack-dev-server` doesn't have the `index.html` ready to serve, the server falls back to the file explorer.
33+
34+
Se um erro\(s\) esta presente no seu `src/renderer` pode criar conflitos com o ESLint quando você executa na primeira vez. Enquanto isso o webpack gera um arquivo `renderer.js` o que interrompe o `HtmlWebpackPlugin` de funcionar e criar o arquivo `index.html`. Quando o `webpack-dev-server` não tem o `index.html` para servir, o servidor utiliza o explorador de arquivos como fallback.
35+
36+
## Por que `vue-devtools`/`devtron` esta faltando ?
37+
38+
Make sure to close and reopen the developer tools panel on first launch if they are missing. Also check your terminal check for any error messages that may occur during installation.
39+
40+
## Onde eu coloco meus assets estaticos ?
41+
42+
[**Usando Static(estatico) Assets**](/using-static-assets.md)
43+
44+
## Por que o `npm run lint` resulta em um erro ?
45+
46+
The default nature of eslint is to print linting errors to console, and if there is any found the script will end with a non-zero exit \(which produces npm errors\). This is normal behavior.
47+
48+
O natural e que o ESLint vai imprimir os error de linting para o console, e se ele achar qualquer script ele ira terminar com um non-zeo exit \(o que produz erro\(s\) de npm\). Isto e um comportamento normal.
49+
50+
## Por que eu não consigo carregar meu app no browser ?
51+
52+
[\#195](https://github.com/SimulatedGREG/electron-vue/issues/195) (Desculpa não temos como traduzir esta parte.)
53+
54+
## Como eu importo o `jquery`?
55+
56+
If you are wanting to use `bootstrap`, I'm going to have to stop you right there. Using both `vue` and `jquery` in the same environment is a bad practice and leads to the two frameworks colliding with each other. I would highly recommend using a `bootstrap` alternative that uses `vue` for its JavaScript functionality. Some recommendations include [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) and [`vue-strap`](https://github.com/yuche/vue-strap). For whatever reason you must use `jquery`, seek guidance from `webpack`'s documentation about the `ProvidePlugin` or see [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192).
57+
58+
Se você esta querendo usar o `bootstrap`, Eu vou ter que parar você exatamente aqui. Usar os dois `vue` e `jquery` no mesmo ambiente de desenvolvimento e uma má pratica e leva a duas frameworks se colidindo, causando erros `bootstrap` procure uma alternativa `vue` para essa função do JavaScript. Algumas recomendações são: [`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) e [`vue-strap`](https://github.com/yuche/vue-strap). Mas se por qualquer razão vocês esta sendo obrigado a usar o `jquery`, procure ajuda documentação do `webpack` sobre como e `ProvidePlugin` ou veja [\#192](https://github.com/SimulatedGREG/electron-vue/issues/192). (Problemas como issues não tem como nos traduzirmos por enquano, mas se alguem se oferecer em traduzir parte importantes da isse seria uma bela contribuição)
59+
60+
## Como eu debugo o processo `main` ?
61+
62+
When using `electron@^1.7.2` you can open up Google Chrome, head to `chrome://inspect`, and then pop open the remote electron process while your application is running in development mode.
63+
64+
Quando usamos o `electron@^1.7.2` você pode abrir o Google Chrome, você vai direto em `chrome://inspect`, e você abre um pop up com as informações do processo enquanto ele esta sendo usado em modo de desenvolvimento.
65+
66+
[Documentação Electron](https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md)

0 commit comments

Comments
 (0)
0