├── .editorconfig ├── .gitignore ├── Apostila ├── README.md └── pt-br │ ├── axios.md │ ├── como-enviar-exercicios.md │ ├── diretivas.md │ ├── introducao.md │ ├── propriedades.md │ ├── two-way-data-binding.md │ ├── vue-cli.md │ ├── vue-material.md │ └── vue-router.md ├── Exercicios ├── aula05 │ ├── README.md │ └── lucas-frutig │ │ └── Vue.js na Prática - Exercícios - Aula 5 - Lucas Frutig.md ├── aula06 │ ├── README.md │ ├── lucas-frutig │ │ └── Vue.js na Prática - Exercícios - Aula 6 - Lucas Frutig.md │ └── lucasaugustofrontend │ │ └── Vue.js na Prática - Exercícios - Aula 6 - Lucas Au └── aula07 │ └── README.md ├── LICENSE ├── README.md └── mini-ecommerce-webschool ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── database.json ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── categories.vue │ ├── person.vue │ └── products.vue └── main.js └── static └── .gitkeep /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,html,css}] 14 | charset = utf-8 15 | 16 | # 4 space indentation 17 | [*.{html}] 18 | indent_style = tab 19 | indent_size = 4 20 | 21 | # Tab indentation (no size specified) 22 | [Makefile] 23 | indent_style = tab 24 | 25 | # Indentation override for all JS and CSS 26 | [*.{css,js,json,vue,bowerrc}] 27 | indent_style = tab 28 | indent_size = 2 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /Apostila/README.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Índice 5 | 6 | 1. [Introdução](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/introducao.md) 7 | 2. [vue-cli](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/vue-cli.md) 8 | 3. [Instalação e Configuração do Vue Material](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/vue-material.md) 9 | 4. [Two-way data binding](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/two-way-data-binding.md) 10 | 5. [Diretivas](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/diretivas.md) 11 | 6. [Propriedades](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/propriedades.md) 12 | 7. [vue-router](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/vue-router.md) 13 | 8. [Axios](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/axios.md) 14 | 15 | 16 | 17 | 18 | ## Para enviar os exercícios, basta seguir as instruções [desse link](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/como-enviar-exercicios.md)! 19 | -------------------------------------------------------------------------------- /Apostila/pt-br/axios.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2 - Apostila 2 | 3 | 4 | ## Axios 5 | 6 | O [Axios](https://github.com/mzabriskie/axios) é um client `HTTP`, responsável por realizar requisições `HTTP` em alguma API. Ele sabe interagir tant com `XMLHttpRequest` como com a interface `HTTP` do Node. Ou seja, o mesmo código que utilizarmos para fazermos nossas requisições `HTTP` no navegador também irá funcionar no servidor. 7 | 8 | Podemos então, trabalhar com essa biblioteca em nossas aplicações em Vue.js ou em uma API desenvolvida em Node.js, por exemplo. Os códigos serão os mesmos, no front e no back. 9 | 10 | Além dessas características, as requisições realizadas pelo Axios retornam sempre uma promise, já compátivel com o ES6. 11 | 12 | 13 | ### Instalação 14 | 15 | `npm install --save axios` ou `bower install --save axios` 16 | 17 | 18 | ## Qual API iremos consumir? 19 | 20 | Durante o nosso curso, paralelamente eu (Ednilson Amaral) desenvolvi uma API simples para consumirmos durante o curso. O repositório dessa API é [esse](https://github.com/ednilsonamaral/vuejs-ecommerce-api). Para mais informações sobre como desenvolvi a API, basta ler [esse artigo](http://ednilsonamaral.me/construindo-uma-api-com-hapijs-e-mongodb/). 21 | 22 | Precisamos então, conhecer a API, saber quais são as *requests* disponíveis e como iremos trabalhar com ela. Para isso, iremos utilizar o Postman, para testes gerais antes de implementarmos em nosso código `.vue`. 23 | 24 | Vamos efetuar o download do *postman collections* com as *requests**, disponível [nesse link](https://raw.githubusercontent.com/ednilsonamaral/vuejs-ecommerce-api/master/Ecommerce-Vue.js-na-Pratica-postman_collection-29062017-1446.json) e importá-las no nosso Postman. 25 | 26 | Após termos importado, indo em **Collections**, visualizamos a pasta **Ecommerce Vue.js na Prática** com as requests possíveis. Temos **categorias (categories)** e **produtos (products)**. 27 | 28 | 29 | - Criar arquivo de configuração do axios 30 | - Listar categorias 31 | - Listar uma única categoria 32 | - Listar produtos 33 | - Listar um único produto 34 | -------------------------------------------------------------------------------- /Apostila/pt-br/como-enviar-exercicios.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Como enviar os exercícios do curso? 5 | 6 | 1. Fork esse repositório em seu github; 7 | 2. Clone-o; 8 | 3. Na pasta `Exercícios/aulaX` você vai criar uma pasta com o **username** do seu GitHub e salvar dentro da pasta da aula correspondente. Ou seja, se forem os exercícios da aula 04, deverá salvar em `Exercicios/aula04/` e assim por diante. 9 | 4. NÃO USE **git add .**. Trabalhe com **git add Exercicios/aulaX/nome_usuario/** e commite com a mensagem similar a: **git commit -m "Vue.js na Prática - Exercícios - Aula X - Nome do Fulano"**. 10 | 5. De o push em seu github. 11 | 6. No github oficial, crie um **PULL REQUEST** com o mesmo título do commit para efetuarmos as correções e aceitas o PR. 12 | -------------------------------------------------------------------------------- /Apostila/pt-br/diretivas.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Diretivas 5 | 6 | Diretivas são atributos diferentes dos atributos do HTML. Todas as diretivas no Vue.js possuem uma nomenclatura padrão, sempre começando com **v-** seguido pelo nome da diretiva. 7 | 8 | 9 | # v-on 10 | 11 | Com a diretiva **v-on** nós anexmos um ouvinte de evento ao elemento em questão. O tipo desse evento é denotado conforme o seu argumento. Para visualizar os argumentos suportados pelo **v-on**, basta acessar a documentação oficial do Vue.js, [clicando aqui](https://vuejs.org/v2/api/#v-on). Sua expressão, pode ser um nome de um método ou uma instrução inline. 12 | 13 | Conforme a própria documentação nos diz: 14 | 15 | 16 | > Quando usado em um elemento normal, ele só escuta eventos DOM nativos. Quando usado em um componente de elemento personalizado, ele também escuta eventos personalizados emitidos nesse componente filho. 17 | 18 | 19 | Vejamos um exemplo: 20 | 21 | ```js 22 | methods: { 23 | addTask() { 24 | const task = clone(this.newTask); 25 | this.tasks.push(task); 26 | } 27 | } 28 | ``` 29 | 30 | ```html 31 | 32 | ``` 33 | 34 | No exemplo acima, temos o método **addTask()** que é responsável por adionar uma nova *task* em nosso array. Então, em nosso HTML, chamamos esse método com o **v-on:click="addTask()". 35 | -------------------------------------------------------------------------------- /Apostila/pt-br/introducao.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Introdução ao Vue.js 5 | 6 | Primeiramente vamos aprender a pronúncia correta. Fala-se **view** *(/vjuː/)* e não **vue**. Ele foi criado pelo [Evan You](https://github.com/yyx990803) em 2014. 7 | 8 | O VueJS é um framework javascript progressivo, para desenvolvermos interfaces web robustas e complexas. Ele é baseado em componentes reativos para aplicações web modernas. Com ele, como já citado, podemos criar aplicações web iterativas, complexas e robustas. 9 | 10 | Ele não é considerado um framework *full stack*, ou seja do *back-end* ao *front-end*. Ele é focado **exclusivamente** para a camada da **view**! 11 | 12 | Podemos construir uma aplicação complexa facilmente com VueJS e trabalhar o *back-end* bem como entendermos, em qualquer stack. 13 | 14 | O **VueJS** destaca-se entre outros frameworks principalmente pela sua simplicidade e métodos de como trabalhar, baseado em componentes e focado apenas na **view** da sua aplicação. 15 | 16 | 17 | ## Curva de aprendizado 18 | 19 | Sua curva de aprendizado também é um fator importante comparado a outros frameworks. Aprendemos **VueJS** mais rapidamente do que aprendemos outros frameworks. 20 | 21 | Se você já trabalha com front-end e possui conhecimentos em HTML, CSS e JavaScript, você pode iniciar seus estudos em VueJS tranquilamente, pois se depará com várias situações familiares. Agora, se você não possui um conhecimento básico das tecnologias supracitadas, não comece diretamente com esse framework. Você pode até entender, mas certas coisas ficará confuso e díficil. 22 | 23 | 24 | ## Por que usar VueJS? Como ele está no mercado? 25 | 26 | A principal razão de trabalharmos com VueJS é sua flexibilidade e perfomance, comparado a outros frameworks. Como ele trabalha exclusivamente na camada da **view**, o *back-end* pouco me importa como vai ser desenvolvido, seja em PHP, Python, Node.js, *whatever*! 27 | 28 | Devido a isso, ligado a outros fatores, como a baixissima curva de aprendizado, leva o VueJS a crescer rapidamente. E sua popularidade é muito grande, contando com uma fortissima presença internacional, desde projetos em produção, como projetos open source. 29 | 30 | Não fique surpreso nos próximos anos se a popularidade do VueJS crescer mais e mais e mais e mais. 31 | -------------------------------------------------------------------------------- /Apostila/pt-br/propriedades.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Propriedades 5 | 6 | Quando criamos métodos no Vue Object nós o fazemos dentro de um objeto literal **{ }**, que é uma forma de iniciar um objeto usando apenas as chaves. 7 | 8 | Este objeto de configuração possui propriedades pré-definidas pelo Vue.js, dentro das quais o desenvolvedor distribuirá seu próprio código. Esta forma de distribuição do código é uma das belezas do Vue, pois ajuda na organização geral dos seus scripts. 9 | 10 | 11 | ### data() 12 | 13 | A propriedade data conterá um objeto com os dados do componente e que estarão disponíveis para serem mostrados no HTML. 14 | 15 | ```js 16 | data () { 17 | return { 18 | title: 'Ecommerce Webschool' 19 | } 20 | } 21 | ``` 22 | 23 | ```html 24 | 25 |

{{ title }}

26 | 27 | ``` 28 | 29 | No exemplo acima, criamos a nossa propriedade **data ( )** e, inicialmente, está nos retornando um dado chamado **title** e esse mesmo dado está sendo exibido em nosso HTML. 30 | 31 | 32 | ### methods() 33 | 34 | Ele irá conter todos os métodos que podemos utilizar para realizar algumas operação com os dados. Por exemplo, um método cadastrar. Conterá um objeto com todos os métodos também disponíveis ao HTML mas não limitados a ele. 35 | 36 | Digo isso pois qualquer método contido neste objeto pode também executar os demais métodos do componente, bastando para isso utilizar o this (neste caso o this se refere ao próprio componente). 37 | 38 | Vejamos um exemplo: 39 | 40 | ```js 41 | methods: { 42 | addTask() { 43 | const task = clone(this.newTask); 44 | this.tasks.push(task); 45 | } 46 | } 47 | ``` 48 | 49 | ```html 50 | 51 | ``` 52 | 53 | No exemplo acima, temos o método **addTask()** que é responsável por adionar uma nova *task* em nosso array. Então, em nosso HTML, chamamos esse método com o **v-on:click="addTask()". 54 | -------------------------------------------------------------------------------- /Apostila/pt-br/two-way-data-binding.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Two-way data binding 5 | 6 | O *two-way data binding* é responsável por permitir ao usuário modificar as informações contidas nos componentes do Vue.js em tempo real. 7 | 8 | 9 | ## Propriedade data ( ) 10 | 11 | A propriedade **data ( )** conterá um objeto com os dados do componente e que estarão disponíveis para serem mostrados no HTML. 12 | 13 | ```js 14 | data () { 15 | return { 16 | title: 'Ecommerce Webschool' 17 | } 18 | } 19 | ``` 20 | 21 | ```html 22 | 23 |

{{ title }}

24 | 25 | ``` 26 | 27 | No exemplo acima, criamos a nossa propriedade **data ( )** e, inicialmente, está nos retornando um dado chamado **title** e esse mesmo dado está sendo exibido em nosso HTML. 28 | -------------------------------------------------------------------------------- /Apostila/pt-br/vue-cli.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## vue-cli 5 | 6 | O **vue-cli** é uma ferramenta com o intuito de facilitar a criação de projetos. Ele é responsável por criar alguns templates para projetos em Vue.js. Nesse projeto iremos utilizar o template do webpack disponibilizado pelo **vue-cli**. 7 | 8 | Para instalar o **vue-cli** basta executar o seguinte comando: `npm install -g vue-cli`. 9 | 10 | Para visualizar os templates disponíveis basta executar o seguinte comando: `vue list`. E para criar um projeto com um template padrão do **vue-cli**, basta executar o seguinte comando: `vue init nome_template nome_projeto`, por exemplo, `vue init webpack vue-webpack`. 11 | 12 | Ele irá instalar o projeto dividido em vários arquivos e pastas, vamos descobrir o que cada pasta possui e qual é sua responsabilidade. 13 | 14 | * `build`: possui os arquivos de configuração que irão fazer o build da aplicação; 15 | * `dist`: após realizar `npm run build` o webpack irá compilar o seu projeto para produção, minificando e concatenando todos os arquivos; 16 | * `config`: alguns arquivos que precisamos alterar uma coisa ou outra em nosso ambiente; 17 | * `src`: é o nosso CÓDIGO FONTE, onde iremos brincar pra caramba. 18 | -------------------------------------------------------------------------------- /Apostila/pt-br/vue-material.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Apostila 2 | 3 | 4 | ## Instalação e Configuração do Vue Material 5 | 6 | O Vue Material é um framework leve, construído com base nas especificações do Material Design. Ele foi desenvolvido para utilizarmos em projetos Vue.js. Com ele é possível criarmos aplicativos web ainda mais poderosos e bem desenhados, inclusivo no responsivo. 7 | 8 | Podemos criar e utilizar temas dinamicamente, utilizar seus componentes, aproveitar ao máximo dos elementos UI com uma API. Seu principal objetivo é entregar inúmeros componentes reutilizáveis e diversos elementos de interface de usuário para que possamos criar aplicações com suporte para todos os navegadores web modernos através do Vue.js 2. 9 | 10 | 11 | # Aqui iremos apresentar sua instalação e configuração para templates desenvolvidos com `vue-cli`, especificamente o `webpack`. 12 | 13 | 14 | ### Instalação 15 | 16 | Para instalar o Vue Material em seu projeto Vue.js é muito simples, basta executar o seguinte comando no terminal: `npm install --save vue-material`. 17 | 18 | 19 | ### Configuração 20 | 21 | Em seu `main.js`, você precisa: 22 | 23 | 1. Importar o `vue-material`; 24 | 2. Importar o CSS do `vue-material`; 25 | 3. Informar ao Vue que utilize o `vue-material`; 26 | 4. Adicionar no `index.html` links para **Material Icons**; 27 | 5. Registar tema **default** em `main.js`. 28 | 29 | 30 | Após os passos acima, nosso `main.js` e `index.html` ficarão: 31 | 32 | ```js 33 | import Vue from 'vue' 34 | import VueMaterial from 'vue-material' // 1. Importar o vue-material 35 | import 'vue-material/dist/vue-material.css' // 2. Importar o CSS do vue-material 36 | import App from './App' 37 | 38 | Vue.use(VueMaterial) // 3. Informar ao Vue que utilize o vue-material 39 | 40 | // 5. Registar tema default em main.js 41 | Vue.material.registerTheme('default', { 42 | primary: 'blue', 43 | accent: 'red', 44 | warn: 'red' 45 | }) 46 | 47 | /* eslint-disable no-new */ 48 | new Vue({ 49 | el: '#app', 50 | render: h => h(App) 51 | }) 52 | ``` 53 | 54 | ```html 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | mini-ecommerce-webschool 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 | 73 | 74 | ``` 75 | 76 | 77 | Feito isso, então vamos ao pequeno exemplo de um *toolbar* em nosso `App.vue`: 78 | 79 | ```html 80 | 87 | ``` 88 | 89 | 90 | Para visualizar os demais componentes disponíveis pelo Vue Material, basta acessar sua [documentação oficial](https://vuematerial.github.io/#/). 91 | -------------------------------------------------------------------------------- /Apostila/pt-br/vue-router.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2 - Apostila 2 | 3 | 4 | ## `vue-router` 5 | 6 | O `vue-router` é um add-on oficial do Vue.js responsável por criar e manter as rotas das nossas aplicações. Ele foi desenvolvido pela própria equipe de desenvolvimento do Vue.js e ele se integra nas nossas aplicações de forma nativa. 7 | 8 | Nas versões mais atuais do **vue-cli** já é possível instalar o `vue-router` na instalação do template padrão. Caso não seja instalado já via **vue-cli** o comando para instalação é `npm install --save vue-router`. 9 | 10 | Agora, vamos configurar o `vue-router` em nossa aplicação. 11 | 12 | No arquivo `main.js` devemos: 13 | 14 | 1. Importar o `vue-router`; 15 | 2. Dizer ao Vue para utilizar o `vue-router`; 16 | 3. Criar as rotas; 17 | 4. Chamar um `new VueRouter`; 18 | 5. Especificar na nossa instância Vue que iremos renderizar com as rotas. 19 | 20 | Os passos acima, estão no código abaixo, descritos com comentários o que é cada passo. 21 | 22 | ```js 23 | import Vue from 'vue' 24 | 25 | // 1. Importar o `vue-router` 26 | import VueRouter from 'vue-router' 27 | 28 | import VueMaterial from 'vue-material' 29 | import 'vue-material/dist/vue-material.css' 30 | 31 | import App from './App' 32 | import Categories from './components/categories.vue' 33 | import Products from './components/products.vue' 34 | 35 | Vue.use(VueMaterial) 36 | 37 | // 2. Dizer ao Vue para utilizar o `vue-router` 38 | Vue.use(VueRouter) 39 | 40 | // 3. Criar as rotas 41 | const routes = [ 42 | { path: '/products', component: Products }, 43 | { path: '/categories', component: Categories } 44 | ] 45 | 46 | // 4. Chamar um `new VueRouter` 47 | const router = new VueRouter({ 48 | routes 49 | }) 50 | 51 | Vue.material.registerTheme('default', { 52 | primary: 'blue', 53 | accent: 'red', 54 | warn: 'red' 55 | }) 56 | 57 | /* eslint-disable no-new */ 58 | new Vue({ 59 | // 5. Especificar na nossa instância Vue que iremos renderizar com as rotas 60 | router, 61 | render: (h) => h(App) 62 | }).$mount('#app') 63 | ``` 64 | 65 | Assim é possível criarmos as rotas necessárias para a nossa aplicação. 66 | 67 | Maiores informações quanto ao `vue-router`, basta vermos a sua documentação oficial, [nesse link](http://router.vuejs.org/en/). 68 | -------------------------------------------------------------------------------- /Exercicios/aula05/README.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | 4 | ## Aula 05 5 | 6 | Acrescentar um **input** no *header* e fazer com que o título atualize automaticamente conforme for digitando no **input**. 7 | -------------------------------------------------------------------------------- /Exercicios/aula05/lucas-frutig/Vue.js na Prática - Exercícios - Aula 5 - Lucas Frutig.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | 4 | ## Aula 05 5 | 6 | Acrescentar um **input** no *header* e fazer com que o título atualize automaticamente conforme for digitando no **input**. 7 | 8 | ## Nome: Lucas Frutig 9 | 10 | ## Aula 05 - Resolvido 11 | 12 | ```````````````````````````````````` 13 | 14 | 25 | 26 | 36 | 37 | 40 | ````````````````````````````````````````` 41 | -------------------------------------------------------------------------------- /Exercicios/aula06/README.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | 4 | ## Aula 06 5 | 6 | Fazer o menu funcionar, abrindo na esquerda conforme explicado no vídeo. 7 | -------------------------------------------------------------------------------- /Exercicios/aula06/lucas-frutig/Vue.js na Prática - Exercícios - Aula 6 - Lucas Frutig.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | 4 | ## Aula 05 5 | 6 | Fazer o menu funcionar, abrindo na esquerda conforme explicado no vídeo. 7 | 8 | ## Nome: Lucas Frutig 9 | 10 | ## Resolvido 11 | 12 | ```````````````````````````````````` 13 | 14 | 32 | 33 | 48 | 49 | 52 | 53 | 54 | ```````````````````````````````````` -------------------------------------------------------------------------------- /Exercicios/aula06/lucasaugustofrontend/Vue.js na Prática - Exercícios - Aula 6 - Lucas Au: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | ## Aula 06 4 | 5 | Fazendo o menu lateral funciona conforme explicado no video 6 | 7 | ### Nome: Lucas Augusto 8 | 9 | ``` html 10 | 36 | 37 | 54 | ``` -------------------------------------------------------------------------------- /Exercicios/aula07/README.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x - Exercícios 2 | 3 | 4 | ## Aula 07 5 | 6 | Ao clicar no menu, em um determinado link, fechar o menu lateral ao renderizar a *view*. 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 WebSchool.io 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webschool.io - Curso Vue.js 2.x 2 | 3 | ## Professor 4 | 5 | - [Ednilson Amaral](https://github.com/ednilsonamaral) 6 | 7 | 8 | ## Informações Gerais 9 | 10 | O curso de Vue.js da Webschool irá abordar do básico ao avançado. Ao final do curso, seremos capazes de construir aplicações robustas e complexas. Teremos conteúdo em texto, códigos e vídeos, para todos os gostos. 11 | 12 | Estudaremos diretamente a **versão 2!** 13 | 14 | Será um curso prático, ou seja, iremos aprender Vue.js na prática, já aplicando seus conceitos e técnicas em cenários reais. 15 | 16 | Durante o curso iremos desenvolver um mini-ecommerce, onde teremos: 17 | 18 | - Lista de Produtos; 19 | - Lista de Categorias; 20 | - Sistema de Busca; 21 | - Login; 22 | - Checkout. 23 | 24 | 25 | ## Links Úteis 26 | 27 | - [Nossa Apostila Oficial](https://github.com/Webschool-io/vuejs-2-na-pratica/tree/master/Apostila) 28 | - [Documentação Oficial do Vue.js](https://vuejs.org/v2/guide/) 29 | - [Documentação Oficial do vue-cli](https://github.com/vuejs/vue-cli) 30 | - [Documentação Oficial do Vue Material](https://vuematerial.github.io/#/) 31 | - [Documentação Oficial do vue-router](http://router.vuejs.org/en/) 32 | - [Documentação Oficial do Axios](https://github.com/mzabriskie/axios) 33 | 34 | 35 | ## Grupos de Discussão 36 | 37 | - [Facebook](https://www.facebook.com/groups/webschool.vue/) 38 | - [Telegram](https://t.me/webschoolvuejs) 39 | 40 | 41 | ## Para enviar os exercícios, basta seguir as instruções [desse link](https://github.com/Webschool-io/vuejs-2-na-pratica/blob/master/Apostila/pt-br/como-enviar-exercicios.md)! 42 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "plugins": [ "istanbul" ] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/README.md: -------------------------------------------------------------------------------- 1 | # mini-ecommerce-webschool 2 | 3 | > Mini ecommerce da Webschool desenvolvido com Vue.js 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | var ora = require('ora') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var shell = require('shelljs') 10 | var webpack = require('webpack') 11 | var config = require('../config') 12 | var webpackConfig = require('./webpack.prod.conf') 13 | 14 | var spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 18 | shell.rm('-rf', assetsPath) 19 | shell.mkdir('-p', assetsPath) 20 | shell.config.silent = true 21 | shell.cp('-R', 'static/*', assetsPath) 22 | shell.config.silent = false 23 | 24 | webpack(webpackConfig, function (err, stats) { 25 | spinner.stop() 26 | if (err) throw err 27 | process.stdout.write(stats.toString({ 28 | colors: true, 29 | modules: false, 30 | children: false, 31 | chunks: false, 32 | chunkModules: false 33 | }) + '\n\n') 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | devMiddleware.waitUntilValid(function () { 68 | console.log('> Listening at ' + uri + '\n') 69 | }) 70 | 71 | module.exports = app.listen(port, function (err) { 72 | if (err) { 73 | console.log(err) 74 | return 75 | } 76 | 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | }) 82 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | // Extract CSS when that option is specified 29 | // (which is the case during production build) 30 | if (options.extract) { 31 | return ExtractTextPlugin.extract({ 32 | loader: sourceLoader, 33 | fallbackLoader: 'vue-style-loader' 34 | }) 35 | } else { 36 | return ['vue-style-loader', sourceLoader].join('!') 37 | } 38 | } 39 | 40 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 41 | return { 42 | css: generateLoaders(['css']), 43 | postcss: generateLoaders(['css']), 44 | less: generateLoaders(['css', 'less']), 45 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 46 | scss: generateLoaders(['css', 'sass']), 47 | stylus: generateLoaders(['css', 'stylus']), 48 | styl: generateLoaders(['css', 'stylus']) 49 | } 50 | } 51 | 52 | // Generate loaders for standalone style files (outside of .vue) 53 | exports.styleLoaders = function (options) { 54 | var output = [] 55 | var loaders = exports.cssLoaders(options) 56 | for (var extension in loaders) { 57 | var loader = loaders[extension] 58 | output.push({ 59 | test: new RegExp('\\.' + extension + '$'), 60 | loader: loader 61 | }) 62 | } 63 | return output 64 | } 65 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | postcss: [ 13 | require('autoprefixer')({ 14 | browsers: ['last 2 versions'] 15 | }) 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | var eslintFriendlyFormatter = require('eslint-friendly-formatter') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | module.exports = { 12 | entry: { 13 | app: './src/main.js' 14 | }, 15 | output: { 16 | path: config.build.assetsRoot, 17 | filename: '[name].js', 18 | publicPath: process.env.NODE_ENV === 'production' 19 | ? config.build.assetsPublicPath 20 | : config.dev.assetsPublicPath 21 | }, 22 | resolve: { 23 | extensions: ['.js', '.vue', '.json'], 24 | modules: [ 25 | resolve('src'), 26 | resolve('node_modules') 27 | ], 28 | alias: { 29 | 'src': resolve('src'), 30 | 'assets': resolve('src/assets'), 31 | 'components': resolve('src/components') 32 | } 33 | }, 34 | module: { 35 | rules: [ 36 | { 37 | test: /\.(js|vue)$/, 38 | loader: 'eslint-loader', 39 | enforce: "pre", 40 | include: [resolve('src'), resolve('test')], 41 | options: { 42 | formatter: eslintFriendlyFormatter 43 | } 44 | }, 45 | { 46 | test: /\.vue$/, 47 | loader: 'vue-loader', 48 | options: vueLoaderConfig 49 | }, 50 | { 51 | test: /\.js$/, 52 | loader: 'babel-loader', 53 | include: [resolve('src'), resolve('test')] 54 | }, 55 | { 56 | test: /\.json$/, 57 | loader: 'json-loader' 58 | }, 59 | { 60 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 61 | loader: 'url-loader', 62 | query: { 63 | limit: 10000, 64 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 65 | } 66 | }, 67 | { 68 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 69 | loader: 'url-loader', 70 | query: { 71 | limit: 10000, 72 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 73 | } 74 | } 75 | ] 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var HtmlWebpackPlugin = require('html-webpack-plugin') 8 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 9 | var env = config.build.env 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | rules: utils.styleLoaders({ 14 | sourceMap: config.build.productionSourceMap, 15 | extract: true 16 | }) 17 | }, 18 | devtool: config.build.productionSourceMap ? '#source-map' : false, 19 | output: { 20 | path: config.build.assetsRoot, 21 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 22 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 23 | }, 24 | plugins: [ 25 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 26 | new webpack.DefinePlugin({ 27 | 'process.env': env 28 | }), 29 | new webpack.optimize.UglifyJsPlugin({ 30 | compress: { 31 | warnings: false 32 | } 33 | }), 34 | // extract css into its own file 35 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 36 | // generate dist index.html with correct asset hash for caching. 37 | // you can customize output by editing /index.html 38 | // see https://github.com/ampedandwired/html-webpack-plugin 39 | new HtmlWebpackPlugin({ 40 | filename: config.build.index, 41 | template: 'index.html', 42 | inject: true, 43 | minify: { 44 | removeComments: true, 45 | collapseWhitespace: true, 46 | removeAttributeQuotes: true 47 | // more options: 48 | // https://github.com/kangax/html-minifier#options-quick-reference 49 | }, 50 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 51 | chunksSortMode: 'dependency' 52 | }), 53 | // split vendor js into its own file 54 | new webpack.optimize.CommonsChunkPlugin({ 55 | name: 'vendor', 56 | minChunks: function (module, count) { 57 | // any required modules inside node_modules are extracted to vendor 58 | return ( 59 | module.resource && 60 | /\.js$/.test(module.resource) && 61 | module.resource.indexOf( 62 | path.join(__dirname, '../node_modules') 63 | ) === 0 64 | ) 65 | } 66 | }), 67 | // extract webpack runtime and module manifest to its own file in order to 68 | // prevent vendor hash from being updated whenever app bundle is updated 69 | new webpack.optimize.CommonsChunkPlugin({ 70 | name: 'manifest', 71 | chunks: ['vendor'] 72 | }) 73 | ] 74 | }) 75 | 76 | if (config.build.productionGzip) { 77 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 78 | 79 | webpackConfig.plugins.push( 80 | new CompressionWebpackPlugin({ 81 | asset: '[path].gz[query]', 82 | algorithm: 'gzip', 83 | test: new RegExp( 84 | '\\.(' + 85 | config.build.productionGzipExtensions.join('|') + 86 | ')$' 87 | ), 88 | threshold: 10240, 89 | minRatio: 0.8 90 | }) 91 | ) 92 | } 93 | 94 | if (config.build.bundleAnalyzerReport) { 95 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 96 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 97 | } 98 | 99 | module.exports = webpackConfig 100 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/database.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "id": 0, 5 | "permission": "admin", 6 | "email": "admin@admin.com", 7 | "password": "123" 8 | }, 9 | { 10 | "id": 0, 11 | "permission": "user", 12 | "email": "user@admin.com", 13 | "password": "321" 14 | } 15 | ], 16 | "products": [ 17 | { 18 | "id": 0, 19 | "name": "notebook", 20 | "image": "http://www3.lenovo.com/medias/lenovo-laptop-lenovo-yoga-13-orange-back.png?context=bWFzdGVyfGltYWdlc3wxMjE1ODd8aW1hZ2UvcG5nfGltYWdlcy9oZTQvaDdkLzkzMjg1NTE1NTkxOTgucG5nfDAyODBhN2MxYzczNjRmNDdlYWU5NDFkMTNmMzdiZDg3NzA4ZWQ5NGUxMjMwZDRjZDE2ZmFiNTNjZjYxYTUxMDc", 21 | "price": "2100", 22 | "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 23 | "category": "tecnologia" 24 | }, 25 | { 26 | "id": 1, 27 | "name": "celular", 28 | "image": "http://rockntech.com.br/wp-content/uploads/2013/09/top-20-aparelhos-telefone-celular-mais-vendidos_12.jpg", 29 | "price": "1900", 30 | "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 31 | "category": "tecnologia" 32 | }, 33 | { 34 | "id": 3, 35 | "name": "tenis", 36 | "image": "http://artwalk.vteximg.com.br/arquivos/ids/184614-1000-1000/Tenis-New-Balance-574-Masculino-1.jpg", 37 | "price": "320", 38 | "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 39 | "category": "roupas" 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | mini-ecommerce-webschool 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mini-ecommerce-webschool", 3 | "version": "1.0.0", 4 | "description": "Mini ecommerce da Webschool desenvolvido com Vue.js", 5 | "author": "Ednilson Amaral ", 6 | "scripts": { 7 | "dev": "node build/dev-server.js", 8 | "build": "node build/build.js", 9 | "lint": "eslint --ext .js,.vue src" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.10", 13 | "vue-material": "^0.7.1", 14 | "vue-router": "^2.3.0" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^6.7.2", 18 | "babel-core": "^6.22.1", 19 | "babel-eslint": "^7.1.1", 20 | "babel-loader": "^6.2.10", 21 | "babel-plugin-transform-runtime": "^6.22.0", 22 | "babel-preset-es2015": "^6.22.0", 23 | "babel-preset-stage-2": "^6.22.0", 24 | "babel-register": "^6.22.0", 25 | "chalk": "^1.1.3", 26 | "connect-history-api-fallback": "^1.3.0", 27 | "css-loader": "^0.26.1", 28 | "eslint": "^3.14.1", 29 | "eslint-friendly-formatter": "^2.0.7", 30 | "eslint-loader": "^1.6.1", 31 | "eslint-plugin-html": "^2.0.0", 32 | "eslint-config-standard": "^6.2.1", 33 | "eslint-plugin-promise": "^3.4.0", 34 | "eslint-plugin-standard": "^2.0.1", 35 | "eventsource-polyfill": "^0.9.6", 36 | "express": "^4.14.1", 37 | "extract-text-webpack-plugin": "^2.0.0-rc.2", 38 | "file-loader": "^0.10.0", 39 | "friendly-errors-webpack-plugin": "^1.1.3", 40 | "function-bind": "^1.1.0", 41 | "html-webpack-plugin": "^2.28.0", 42 | "http-proxy-middleware": "^0.17.3", 43 | "json-loader": "^0.5.4", 44 | "webpack-bundle-analyzer": "^2.2.1", 45 | "semver": "^5.3.0", 46 | "opn": "^4.0.2", 47 | "ora": "^1.1.0", 48 | "shelljs": "^0.7.6", 49 | "url-loader": "^0.5.7", 50 | "vue-loader": "^10.3.0", 51 | "vue-style-loader": "^2.0.0", 52 | "vue-template-compiler": "^2.1.10", 53 | "webpack": "^2.2.1", 54 | "webpack-dev-middleware": "^1.10.0", 55 | "webpack-hot-middleware": "^2.16.1", 56 | "webpack-merge": "^2.6.1" 57 | }, 58 | "engines": { 59 | "node": ">= 4.0.0", 60 | "npm": ">= 3.0.0" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/App.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 65 | 66 | 68 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Webschool-io/vuejs-2-na-pratica/63603959b2cd6068c3630e0e81e018ebc1a0f974/mini-ecommerce-webschool/src/assets/logo.png -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/components/categories.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 14 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/components/person.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | 12 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/components/products.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 14 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import VueMaterial from 'vue-material' 5 | import 'vue-material/dist/vue-material.css' 6 | 7 | import App from './App' 8 | import Categories from './components/categories.vue' 9 | import Products from './components/products.vue' 10 | 11 | Vue.use(VueMaterial) 12 | Vue.use(VueRouter) 13 | 14 | const routes = [ 15 | { path: '/products', component: Products }, 16 | { path: '/categories', component: Categories } 17 | ] 18 | 19 | const router = new VueRouter({ 20 | routes 21 | }) 22 | 23 | Vue.material.registerTheme('default', { 24 | primary: 'blue', 25 | accent: 'red', 26 | warn: 'red' 27 | }) 28 | 29 | /* eslint-disable no-new */ 30 | new Vue({ 31 | router, 32 | render: (h) => h(App) 33 | }).$mount('#app') 34 | -------------------------------------------------------------------------------- /mini-ecommerce-webschool/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Webschool-io/vuejs-2-na-pratica/63603959b2cd6068c3630e0e81e018ebc1a0f974/mini-ecommerce-webschool/static/.gitkeep --------------------------------------------------------------------------------