From 70717a66213dcbc4baf91d5ad9b5e56dfc75baa1 Mon Sep 17 00:00:00 2001 From: Daniel Schmitz Date: Thu, 8 Mar 2018 18:47:29 +0000 Subject: [PATCH 001/177] baseurl --- _config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 9bb172c..5bdb1f5 100644 --- a/_config.yml +++ b/_config.yml @@ -1,8 +1,8 @@ # Site settings title: Willian Justen - Desenvolvedor Front End description: A blog about lorem ipsum dolor sit amet -baseurl: "/cards-jekyll-template" # the subpath of your site, e.g. /blog -url: "https://willianjusten.com.br" # the base hostname & protocol for your site e.g. http://willianjusten.com.br +baseurl: "/blog" # the subpath of your site, e.g. /blog +url: "https://vuejs-br.github.io" # the base hostname & protocol for your site e.g. http://willianjusten.com.br # User settings username: Lorem Ipsum From 61fd0acf85ed53d5a645931d9159157b89f92074 Mon Sep 17 00:00:00 2001 From: Daniel Schmitz Date: Thu, 8 Mar 2018 19:00:52 +0000 Subject: [PATCH 002/177] Adicionando _drafts --- .gitignore | 1 - _config.yml | 6 +- ...arjs-parte-3-comunicacao-de-componentes.md | 25 +++ ...a-todo-list-com-vuejs-e-google-firebase.md | 210 ++++++++++++++++++ ...riar-biblioteca-com-metodos-utilitarios.md | 13 ++ ...18-03-08-desmistificando-o-vue-router-2.md | 75 +++++++ ...08-medindo-a-performance-da-sua-app-vue.md | 65 ++++++ ...rformance-em-filtros-usando-transducers.md | 31 +++ ...03-08-por-onde-comecar-a-aprender-vuejs.md | 13 ++ ...nderize-html-estatico-em-sua-spa-vue-js.md | 13 ++ .../2018-03-08-validacao-com-vuevalidator.md | 13 ++ _drafts/2018-03-08-vue-cors.md | 13 ++ _drafts/2018-03-08-vue-material.md | 14 ++ 13 files changed, 488 insertions(+), 4 deletions(-) create mode 100644 _drafts/2016-07-21-vue-js-para-desenvolvedores-angularjs-parte-3-comunicacao-de-componentes.md create mode 100644 _drafts/2018-03-08-criando-uma-todo-list-com-vuejs-e-google-firebase.md create mode 100644 _drafts/2018-03-08-criar-biblioteca-com-metodos-utilitarios.md create mode 100644 _drafts/2018-03-08-desmistificando-o-vue-router-2.md create mode 100644 _drafts/2018-03-08-medindo-a-performance-da-sua-app-vue.md create mode 100644 _drafts/2018-03-08-performance-em-filtros-usando-transducers.md create mode 100644 _drafts/2018-03-08-por-onde-comecar-a-aprender-vuejs.md create mode 100644 _drafts/2018-03-08-pre-renderize-html-estatico-em-sua-spa-vue-js.md create mode 100644 _drafts/2018-03-08-validacao-com-vuevalidator.md create mode 100644 _drafts/2018-03-08-vue-cors.md create mode 100644 _drafts/2018-03-08-vue-material.md diff --git a/.gitignore b/.gitignore index 3061f07..3adfbe3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .DS_Store _site node_modules -_drafts vue-js-brasil.ghost.2018-03-08.json \ No newline at end of file diff --git a/_config.yml b/_config.yml index 5bdb1f5..b40c98e 100644 --- a/_config.yml +++ b/_config.yml @@ -1,10 +1,10 @@ # Site settings -title: Willian Justen - Desenvolvedor Front End -description: A blog about lorem ipsum dolor sit amet +title: Vue.js Brasil - Comunidade Brasileira de Vue.js +description: Artigos em Português sobre Vue.js baseurl: "/blog" # the subpath of your site, e.g. /blog url: "https://vuejs-br.github.io" # the base hostname & protocol for your site e.g. http://willianjusten.com.br -# User settings +# User settings (Não usado no blog) username: Lorem Ipsum user_description: Anon Developer at Lorem Ipsum Dolor email: anon@anon.com diff --git a/_drafts/2016-07-21-vue-js-para-desenvolvedores-angularjs-parte-3-comunicacao-de-componentes.md b/_drafts/2016-07-21-vue-js-para-desenvolvedores-angularjs-parte-3-comunicacao-de-componentes.md new file mode 100644 index 0000000..474a5ce --- /dev/null +++ b/_drafts/2016-07-21-vue-js-para-desenvolvedores-angularjs-parte-3-comunicacao-de-componentes.md @@ -0,0 +1,25 @@ +--- +layout: post +title: 'Vue.js para desenvolvedores AngularJS – Parte 3 (Comunicação de componentes)' +main-class: 'dev' +date: 2016-07-21 19:14:00 +description: derscricao +color: '#637a91' +tags: +layout: post +introduction: introducao +--- + +Comunicação de componentes (Parte 3) +Várias formas de se passar dados para outros componentes. +- One-way data binding +- String literal prop +- Two-way binding (native) +- Two-way binding (components) +- One-time binding + +- Citar o conceito de Vuex +- Linkar com o artigo do Vedovelli + +> Atenção: Quando passado um objeto ou array para um componente, ele é passado por referência. Neste caso se for modificado no componente filho, refletirá também no componente pai, então tenha em mente que se for qualquer outro tipo, a ligação de uma via (oneWay) funcionará como esperado. Isso vale tanto para o AngularJS, quanto para o Vue.js. + diff --git a/_drafts/2018-03-08-criando-uma-todo-list-com-vuejs-e-google-firebase.md b/_drafts/2018-03-08-criando-uma-todo-list-com-vuejs-e-google-firebase.md new file mode 100644 index 0000000..9df9c0d --- /dev/null +++ b/_drafts/2018-03-08-criando-uma-todo-list-com-vuejs-e-google-firebase.md @@ -0,0 +1,210 @@ +--- +layout: post +title: 'Criando uma TODO LIST com Vuejs e Google Firebase' +main-class: 'dev' +date: 2018-03-08 00:00:00 +description: derscricao +color: '#637a91' +tags: +layout: post +introduction: introducao +--- + +Neste novo artigo vamos abordar algo que todos nós fazemos: **TAREFAS!** +E nada melhor que ficar em dia com elas. + +Mas para isto precisamos listá-las de maneira que saibamos que tarefas temos a fazer. Dito isso, vamos por a mão na massa e desenvolver uma aplicação de *TODO LIST*, ou em bom português: *LISTA DE TAREFAS*. + +Meu objetivo aqui, é além de apresentar (*novamente!*) o Vue, também apresentar o uso do [Google Firebase](firebase.google.com). + +>**"O Firebase é uma plataforma móvel que ajuda a desenvolver aplicativos de alta qualidade."** + +Chega de enrolação e vamos **escovar bits**! + +>##Passo#1 + +* Criar um projeto Firebase no [Google Firebase Console](https://console.firebase.google.com) (GFC) + * **É necessária uma conta Google!** +* Copiar o *snnipet* de configuração com os dados de acesso ao projeto recém criado + +> #####Criando o Projeto Firebase + +Acessando o link do GFC, você encontra a seguinte tela: +![GFC](http://i67.tinypic.com/2wdn85l.png) + +Clique em **CRIAR NOVO PROJETO** + +![GFC](http://i64.tinypic.com/55pdg1.png) + +Preencha com o nome da nossa aplicação (**todolist**) e selecione Brasil na lista, e clique em CRIAR PROJETO. +Pronto! Agora já temos onde salvar nossas tarefas! + +>#####Copiando o *snippet* de configuração + +Ao voltar para o GFC, você verá seu Projeto Firebase, clique nele para acessar a tela de **OVERVIEW** e poder copiar o *snippet*. A tela de **OVERVIEW** tem estas opções: +![](http://i66.tinypic.com/vxit7p.png) + +Vamos clicar no botão roxo e "Adicionar o Firebase ao seu app da Web". + +Feito isso temos o *snippet*! +![](http://i68.tinypic.com/2uzcmea.png) + +Observem o código do *snippet* e notem que ele já vem pronto pra ser adicionado ao seu index.html, usando a tag **` + + + +``` + +>#####Importando o Vue e o Bootstrap + +Até agora nossa SPA não absolutamente nada! Vamos importar o Vue e o Bootstrap alterando a tag **``**. Ambos os sites fornecem um link CDN para incorporar no HTML. + +**Vue**: +`https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js` + +**Bootstrap**: +`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css` + +Vamos modificar nosso **head**: +```html + + + Lista de Tarefas + + + + +``` + +>#####Inciando o Vue + +Agora vamos estruturar o **Vue**! +Vamos modificar nossa tag **script**: + +```html + - - - -``` - ->#####Importando o Vue e o Bootstrap - -Até agora nossa SPA não absolutamente nada! Vamos importar o Vue e o Bootstrap alterando a tag **``**. Ambos os sites fornecem um link CDN para incorporar no HTML. - -**Vue**: -`https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js` - -**Bootstrap**: -`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css` - -Vamos modificar nosso **head**: -```html - - - Lista de Tarefas - - - - -``` - ->#####Inciando o Vue - -Agora vamos estruturar o **Vue**! -Vamos modificar nossa tag **script**: - -```html - diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index 832a7fd..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html deleted file mode 100644 index 84437e8..0000000 --- a/_includes/head.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - - - - - - - - - - - {% if page.image %} - - {% else %} - - {% endif %} - - - - - {% if page.image %} - - {% else %} - - {% endif %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/_includes/header-default.html b/_includes/header-default.html deleted file mode 100644 index 088125f..0000000 --- a/_includes/header-default.html +++ /dev/null @@ -1,6 +0,0 @@ -
-

- -

-
-{% include menu-search.html %} \ No newline at end of file diff --git a/_includes/header-post.html b/_includes/header-post.html deleted file mode 100644 index 12cb1cc..0000000 --- a/_includes/header-post.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

- -

-
-{% include menu-search.html %} - - \ No newline at end of file diff --git a/_includes/menu-search.html b/_includes/menu-search.html deleted file mode 100644 index ef451aa..0000000 --- a/_includes/menu-search.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
- - -
    -
    -
    - -
    - - - - - - - - \ No newline at end of file diff --git a/_includes/share.html b/_includes/share.html deleted file mode 100644 index dcfd176..0000000 --- a/_includes/share.html +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/_includes/svg-icons.html b/_includes/svg-icons.html deleted file mode 100644 index d721cf1..0000000 --- a/_includes/svg-icons.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_layouts/compress.html b/_layouts/compress.html deleted file mode 100644 index 51ccf13..0000000 --- a/_layouts/compress.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -# Jekyll layout that compresses HTML -# v1.4.0 -# http://jch.penibelst.de/ -# © 2014–2015 Anatol Broder -# MIT License ---- -{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% case _pres.size %}{% when 2 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% when 1 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% endcase %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% assign _comment_befores = _content | split: _comments.first %}{% for _comment_before in _comment_befores %}{% assign _comment_content = _comment_before | split: _comments.last | first %}{% if _comment_content %}{% capture _comment %}{{ _comments.first }}{{ _comment_content }}{{ _comments.last }}{% endcapture %}{% assign _content = _content | remove: _comment %}{% endif %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
    Step Bytes
    raw {{ content | size }}{% if _profile_endings %}
    endings {{ _profile_endings }}{% endif %}{% if _profile_collapse %}
    collapse {{ _profile_collapse }}{% endif %}{% if _profile_comments %}
    comments {{ _profile_comments }}{% endif %}{% if _profile_clippings %}
    clippings {{ _profile_clippings }}{% endif %}
    {% endif %}{% endif %} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index b83f2d3..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: compress ---- - - - - {% include head.html %} - - {% include svg-icons.html %} - {% include header-default.html %} -
    - {{ content }} -
    - {% include footer.html %} - - diff --git a/_layouts/minimal.html b/_layouts/minimal.html deleted file mode 100644 index 847c04e..0000000 --- a/_layouts/minimal.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: compress ---- - - - - {% include head.html %} - - {% include svg-icons.html %} - {% include header-post.html %} -
    - -
    - {{ content }} -
    - - {% include footer.html %} -
    - - diff --git a/_layouts/page.html b/_layouts/page.html deleted file mode 100644 index 74c1a11..0000000 --- a/_layouts/page.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: default ---- -
    - -
    -

    {{ page.title }}

    -
    - -
    - {{ content }} -
    - -
    diff --git a/_layouts/post.html b/_layouts/post.html deleted file mode 100644 index e2c5e5a..0000000 --- a/_layouts/post.html +++ /dev/null @@ -1,21 +0,0 @@ - - - {% include head.html %} - - {% include svg-icons.html %} - {% include header-post.html %} -
    - -
    - {{ content }} -
    - - {% include share.html %} - {% include author.html %} - {% if page.comments != false %} - {% include comments.html %} - {% endif %} - {% include footer.html %} -
    - - diff --git a/_posts/2016-06-27-vuex.md b/_posts/2016-06-27-vuex.md deleted file mode 100644 index 217da9b..0000000 --- a/_posts/2016-06-27-vuex.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -layout: post -title: 'Vuex' -main-class: 'dev' -date: 2016-06-27 22:11:41 -description: derscricao -color: '#637a91' -tags: vuex -layout: post -introduction: introducao ---- - -### Compreendendo o problema que ele resolve - -Quando você está construindo uma aplicação baseada no browser não é incomum perder o controle sobre o fluxo da informação que é gerenciada pela app. - -Nestes tipos de aplicação os dados não são apenas o que o usuário envia ao servidor mas também o que controla a exibição de controles de interface. Então - por exemplo - você modifica um valor num componente e outro componente que deveria estar visível agora está escondido. Isso se chama **efeito colateral**. - -Conforme sua aplicação cresce torna-se um pesadelo lidar com todos os efeitos colaterais que aparecem. A forma mais comum de compartilhar dados através da árvore de componentes é utilizando eventos, acima e abaixo na árvore. Isso é OK quando você captura um evento imediatamente após dispara-lo mas quando o evento é capturado mais acima ou mais abaixo na árvore, você rapidamente se pegará pensando *"- mas de onde veio este evento?"*. - -### Single Source of Truth -[More on Wikipedia](https://en.wikipedia.org/wiki/Single_source_of_truth) - -*Single Source of Truth* (ou Fonte Única da Verdade) é estruturar seus dados de maneira que este não são duplicados em nenhum lugar da app. Pense nela como a espinha dorsal da aplicação. Todos os componentes pegarão os dados dela e salvarão de volta, tornando muito mais fácil saber de onde a alteração veio. - -Há algumas vantagens ao se adotar esta abordagem: - -1. Você tem um local centralizado para adicionar/modificar seus dados; -2. Está disponível para todos os componentes; -3. Nenhum componente modifica a informação diretamente, garantindo a consistência dos dados; -4. Ferramentas adicionais fazem do desenvolvimento uma experiência melhor. - -###Vuex -[Documentação oficial aqui](http://vuex.vuejs.org/pt) - -É a implementação feita pela equipe Vue.js para o Flux, que é a implementação feita pelo Facebook da Single Source of Truth. A integração com o sistema reativo do Vue é transparente e requer apenas algumas configurações bem simples, ficando imediatamente pronto para uso. - -O primeiro passo é instalar utilizando `npm install vuex --save-dev`. Logo em seguida vá ao arquivo no qual você criou sua instância do Vue Object, instrua o Vue para usar o Vuex e adicione a Store ao objeto: - -```javascript -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) - -new Vue({ - el: 'body', - store: new Vuex.Store({}) -}) -``` - -Dentro do método Vuex.Store() você terá que passar um objeto com duas propriedades, como segue: - -1. O **State**, que é um objeto comum Javascript, contendo os dados que você quer compartilhar através da aplicação; -2. Os métodos que alteram o State. Eles são chamados de **Mutation Methods**. - -Como example veja o trecho de código: - -```javascript -... -new Vue({ - el: 'body', - store: new Vuex.Store({ - state: { - user: { - name: '', - email: '' - } - }, - mutations: { - SET_USER (store, obj) { - store.user = obj.user - } - } - }) -}) -``` - -Como você deve ter imaginado tanto a quantidade de propriedades em State quanto a de métodos em Mutations crescerá bastante. Usemos então o module bundler (Webpack, por exemplo) para fazer o setup do Vuex em algum outro local em nosso File System e então importa-lo: - -**criar o arquivo: /src/vuex/store.js** - -```javascript - -import Vue from 'vue' -import Vuex from 'Vuex' - -Vue.use(Vuex) - -export default new Vuex.Store({ - state: { - user: { - name: '', - email: '' - } - }, - mutations: { - SET_USER (store, obj) { - store.user = obj.user - } - } - }) -``` - -e no seu **/src/main.js**: - -```javascript -import Vue from 'vue' -import store from './vuex/store' - -Vue.use(Vuex) - -new Vue({ - el: 'body', - store -}) -``` - -###Lendo e gravando dados na Store - -Agora que temos nossa store totalmente configurada e anexada ao objeto Vue é hora de começar a utiliza-la. - -A beleza da coisa é que a Store estará automaticamente disponível a todos os componentes. Da mesma forma que você está acostumado a usar propriedades tais como **methods: {}**, **data: {}** and **computed: {}** agora você também terá **vuex: {}**. - -```html - - -``` - -Se se quer acessar a propriedade **user** da Vuex Store basta simplesmente criar um getter... - -```javascript -... -vuex: { - getters: { - user: store => store.user - }, - actions: {} -}, -... -``` -... e então utilizar como uma propriedade interna do componente: `this.user`. - - -Agora você precisa modificar os dados do usuário. Antes de seguirmos adiante uma nota mental: **você NÃO PODE modificar o State diretamente**. Se me perguntar se é possível eu diria "sim é" porém altamente desencorajado. Isso por que se quiser saber o que acontece quando qualquer propriedade for modificada, basta ir no único local onde isso acontece, ao invés de abrir todos os seus componentes para só então descobrir de onde a alteração partiu. - -Então, como modificar os dados? - -Utilizando **actions**. Elas são métodos como os que você costuma criar dentro de **methods: {}** em seus componentes mas você os declara num local especial: dentro de **vuex: { actions: {} }**. Ao fazer isso você se assegura de que o primeiro parâmetro recebido pelo método será uma instância da Vuex Store. - -Estamos interessados num método do objeto Store chamado **dispatch()**. Usaremos este método para invocar a Mutation, método responsável por setar os dados na Vuex Store. - - -```javascript -... -vuex: { - getters: { - user: store => store.user - }, - actions: { - setUser ({dispatch}, obj) { - dispatch('SET_USER', obj) - } - } -}, - -methods: { - ordinaryButtonClickHandler () { - let user = { - user: { - username: 'New username', - email: 'email@email.com' - } - } - this.setUser(user) // << a action é executada por um clique num botão, por ex. - } -} -... -``` - -Preste atenção a esta parte pois é a mais confusa: `dispatch('SET_USER', obj)`. Primeiro recebemos este método dispatch() ao utilizar [Destructuring Assignment](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), um novo e muito útil recurso do ES2015. Pense no método dispatch() como um event dispatcher com um único objetivo: **invocar uma mutation**. Você não precisa captura-lo manualmente como faria com um evento comum. Graças ao Vue ele vai diretamente para o **objeto de mutations** na sua configuração do Vuex e então o método adequado é invocado. - - -O nome do método da mutation é o primeiro parâmetro e o objeto que a mutation receberá é o segundo. Quando chegar à mutation a Store é finalmente modificada e todos os componentes observando a Store serão automaticamente atualizados. - - -### Ferramentas de Suporte ao Desenvolvimento - -Existe uma ferramenta muito poderosa que dá suporte ao desenvolvimento com Vue.js. Ela se chama [Vue Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR) e é uma extensão para o Google Chrome. Permite que você inspecione sua árvore de componentes, interagindo com eles no Console. Lhe permite também interagir com Vuex Store, tirando vantagem do recursos chamado **Time Travel Debugging**: mostra todas as mutations que foram executadas permitindo navegar entre elas e vendo alterações na aplicação em tempo real. - -![](/content/images/2016/06/Screen-Shot-2016-06-23-at-8-13-20-PM.png) - -### Conclusão - -A documentação oficial diz que **Vuex não é adequado para todos os tipo de projeto** mas eu acho um recurso tão útil e simples de usar que atualmente incluo em todos os meus projetos. Simplesmente me parece algo natural de ser feito. - -Agora que está claro que Vuex é **um local centralizado para armazenar seus dados**, o que torna muito mais fácil **gerenciar o estado da sua aplicação**, tenha em mente que você também pode (e deve) manter o **estado local dos seus componentes**. A decisão sobre o que pertence à Store central ou ao state interno do componente é você quem deve tomar. Se você precisa daquele pedaço de informação em algum outro local da aplicação então você deve adicionar à Vuex Store. - diff --git a/_posts/2016-06-28-aplicacoes-desenvolvidas-com-vue-js.md b/_posts/2016-06-28-aplicacoes-desenvolvidas-com-vue-js.md deleted file mode 100644 index b5946c5..0000000 --- a/_posts/2016-06-28-aplicacoes-desenvolvidas-com-vue-js.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: post -title: 'Aplicações desenvolvidas com Vue.js' -main-class: 'dev' -date: 2016-06-28 15:08:28 -description: derscricao -color: '#637a91' -tags: vue-js -layout: post -introduction: introducao ---- - -Espaço reservado para expor aplicações desenvolvidas com Vue.js. Se a aplicação não for pública, ainda assim será bem vinda caso se possa colocar uma descrição do processo de desenvolvimento. - -### octimine - -octimine é uma ferramenta de busca de patentes. Um usuário cadastrado pode inserir um texto que descreve sua idéia e o sistema rapidamente pesquisa e devolve uma lista de até 1000 patentes similares, oferecendo o grau de similaridade, calculado pelos algoritmos da empresa. - -O Vue.js gerencia toda a parte de componentes de interface. Trata-se de uma aplicação híbrida, desenvolvida com Laravel 5.1 e Vue.js 1.0.25. Vuex dá suporte à arquitetura de dados. - -Neste momento estamos iniciando novo projeto para refazer a aplicação como uma SPA, sendo que todos os componentes personalizados serão migrados da versão atual, sem muitas alterações. - -![](/content/images/2016/06/screencapture-octimine-vedovelli-app-search-publication-number-1467132365757.png) - -######octimine technologies GmbH -[www.octimine.com](http://www.octimine.com) diff --git a/_posts/2016-06-28-crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify.md b/_posts/2016-06-28-crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify.md deleted file mode 100644 index dbf61c5..0000000 --- a/_posts/2016-06-28-crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -layout: post -title: 'Crie rapidamente um projeto Vue com vue-cli e browserify' -main-class: 'dev' -date: 2016-06-28 14:06:15 -description: derscricao -color: '#637a91' -tags: ferramentas -layout: post -introduction: introducao ---- - -Na maioria das vezes, quando nos deparamos com uma nova tecnologia, queremos de imediato testá-la, ver seu funcionamento na prática. Com o Vue isso não será diferente, e através de uma ferramenta chamada *vue-cli*, podemos criar uma estrutura de projeto simples, mas completa para o início de uma app em Vue. - -O único requisito para testar o *vue-cli* é o Node.js instalado, na versão 4.X ou superior, incluindo também o *npm*, o gerenciador de pacotes do Node. - -> **O que é Node? E NPM?** -> -> Node é uma plataforma de desenvolvimento em javascript, que usa a engine do google chamada V8. Basicamente, você consegue executar aplicações javascript no seu computador. O NPM é o gerenciador desses programas, onde é possível instalar através da linha de comando do terminal do seu sistema operacional. - -Para instalar o *vue-cli*, abra um terminal e digite o seguinte comando: - -``` -$ npm i -g vue-cli -``` - -O parâmetro `i` é um acrônimo para `install`, e o parâmetro `-g` para global. Isso diz ao Node que está instalado no seu sistema para instalar globalmente o *vue-cli*, de forma que você possa usá-lo em qualquer diretório. - -Com o *vue-cli* instalado, podemos analisar como usá-lo. Para criar um projeto vue, execute o seguinte comando: - -``` -$ vue init -``` - -Existem dois parâmetros que precisamos fornecer ao *vue-cli* para que ele possa criar o projeto. O primeiro deles é o `template-name`, que corresponde a um template previamente criado que será usado como *esqueleto* para o seu projeto. O segundo parâmetro é o `project-name`, o nome do seu projeto que corresponde ao diretório que será criado. - -Os principais templates de projeto são: - -* [webpack](https://github.com/vuejs-templates/webpack) - Usa o [webpack](https://webpack.github.io/) como module bundler, possui o vue-loader com *hot reload*, javascript lint e testes unitários. É o pacote mais completo existente. -* [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - Usa o webpack, com menos recursos que o primeiro. Não possui *hot reload*, javascript lint e nem testes unitários. É recomendo para quem está começando com o vue. -* [browserify](https://github.com/vuejs-templates/browserify) - Ao invés do webpack, usa o [browserify](http://browserify.org/) como module bundler. Possui o vue-loader com *hot reload*, javascript lint e testes unitários. -* [browserify-simple](https://github.com/vuejs-templates/browserify-simple) - Mais simples que o anterior, sem hot reload, lint ou testes unitários. Usaremos este como exemplo neste artigo. -* [simple](https://github.com/vuejs-templates/simple) - Mais simples, impossível. Possui apenas uma única página com o Vue sendo carregado através de um endereço CDN. - -> **Webpack ou Browserify ?** -> -> Uma pergunta comum é: qual usar? Aqui entra a questão de qual melhor se adapta a sua realidade. Basicamente, o Webpack é mais poderoso e configurável, e talvez por isso exija um pouco mais de configuração. Browserify é mais simples de configurar e com um pouco menos de recursos. - -  - -> **Alguns termos que você talvez não conheça** -> -> * Module bundler: Uma forma de agrupar diversos tipos de arquivos em um grupo único, sendo usado no produto final. Por exemplo, é possível criar vários arquivos javascript separados e, quando for usá-los, o bundler irá "juntar" tudo e criar um arquivo único, que poderá inclusive estar minificado. -> * Hot reload: Usado para atualizar automaticamente o navegador web quando existe alguma alteração no código fonte do projeto -> * Lint: Usado para validar o seu código javascript, checando por exemplo se existe alguma vírgula onde não deveria, se existe algum ponto-e-vírgula faltando, etc. - -Vamos então criar o nosso primeiro projeto Vue. Execute o seguinte comando: - -``` -$ vue init browserify-simple hello-vue -``` - -Este comando produzirá o seguinte resultado: - -![Criação do projeto hello-vue](https://cloud.githubusercontent.com/assets/1509692/16400570/0081836e-3cb3-11e6-8fab-e88eb0db48c4.png) - -Algumas perguntas são feitas antes do projeto ser criado, tais como o nome do projeto, uma descrição, entre outras. - -Após a criação do projeto, o diretório `hello-vue` é criado, com alguns arquivos conforme a imagem a seguir: - -![image](https://cloud.githubusercontent.com/assets/1509692/16400590/2c17b53e-3cb3-11e6-8724-b51997d89555.png) - -Cada arquivo criado possui uma função na configuração do projeto inicial. Vamos comentar cada um deles: - -* **dist/** É o diretório onde o arquivo javascript "compilado" irá ficar. Chamamos de "compilado" porque o module bundler escolhido irá "juntar" todos os arquivos javascript em um só, e salvá-lo neste diretório. -* **src/** É o diretório onde a sua aplicação Vue será criada. -* **src/App.vue** É o componente inicial da sua aplicação, carregado pelo arquivo `main.js` -* **src/main.js** É o que chamamos de "bootstrap" da aplicação, ou seja, é onde tudo começa! O *module bunlder* começa a "juntar" os arquivos javascript pelo `main.js`. -* **.babelrs** Contém algumas configurações que ajudam o *module bundler* a "transpilar" o código javascript que está em ES6 para ES5. Isso é necessário porque os navegadores ainda não estão 100% compatíveis com o ES6 (ES2015) -* **.gitIgnore** Usado para ignorar alguns arquivos do controle de versão. -* **index.html** O arquivo html principal da aplicação -* **package.json** O arquivo de configuração do projeto -* **README.md** Um arquivo contendo uma documentação sobre o projeto em si - -Após conhecer rapidamente cada arquivo, vamos nos aprofundar em cada um deles. Começando pelo `package.json`, que contém todas as informações do Node/Npm do projeto. Veja: - -``` -{ - "name": "hello-vue", - "description": "A Vue.js project", - "author": "Daniel Schmitz ", - "private": true, - "scripts": { - "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", - "serve": "http-server -c 1 -a localhost", - "dev": "npm-run-all --parallel watchify serve", - "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" - }, - "dependencies": { - "vue": "^1.0.0" - }, - "devDependencies": { - "babel-core": "^6.0.0", - "babel-plugin-transform-runtime": "^6.0.0", - "babel-preset-es2015": "^6.0.0", - "babel-preset-stage-2": "^6.0.0", - "babel-runtime": "^6.0.0", - "cross-env": "^1.0.6", - "babelify": "^7.2.0", - "browserify": "^12.0.1", - "browserify-hmr": "^0.3.1", - "http-server": "^0.9.0", - "npm-run-all": "^1.6.0", - "uglify-js": "^2.5.0", - "vueify": "^8.5.2", - "watchify": "^3.4.0" - }, - "browserify": { - "transform": [ - "vueify", - "babelify" - ] - } -} -``` - -Este arquivo realmente possui muita informação, então vamos quebrá-lo em partes para podermos entender cada pedaço. - -Primeiro, temos algumas configurações básicas como nome e autor do projeto: - -``` -{ - "name": "hello-vue", - "description": "A Vue.js project", - "author": "Daniel Schmitz ", - "private": true, -``` - -Após estas configurações iniciais, temos os **scripts**, descritos a seguir: - -``` -"scripts": { - "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", - "serve": "http-server -c 1 -a localhost", - "dev": "npm-run-all --parallel watchify serve", - "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" - }, -``` - -Vamos abordar cada um deles, veja: - -* **"watchify" : "..."** Usa o pacote *watchify* em conjunto com *browserify-hmr* para recompilar o projeto sempre que houver uma modificação nos arquivos do projeto. Aqui também temos a configuração do arquivo inicial "-e src/main.js" que iniciará todo o processo de bundler (juntar) e como resultado teremos o arquivo final "-o dist/build.js" - -* **"serve" : "..."** Usado para instanciar um pequeno servidor web capaz de receber requisições http e respondê-las. Este servidor funciona muito bem para pequenos projetos e testes, onde não há necessidade de processamento pesado no servidor. Pode-se usar este servidor para aprender tudo sobre Vue, e depois usar um servidor mais robusto com o express para processamentos mais complexos. - -* **"dev" : "..."** Neste comando usa-se o pacote *npm-run-all* para executar tanto o *watchify* quanto o *server*, em paralelo. Assim o vue estará compilando o seu código fonte sempre que houver atualizações e o servidor web está recarregando a página sempre que um novo `dist.js` for gerado. - -* **"build" : "..."*** Usado para criar uma versão mais enxuta do arquivo `dist/build.js`, onde ela será minificada e "embaralhada". Nomes de variáveis serão reduzidas e o código ficará ilegível aos olhos humanos. Perceba também que uma variável de ambiente é alterada, o NODE_ENV, sendo informado "production", onde pode ser útil em determinadas situações em ambientes de produção. - -Estes quatro scripts podem ser executados pelo `npm` através do comando `npm run `. Isso significa que, para que você possa testar o vue em funcionamento, basta executar `npm run dev`. Mas não faça isso agora, ainda existe um passo importante a ser executado no projeto. - -Continuando com o `package.json`, temos agora a inclusão dos pacotes de dependência do projeto, veja: - -```json -"dependencies": { - "vue": "^1.0.0" - }, - "devDependencies": { - "babel-core": "^6.0.0", - "babel-plugin-transform-runtime": "^6.0.0", - "babel-preset-es2015": "^6.0.0", - "babel-preset-stage-2": "^6.0.0", - "babel-runtime": "^6.0.0", - "cross-env": "^1.0.6", - "babelify": "^7.2.0", - "browserify": "^12.0.1", - "browserify-hmr": "^0.3.1", - "http-server": "^0.9.0", - "npm-run-all": "^1.6.0", - "uglify-js": "^2.5.0", - "vueify": "^8.5.2", - "watchify": "^3.4.0" - }, -``` - -> **Observação** -> -> Na iminência do Vue 2, alguns projetos (como o browserify-simple) já estão com o Vue 2 configurados, então o package.json já está diferente do apresentado. Se você deseja instalar o browserify-simple na versão Vue 1, use: -> -> `vue init browserify-simple#1 hello-vue` - -Na categoria "dependencies" temos o "vue" como framework do projeto, e na categoria "devDependencies" temos várias bibliotecas que auxiliam todo o processo de compilação e publicação do projeto. Por exemplo, babel é usado para converter código javascript para algo que o navegador irá compreender (Isso se chama *transpiler*, particularmente eu gosto de resumir para a palavra *compilar*). Veja que temos o *browserify*, o *http-server*, *vueify*, entre outros. - -Para que possamos instalar todas as bibliotecas no projeto (pois elas ainda não foram instaladas), devemos executar o seguinte comando: - -``` -$ npm install -``` - -Este comando irá realizar o download de todas as bibliotecas e organizá-las na pasta `node_modules`. Após a instalação, veja que o diretório `node_modules` possui diversos pacotes. A partir deste momento, podemos testar a aplicação Vue em ação, bastando usar o seguinte comando: - -``` -$ npm run dev -``` - -Este comando irá exibir uma resposta semelhante a figura a seguir: - -![](/content/images/2016/06/2016-06-28-11_08_21-npm.png) - -Perceba que o servidor está disponível no endereço `http://localhost:8080`. Ao acessar esta url no navegador, você verá a seguinte resposta: - -![](/content/images/2016/06/2016-06-28-10_29_05-hello-vue.png) - -O Vue neste momento está funcionando corretamente. É possível, a partir deste moemnto, alterar o arquivo `src/App.vue` e acompanhar as mudanças no navegador. Se você alterar algo no `` a resposta será exibida imediatamente no navegador. Se alterar algo no ``, necessita realizar um recar diff --git a/_posts/2016-06-28-gravacao-do-1o-hangout-vue-js-brasil.md b/_posts/2016-06-28-gravacao-do-1o-hangout-vue-js-brasil.md deleted file mode 100644 index 63c05a0..0000000 --- a/_posts/2016-06-28-gravacao-do-1o-hangout-vue-js-brasil.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: post -title: 'Gravação do 1º Hangout Vue.js Brasil' -main-class: 'dev' -date: 2016-06-28 11:24:45 -description: derscricao -color: '#637a91' -tags: eventos -layout: post -introduction: introducao ---- - -Hangout realizado em 25 de Junho de 2016. - - diff --git a/_posts/2016-06-30-vue-router.md b/_posts/2016-06-30-vue-router.md deleted file mode 100644 index 71c11e0..0000000 --- a/_posts/2016-06-30-vue-router.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -layout: post -title: 'Vue-router' -main-class: 'dev' -date: 2016-06-30 11:36:50 -description: derscricao -color: '#637a91' -tags: vue-js - -vue-router - -single-page-application -layout: post -introduction: introducao ---- - -A característica mais marcante de uma ***Single Page Application*** é a velocidade. Os elementos de interface já estão presentes e quando sua estrutura de servidor é bem montada (web service para prover os dados), a sensação que o usuário tem ao usar a aplicação é a de que a ela está instalada no próprio computador, tão rápida que é a resposta. - -Um componente essencial de uma SPA é o **Router** que é responsável por mostrar/esconder um ou mais elementos dependendo da URL que se acessa no browser. Esta é sua única responsabilidade, o que não significa que seja uma ferramenta simples! - -Este artigo tem por objetivo mostrar como configurar o **Vue-router**: um add-on para o Vue.js, desenvolvido pela própria equipe de desenvolvimento do Vue e que se integra de forma nativa à sua aplicação. - -Como aplicação exemplo será criado um novo projeto utilizando o Vue-cli, ferramenta de linha de comando que permite criar um esqueleto de projeto Vue. Caso nunca tenha visto sugiro ler o [excelente artigo](http://www.vuejs-brasil.com.br/crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify/) publicado por **Daniel Schmitz** neste mesmo blog. - -#### Criação do Projeto - -Assumindo que você já tenha todas as ferramentas instaladas (node.js, npm e vue-cli) basta estar numa pasta do sistema e executar `vue init webpack-simple nome-do-projeto`. - -![](/content/images/2016/06/Screen-Shot-2016-06-30-at-7-53-40-AM.png) - -Após responder às 4 perguntas sobre o projeto, basta acessar a pasta com `cd nome-do-projeto` *(substituindo nome-do-projeto pelo nome que você tenha escolhido, claro)* e executar `npm install`. Ao final da instalação, é preciso instalar o Vue-router, pois este não é instalado por padrão na criação do projeto com o Vue-cli: `npm install --save-dev vue-router`. - -> Todos os arquivos ficarão armazenados na pasta **/node_modules** e estarão a disposição dos seus arquivos do projeto para import - -Ao abrir no seu editor predileto o arquivo ```/src/main.js``` você verá a estrutura básica de um Vue object: - -```javascript -import Vue from 'vue' -import App from './App.vue' - -new Vue({ - el: 'body', - components: { App } -}) -``` - -Preste atenção em **App** pois este será nosso componente pai de todos os demais componentes que venham a fazer parte de nossa aplicação. - -#### Configuração do Vue-router - -Antes de iniciarmos a configuração, precisamos de pelo menos 2 componentes para haver alguma navegação. Assim, basta criar na pasta ```/src``` **ComponenteA.vue** e **ComponenteB.vue**. Em cada um deles basta adicionar um trecho HTML que os diferencie: - -```html - -``` - -```html - -``` - -Agora, voltando ao ```/src/main.js``` iniciaremos a configuração do Vue-router: - -```javascript -import Vue from 'vue' -import VueRouter from 'vue-router' // << aqui -import App from './App.vue' - -Vue.use(VueRouter) // << e aqui - -new Vue({ - el: 'body', - components: { App } -}) -``` - -Neste ponto apenas importamos o Vue-router diretamente da pasta **node_modules** e notificamos o Vue de sua presença. - -Agora, importaremos ambos os componentes que farão parte da aplicação... - -```javascript -import Vue from 'vue' -import VueRouter from 'vue-router' -import App from './App.vue' -import ComponenteA from './ComponenteA.vue' -import ComponenteB from './ComponenteB.vue' - -Vue.use(VueRouter) - -new Vue({ - el: 'body', - components: { App } -}) -``` - -... e então partimos para a configuração do router: - -```javascript -... -Vue.use(VueRouter) - -const router = new VueRouter() - -router.map({ - '/componente-a': { - component: ComponentA - }, - '/componente-b': { - component: ComponentB - }, -}) - -new Vue({ -... -``` - -Dentro do objeto passado para o método **map()** mapeamos as URLs aos componentes a serem mostrados. Agora, precisamos adaptar nosso App.vue para que receba o componente indicado pela URL em seu corpo e o exiba: - -**Remova tudo o que o Vue-cli tiver colocado em App.vue** e adicione o HTML abaixo: - -```html - -``` - -A tag especial `````` trazida pelo Vue-router será o local onde os componentes mapeados serão adicionados. Nada impede que você adicione outros elementos HTML ao App.vue. Por exemplo: uma barra de navegação na sua aplicação pode ser adicionada ali! - -O último passo é substituir a criação do Vue object pelo router.start(). Esta parte costuma confundir os iniciantes, pois a criação do Vue object passa a ser feita de forma implícita pelo Vue-router: - -```javascript -... - -router.map({ - '/componente-a': { - component: ComponentA - }, - '/componente-b': { - component: ComponentB - }, -}) - -router.start(App, '#container') -... -``` - -Perceba que o método start() associa o componente principal da aplicação (o que contém a tag ``````) a um elemento do DOM. Onde está este elemento? Ainda não existe mas será agora criado em **/index.html**: - -```html - - - - - route - - -
    - -
    - - - -``` - -Perceba o div de id container. Dentro dele também há um `````` e esta é a manha para que se possa usar um componente .vue como inicializador do Vue-router. Na documentação oficial se pede para que se crie um componente Vue genérico com esta finalidade. Mas isso não é necessário e você pode continuar usando a estrutura que está acostumado. - -Veja abaixo o arquivo main.js completo: - -```javascript -import Vue from 'vue' -import VueRouter from 'vue-router' -import App from './App.vue' -import ComponenteA from './ComponenteA.vue' -import ComponenteB from './ComponenteB.vue' - -Vue.use(VueRouter) - -const router = new VueRouter() - -router.map({ - '/componente-a': { - component: ComponentA - }, - '/componente-b': { - component: ComponentB - }, -}) - -router.start(App, '#container') -``` - -Para finalizar basta voltar ao terminal e executar `npm run dev` e então, no seu browser predileto, acessar ```http://localhost:8080/#!/componente-a``` e ```http://localhost:8080/#!/componente-b```. - -Este é apenas um setup inicial básico e para uma aplicação real esta configuração será armazenada numa pasta dedicada a ela. Isso por que a quantidade de rotas pode crescer de forma indefinida, dependendo de quantos componentes e quantas funcionalidades sua aplicação tiver. - -Por fim, o link para a documentação oficial do Vue-router: [http://router.vuejs.org/en/index.html](http://router.vuejs.org/en/index.html). diff --git a/_posts/2016-07-01-carregando-dados-assincronos-com-o-vue-router.md b/_posts/2016-07-01-carregando-dados-assincronos-com-o-vue-router.md deleted file mode 100644 index dbaaadf..0000000 --- a/_posts/2016-07-01-carregando-dados-assincronos-com-o-vue-router.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: post -title: 'Carregando dados assíncronos com o Vue-router' -main-class: 'dev' -date: 2016-07-01 11:41:01 -description: derscricao -color: '#637a91' -tags: vue-router - -vue-js -layout: post -introduction: introducao ---- - -Que o **Vue-router** é poderoso, isso nós já sabemos, correto? -> **Não, você não conhece ainda o Vue-router?** -Então dá uma olhada [nesse artigo](http://www.vuejs-brasil.com.br/vue-router/) publicado por *Vedovelli* sobre o Vue-router de maneira prática e bem explicada, para você poder já por em prática aplicações mais complexas com Vue.js. - -Uma dúvida de quando se utiliza o Router em seus componentes, é sobre o carregamento assíncrono de dados, ou seja, quando utilizamos de dados externos para montar o componente que está sendo invocado. - -Assim que o Vue-router está instalado em sua aplicação Vue, desta maneira: -```javascript -import Vue from 'vue' -import VueRouter from 'vue-router' - -Vue.use(VueRouter) // Instalação -... -``` - -Ficará disponível em todos os componentes o objeto route, com ele podemos chamar os denominados **Transition Hooks** (Ganchos de transição, traduzindo ao pé da letra), que são métodos chamados de acordo com o estado de carregamento do componente na rota utilizada. - -Você pode ver todos os hooks disponíveis através desse link: [Transition hooks](http://router.vuejs.org/en/pipeline/hooks.html). - -``` -... -module.exports = { - // outras opções - route: { - // Aqui chamamos os hooks - } -} -``` - -Com isso, temos em mente que devemos executar tarefas assíncronas dentro dos ganchos, fazendo com que a transição só continue até que seja resolvida uma *Promise* ou quando chamarmos um método para ir ao próximo passo. - -O gancho recomendado é o **data hook**, com ele é possível carregar e definir dados no componente atual. Ele é chamado após que o **activate hook** for resolvido e também quando a rota for alterada, mesmo o componente atual sendo reutilizado. - -Veja o exemplo abaixo e sua explicação, utilizaremos a função `setTimeout` para simular uma mudança assíncrona: - -``` - - - -``` - -**transition**: É um argumento (Object) que estará disponível em todos os hooks, com ele podemos redirecionar, abortar, prosseguir, dentre outros. -Veja nesse link os métodos possíveis de utilizar no objeto transition [Transition Object](http://router.vuejs.org/en/pipeline/hooks.html#transition-object) - -**transition.next**: Avança para o próximo passo da transição. Esse método faz possível atualizar o objeto data do componente mantendo a reatividade, passando um objeto e efetuando a alteração. - -*OBS: O data hook que está no objeto route é um mixin, fazendo automaticamente a mesclagem com o método data do componente.* - -Quando a rota for acessada, o valor inicial de `message: 'Loading'`, como mostra abaixo: -![](/content/images/2016/06/async-com-vue-router.png) - -Após 3 segundos, devido ao `setTimeout` a transição irá prosseguir e o valor de `message` sofrerá a mudança e passará a ter o valor de `message: 'Hello world'` -![](/content/images/2016/06/async-com-vue-router-2.png) - -Existe também a maneira para só renderizar o componente por completo quando os dados estiverem disponíveis, para isso basta adicionar a propriedade `waitForData` e defini-la como `true`. - -``` -//... -module.exports = { - data () { - return { - message: 'Loading' - } - }, - route: { - data (transition) { - setTimeout(() => { - transition.next({ - message: 'Hello world' - }) - }, 3000) - }, - waitForData: true - } -} -``` - - -### Carregando através de Promise -Retornar uma *Promise* é opcional, mas é possível aproveitá-la em todos os transition hooks. Com a particularidade de utilizar o `resolve` e o `reject` da *Promise* para respectivamente `prosseguir` ou `abortar` com o carregamento do componente e seus dados. - -Cada gancho que utilizar *Promise* só será resolvido quando a mesma for resolvida, se com sucesso, prossegui automaticamente, porem se houver falha, será necessário chamar o método `transition.abort()` *para retornar a rota anterior*, ou por exemplo `transition.redirect('/404')` *enviando o usuário para uma página (rota) de erro*. - -Veja esse exemplo tirada da documentação: -``` -... -route: { - canActivate () { - return authenticationService.isLoggedIn() - }, - activate (transition) { - let vm = this - let params = transition.to.params - return messageService - .fetch(`url/to/api/message/${params.messageId}`) - .then((message) => { - vm.message = message - }) - } -} -``` - -Dessa forma, em algum momento utilizando o Vue-router você irá deparar-se com algumas situações, mas esse add-on é potente e muito bem desenvolvido, tendo diversas soluções para a maioria dos problemas que encontraremos. - -Espero ter ajudado você antecipadamente ou ate mesmo com o seu atual problema, qualquer dúvida ou contribuição, somando ainda mais conhecimento a essa postagem, deixa seu comentário. - - diff --git a/_posts/2016-07-04-crie-e-publique-voce-mesmo-o-seu-template-vue-cli.md b/_posts/2016-07-04-crie-e-publique-voce-mesmo-o-seu-template-vue-cli.md deleted file mode 100644 index 7d3cf60..0000000 --- a/_posts/2016-07-04-crie-e-publique-voce-mesmo-o-seu-template-vue-cli.md +++ /dev/null @@ -1,682 +0,0 @@ ---- -layout: post -title: 'Crie e publique você mesmo o seu template vue-cli' -main-class: 'dev' -date: 2016-07-04 15:57:17 -description: derscricao -color: '#637a91' -tags: vue-js - -ferramentas -layout: post -introduction: introducao ---- - -Vimos no [artigo anterior](http://www.vuejs-brasil.com.br/crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify/) o **vue-cli**, uma ferramenta de linha de comando instalada pelo npm (npm i -g vue-cli) e que é usada para criar projetos prontos com uma estrutura mínima possível (chamados de skeletion ou boilerplate). - -Neste artigo é abordado como você pode criar o seu próprio template. Para criar o template, é necessário criar uma estrutura de arquivos no qual o **vue-cli** consiga compreender. - -Para facilitar este processo, vamos dividir a criação do template em 4 etapas distintas: - -- Etapa de criação -- Etapa de adaptação -- Etapa de testes e uso -- Etapa de publicação - -## 1 - Etapa de criação - -Nesta fase estamos decidindo o que o template terá em termos de instalação e uso. Criaremos como exemplo um template que possui uma infra estrutura completa para o vue, com os seguintes plugins: - -- Vue e Vueify (componentes .vue) -- Vuex -- Vue Router -- Vue Resource -- Bootstrap CSS (Bulma) - -O nome do nosso template será `vue-browserify-complete`. O nome `browserify` é adicionado ao template para facilitar o uso dos desenvolvedores, pois geralmente existe uma escolha entre `browserify` e `webpack`. - -Em um primeiro momento, podemos iniciar o nosso template se baseando em outro. Essa é a forma mais simples de começar. Escolhemos então o `browserify-simple` e criamos o projeto, da seguinte forma: - -``` -$ vue init browserify-simple vue-browserify-complete-template -``` - -Logo na criação, é pedido o nome do projeto. Neste ponto, ao invés de colcoar o nome do project, coloque `projectname`, conforme a imagem a seguir: - -![](/content/images/2016/07/2016-07-01-15_09_33-npm-1.png) - -Faça o mesmo para `description` e `author`, informando `projectdescription` e `projectauthor`. Em "Private", escolha "n". O seu projeto será configurado conforme a figura a seguir: - -![](/content/images/2016/07/2016-07-01-15_16_04-npm.png) - -> **Anote aí** -> -> Estes nomes serão usados no futuro: projectname, projectdescription e projectauthor. - -Após a criação do diretório `vue-browserify-complete-template`, use o npm install para carregar as bibliotecas básicas, pois precisamos testar o projeto antes de publicá-lo: - -``` -cd vue-browserify-complete-template -npm install -``` - -Após a instalação padrão, vamos adicionar os pacotes extras que iremos incluir no template: - -``` -npm i -S vuex vue-router vue-resource bootstrap -``` - -Após instalar todas estas bibliotecas, precisamos fazer o nosso template funcionar, vamos conferir como está o nosso projeto. Abra-o no seu editor de textos preferido e dê uma olhada na estrutura do projeto: - -![](/content/images/2016/07/2016-07-01-15_22_46-vue-browserify-complete-template---Visual-Studio-Code-2.png) - -Temos aqui um simples projeto, já com as bibliotecas instaladas no node_modules e configuradas no arquiv `package.json`. Veja que, o `package.json` é o arquivo que configura todo o seu projeto. Então ele deve ser tratado com muito cuidado! Vamos dar uma olhada nele, que a princípio possui o seguinte código inicial: - -```json -{ - "name": "projectname", - "description": "projectdescription", - "author": "projectauthor", - "scripts": { - "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", - "serve": "http-server -c 1 -a localhost", - "dev": "npm-run-all --parallel watchify serve", - "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" - }, - "dependencies": { - "bootstrap": "^3.3.6", - "vue": "^1.0.0", - "vue-resource": "^0.9.3", - "vue-router": "^0.7.13", - "vuex": "^1.0.0-rc" - }, -continua... -``` - -Os nomes que usamos lá no início, como "projectname" está agora presente aqui no `package.json`. Este é o primeiro detalhe que você tem que saber sobre a criação do template: você pode criar variáveis que serão questionadas no início da criação do template, e que serão usadas na construção do mesmo. Uma delas é o nome do projeto. - -Vamos supor que no nosso template queremos informar a versão do projeto, iniciando do "0.0.1". Então precisamos, primeiro, adicionar essa informação no `package.json`: - -```json -{ - "name": "projectname", - "version" : "0.0.1", - "description": "projectdescription", - "author": "projectauthor", -continua... -``` - -> **Anote aí** -> -> O package.json configura o template e precisamos ter máxima atenção nele - -Agora chegou o momento de criarmos as funcionalidades que estarão disponíveis no template. - -### Router - -O router pode ser configurado da seguinte forma: - -- Editar o arquivo main.js -- Incluir o arquivo router.js -- Incluir o arquivo routerconfig.js -- Incluir o arquivo content/MainContent.vue - -No arquivo main.js, alteramos para: - -``` -import Vue from 'vue' -import App from './App.vue' -import VueRouter from 'vue-router' -import RouterConfig from './routerconfig' - -Vue.use(VueRouter) -const router = new VueRouter() -router.map(RouterConfig) -router.start(App, 'App') -``` - -Incluímos aqui o `VueRouter` do node_modules e o `RouterConfig` que é o arquivo `routerconfig.js`. Veja que alteramos o `main.js` para usar o Vue Router, e que configuramos o router para carregar as informações do arquivo `routerconfig.js`. Este novo arquivo possui o seguinte código: - - -``` -import MainContent from './content/MainContent.vue' - -const RouterConfig = { - '/': { - component: MainContent - } -} - -export default RouterConfig; -``` - -O routerconfig.js terá toda a configuração de rotas do template. Ainda vamos criar alguns templates depois, mas por enquanto temos apenas o `MainContent`, que será criado a seguir: - -``` - - -``` - -Para finalizar a configuração básica do router, voltamos ao componente `App.vue` para adicionar o `router-view`, que é o local onde o router irá processar as rotas. Alteramos o `App.vue` para: - -``` - - - - - -``` - -Perceba que adicionamos uma nova div com o ``. Até o momento, o projeto possui os seguintes arquivos - -![](/content/images/2016/07/2016-07-01-15_55_05-vue-browserify-complete-template---Visual-Studio-Code.png) - -**Vamos testar!!** - -Precisamos testar o projeto e ver se não existem erros até o momento. Então execute `npm run dev` no terminal e verifique no navegador se o resultado é este aqui: - -![](/content/images/2016/07/2016-07-01-16_00_16-projectname.png) - -Perceba que o router está funcionando perfeitamente. Na barra de endereços temos o /#!/ e temos o "Main Content abaixo do "Hello Vue!". - -## Vue Resource - -O Vue Resouce é configurado para que possamos ler um objeto JSON do servidor. Primeiro, devemos criar este objeto, que poderemos chamar de "foo.json", veja: - -``` -{ - "msg": "a foo message" -} -``` - -Este arquivo deve ser criado na raiz do projeto, conforme a figura a seguir: - -![](/content/images/2016/07/2016-07-01-16_08_24-foo-json---vue-browserify-complete-template---Visual-Studio-Code.png) - -Para usarmos o Vue Resource, altere o arquivo `main.js`, adicionando o plugin: - -``` -import Vue from 'vue' -import App from './App.vue' -import VueRouter from 'vue-router' -import RouterConfig from './routerconfig' -import VueResource from 'vue-resource' - -Vue.use(VueRouter) -Vue.use(VueResource) -const router = new VueRouter() -router.map(RouterConfig) -router.start(App, 'App') -``` - -Veja que importamos o resource e usamos o `Vue.use` para adicioná-lo à instância Vue. Crie um novo componente que irá usar o resource, vamos adicioná-lo em `src/content/ResoureceContent.vue`, veja: - -``` - - -``` - -Este componente, um pouco mais complexo, possui um botão que irá chamar o método `onButtonClick`. Neste método, usamos `this.$http.get` para efetuar uma chamada Ajax ao endereço "/foo.json", e usamos promise para exibir a mensagem que veio do Ajax na variável `fooMessage`. A ideia aqui é apenas apresentar um exemplo simples de leitura Ajax mostrar uma resposta na página. - -Para testarmos este componente, volte ao `routerconfig.js` e adicione a seguinte rota: - -``` -import MainContent from './content/MainContent.vue' -import ResourceContent from './content/ResourceContent.vue' - -const RouterConfig = { - '/': { - component: MainContent - }, - '/resourceExample': { - component: ResourceContent - } -} - -export default RouterConfig; -``` - -Veja que a rota `/resourceExample` irá carregar o componente `ResourceContent.vue`. Para testarmos esta rota (pois ainda nao criamos um menu), acesse diretamente: `http://127.0.0.1:8080/#!/resourceExample`. Clique no botão para obter uma tela semelhante a figura a seguir: - -![](/content/images/2016/07/2016-07-01-16_33_16-projectname.png) - -### Vuex - -Agora vamos incluir um exemplo de Vuex no projeto. Aproveitando o [artigo sobre Vuex](http://www.vuejs-brasil.com.br/vuex/) do Fábio Vedovelli, vamos criar: - -- O diretório `src/vuex` -- O arquivo `src/vuex/store.js` - -**src/vuex/store.js**: -``` -import Vue from 'vue' -import Vuex from 'Vuex' - -Vue.use(Vuex) - -export default new Vuex.Store({ - state: { - user: { - name: '', - email: '' - } - }, - mutations: { - SET_USER (store, obj) { - store.user = obj.user - } - } - }) -``` - -Após criar o store, vamos criar o componente `VuexContent.vue`, que irá usar o store: - -``` - - -``` - -O que temos neste componente é o uso dos conceitos do Vuex, temos as actions e os getters funcionando. - -Precisamos adicionar o store no App.vue: - -``` - - - - - -``` - -Veja que importamos o store de `vuex/store` e usamos na configuração do componente App.vue. - -Para terminar esta parte do Vuex, vamos adicionar uma rota para o componente, no arquivo routerconfig.js: - -``` -import MainContent from './content/MainContent.vue' -import ResourceContent from './content/ResourceContent.vue' -import VuexContent from './content/VuexContent.vue' - - -const RouterConfig = { - '/': { - component: MainContent - }, - '/resourceExample': { - component: ResourceContent - }, - '/vuexExample': { - component: VuexContent - } -} - -export default RouterConfig; -``` - -Para que possamos testar o Vuex, acesse diretamente a seguinte url `http://127.0.0.1:8080/#!/vuexExample` e veja se o resultado é semelhante a figura a seguir: - -![](/content/images/2016/07/2016-07-01-17_07_07-projectname.png) - -### Bootstrap CSS - -Pode-se instalar qualquer framework css bootsrap que você considere mais util. Existem diversos com o bootstrap, materialize, semantiui, zurb, bulma entre outros. Neste artigo iremos usar o bulma, então inicialmente instale-o pelo npm: - -``` -npm i -S bulma -``` - -Após a instalação é preciso alterar o arquivo `index.html` e incluir o css do framework antes da tag ``, veja: - -```html - - - - - projectname - - - - - - - - -``` - -Perceba também que incluímos o `font-awesome`, no qual pode-se usar os ícones desta biblioteca. O font-awesome foi instalado através de CDN, linkando-o direto em um servidor web, que é uma outra forma de se usar as bibliotecas css/javascript em qualquer projeto. Fique a vontade em usar o que você achar que é melhor para o sue projeto. - -### Finalizando o router - -Agora que temos quase tudo pronto para terminar o template, precisamos voltar ao Router e criar um simples menu, seguido do carregamento dos consecutivos componentes. - -``` - - - - -``` - -Usamos o `