9 |
9 | 
17 | 
15 | {{ $t('message.hello') }}
28 | ``` 29 | 30 | Dessa forma, tudo oque for estático em nossa aplicação irá ser exibido a partir de um objeto, então: 31 | 32 | * É recomendável começar o projeto JÁ utilizando o i18n, pois para reestruturar tudo pode ser uma dor de cabeça 33 | 34 | * Mensagens em certas linguagens podem ficar muito grande ou muito pequeno do que o originalmente esperado. 35 | 36 | * Apenas utilize i18n se o seu projeto seja **REALMENTE** internacional, pois pode perder muito tempo no projeto sem necessidade. 37 | 38 | * NÃO iremos mostrar a aplicação do i18n no nosso projeto atual pois iria precisar refazer algumas coisas, o que quebraria a ideia do curso, mas fique á vontade para utilizá-lo! 39 | 40 | Na próxima seção iremos aplicar notificações com AWN, nos vemos lá! 41 | 42 | [Próxima Seção](./3-VueAWN.md) -------------------------------------------------------------------------------- /docs/tutorial/3-Vuetify/3-Customização.md: -------------------------------------------------------------------------------- 1 | # Customização 2 | 3 | Vamos agora customizar o nosso **tema**, para conseguirmos seguir uma padronização. 4 | 5 | Quando instalamos o **Vuetify**, foi criado uma pasta **plugins** contendo o **vuetify.js**: 6 | 7 | ```ts 8 | import Vue from 'vue'; 9 | import Vuetify from 'vuetify/lib'; 10 | 11 | Vue.use(Vuetify); 12 | 13 | export default new Vuetify({ 14 | }); 15 | ``` 16 | 17 | Dentro do **Vuetify** podemos passar configurações por padrão. 18 | 19 | Por exemplo, vamos passar o tema padrão para a aplicação: 20 | 21 | ```ts 22 | import Vue from 'vue'; 23 | import Vuetify from 'vuetify/lib'; 24 | 25 | Vue.use(Vuetify); 26 | 27 | export default new Vuetify({ 28 | theme: { 29 | dark: true, 30 | }, 31 | }); 32 | ``` 33 | 34 | ## Cores 35 | 36 | Podemos também customizar diretamente as **cores**: 37 | 38 | ```ts 39 | import Vue from 'vue'; 40 | import Vuetify from 'vuetify/lib'; 41 | 42 | Vue.use(Vuetify); 43 | 44 | export default new Vuetify({ 45 | themes: { 46 | light: { 47 | primary: '#a142f5', 48 | secondary: '#f5f5f5', 49 | accent: '#c463e6', 50 | error: '#e66365', 51 | }, 52 | }, 53 | theme: { 54 | light: true, 55 | }, 56 | }); 57 | ``` 58 | 59 | Dessa forma, podemos acessar as cores globais do **Vuetify** de uma forma já **definida** 60 | 61 | Na próxima seção iremos discutir um pouco sobre o que virá nas próximas seções, te vemos lá! 62 | 63 | [Próxima Seção](./4-Considerações.md) -------------------------------------------------------------------------------- /docs/tutorial/2-Conceitos/14-Considerações.md: -------------------------------------------------------------------------------- 1 | # Considerações finais 2 | 3 | Obrigado mesmo por ter chegado até aqui! Com o conhecimento que passamos, ja é possível fazer muita coisa mesmo com o Vue, durante as próximas seções iremos explorar todo o ecossistema que o **Vue** nos forneçe! 4 | 5 | A partir de agora, começaremos um projeto aplicando bibliotecas do **Vue**, assim conseguindo explicar coisas na prática, além de exercitar os conceitos. 6 | 7 | Qualquer dúvida ou reportar algum problema sobre o curso, reporte diretamente no [repositório](https://github.com/Novout/vue4noobs). E se possível deixe uma estrela, foi realmente trabalhoso. 8 | 9 | ## Tópicos Adicionais 10 | 11 | Tópicos como **componentes assíncronos** e **manipulações de carregamento** não serão abordados pois o objetivo do curso é uma introdução ao vue mostrando todo o seu **ecossistema**, mas iremos deixar a seguir se desejar ler sobre estes tópicos: 12 | * 13 | [Componentes Assíncronos](https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/) 14 | 15 | [Manipulações de Carregamento](https://alligator.io/vuejs/vue-async-components-load-error/) 16 | 17 | * Infelizmente a maioria dos conteúdos de **Vue** ainda estão em inglês, e é exatamente o motivo para a existência deste mini-curso sendo o objetivo conseguir atingir novos entusiastas em **Vue**, então em um futuro poderemos ter tópicos mais específicos traduzidos(por exemplo, o novo Vue 3). 18 | 19 | [Próxima Seção](./../3-Vuetify/1-Iniciando%20com%20Vuetify.md) -------------------------------------------------------------------------------- /docs/tutorial/5-Vuex/6-Getters.md: -------------------------------------------------------------------------------- 1 | # Getters 2 | 3 | Os **getters** funcionam da mesma forma que as **computeds**, e no nosso caso iremos usar para concatenar a string que será exibida no nosso `/dashboard`: 4 | 5 | ```ts 6 | import Vue from 'vue'; 7 | import Vuex from 'vuex'; 8 | 9 | Vue.use(Vuex); 10 | 11 | export default new Vuex.Store({ 12 | state: { 13 | usuario: { 14 | conta: '', 15 | senha: '', 16 | }, 17 | }, 18 | actions: { 19 | usuarioLogado(context, usuario) { 20 | context.commit('usuarioLogado', usuario); 21 | }, 22 | }, 23 | mutations: { 24 | usuarioLogado(state, payload) { 25 | state.usuario = payload; 26 | }, 27 | }, 28 | getters: { 29 | usuarioBemVindo(state) { 30 | return `Olá ${state.usuario.conta}!`; 31 | }, 32 | }, 33 | modules: { 34 | }, 35 | }); 36 | ``` 37 | 38 | Dessa forma, podemos utilizar o `usuarioBemVindo` no template: 39 | 40 | `./src/pages/Dashboard.vue` 41 | 42 | ```ts 43 |He4rt Developers
22 |He4rt Developers
53 |
82 | 
86 | 
103 | 
11 | Mensagem inicial: "{{ hello }}"
19 |Mensagem computada: "{{ helloInvertido }}"
20 |Computed reversed message: "{{ helloInvertido() }}"
54 | 55 | 56 | 57 | 71 | ``` 72 | 73 | Também podemos usar **methods** dentro de **computeds** normalmente: 74 | 75 | ```html 76 | 77 |
3 | Tutorial De Vue para iniciantes em frameworks JavaScript.
6 | 7 | ## Necessário 8 | 9 | - Conhecimento sobre HTML, CSS 10 | - Conhecimento sobre JavaScript (principalmente sobre DOM) 11 | - Instalar [NodeJS](https://nodejs.org/en/) 12 | - Instalar [Yarn](https://yarnpkg.com/) 13 | 14 | ## ROADMAP 15 | 16 | O curso aborda conceitos tanto do Vue 2.x quanto do Vue 3.x 17 | 18 | ### Iniciando com Vue 19 | 20 | 0. [Antes de começar](/tutorial/1-Iniciando%20com%20Vue/0-Antes%20de%20começar.md) 21 | 1. [O que é Vue](/tutorial/1-Iniciando%20com%20Vue/1-O%20que%20e%20Vue.md) 22 | 2. [VueCLI](/tutorial/1-Iniciando%20com%20Vue/2-VueCLI.md) 23 | 3. [Estrutura do Projeto](/tutorial/1-Iniciando%20com%20Vue/3-Estrutura%20do%20Projeto.md) 24 | 4. [Fluxo e Props](/tutorial/1-Iniciando%20com%20Vue/4-Fluxo%20e%20Props.md) 25 | 5. [Componentização](/tutorial/1-Iniciando%20com%20Vue/5-Componentização.md) 26 | 27 | ### Conceitos 28 | 29 | 1. [Data-Methods-Modificadores](/tutorial/2-Conceitos/1-Data,%20Methods%20e%20Modificadores.md) 30 | 2. [Diretivas](/tutorial/2-Conceitos/2-Diretivas.md) 31 | 3. [Computed e Watch](/tutorial/2-Conceitos/3-Computed%20e%20Watch.md) 32 | 4. [CSS](/tutorial/2-Conceitos/4-CSS.md) 33 | 5. [Instância Vue](/tutorial/2-Conceitos/5-Instância%20Vue.md) 34 | 6. [LifeCycleHooks](/tutorial/2-Conceitos/6-LifeCycleHooks.md) 35 | 7. [BusEvent](/tutorial/2-Conceitos/7-BusEvent.md) 36 | 8. [Transições](/tutorial/2-Conceitos/8-Transições.md) 37 | 9. [Keep Alive](/tutorial/2-Conceitos/9-Keep%20Alive.md) 38 | 10. [Mixins](/tutorial/2-Conceitos/10-Mixins.md) 39 | 11. [Pre-Processadores](/tutorial/2-Conceitos/11-Pre-Processadores.md) 40 | 12. [Considerações](/tutorial/2-Conceitos/12-Considerações.md) 41 | 42 | ### Vuetify 43 | 44 | 1. [Iniciando com Vuetify](/tutorial/3-Vuetify/1-Iniciando%20com%20Vuetify.md) 45 | 2. [Criando Componentes](/tutorial/3-Vuetify/2-Criando%20Componentes.md) 46 | 3. [Customização](/tutorial/3-Vuetify/3-Customização.md) 47 | 4. [Considerações](/tutorial/3-Vuetify/4-Considerações.md) 48 | 49 | ### VueRouter 50 | 51 | 1. [Iniciando com Vue Router](/tutorial/4-Vue%20Router/1-Iniciando%20com%20Vue%20Router.md) 52 | 2. [Navegação](/tutorial/4-Vue%20Router/2-Navegação.md) 53 | 3. [Rotas Filhas](/tutorial/4-Vue%20Router/3-Rotas%20Filhas.md) 54 | 4. [Guardas de Rota](/tutorial/4-Vue%20Router/4-Guardas%20de%20Rota.md) 55 | 5. [Transições no VueRouter](/tutorial/4-Vue%20Router/5-Transições%20no%20VueRouter.md) 56 | 57 | ### Vuex 58 | 59 | 1. [Gerenciamento de Estado](/tutorial/5-Vuex/1-Gerenciamento%20de%20Estado.md) 60 | 2. [Iniciando com Vuex](/tutorial/5-Vuex/2-Iniciando%20com%20Vuex.md) 61 | 3. [State](/tutorial/5-Vuex/3-State.md) 62 | 4. [Actions](/tutorial/5-Vuex/4-Actions.md) 63 | 5. [Mutations](/tutorial/5-Vuex/5-Mutations.md) 64 | 6. [Getters](/tutorial/5-Vuex/6-Getters.md) 65 | 7. [Estrutura](/tutorial/5-Vuex/7-Estrutura.md) 66 | 8. [Modules](/tutorial/5-Vuex/8-Modules.md) 67 | 68 | ### Bibliotecas Adicionais 69 | 70 | 1. [Vuelidate](/tutorial/6-Bibliotecas%20Adicionais/1-Vuelidate.md) 71 | 2. [Vuei18n](/tutorial/6-Bibliotecas%20Adicionais/2-Vuei18n.md) 72 | 3. [VueAWN](/tutorial/6-Bibliotecas%20Adicionais/3-VueAWN.md) 73 | 4. [VueDarkMode](/tutorial/6-Bibliotecas%20Adicionais/4-VueDarkMode.md) 74 | 5. [VueResource](/tutorial/6-Bibliotecas%20Adicionais/5-VueResource.md) 75 | 6. [VuePropertyDecorator](/tutorial/6-Bibliotecas%20Adicionais/6-VuePropertyDecorator.md) 76 | 7. [VueFontAwesome](/tutorial/6-Bibliotecas%20Adicionais/7-VueFontAwesome.md) 77 | 8. [VuexClassModules](/tutorial/6-Bibliotecas%20Adicionais/8-VuexClassModules.md) 78 | 9. [AntDesignVue](/tutorial/6-Bibliotecas%20Adicionais/9-AntDesignVue.md) 79 | 80 | ### Testes e Storybook 81 | 82 | 1. [Jest no Vue](/tutorial/7-Testes%20e%20Storybook/1-Jest%20no%20Vue.md) 83 | 2. [Cypress no Vue](/tutorial/7-Testes%20e%20Storybook/2-Cypress%20no%20Vue.md) 84 | 3. [Storybook](/tutorial/7-Testes%20e%20Storybook/3-Storybook.md) 85 | 4. [Vitest](/tutorial/7-Testes%20e%20Storybook/4-Vitest.md) 86 | 87 | ### Ecossistema Vue 88 | 89 | 1. [Nuxt](/tutorial/8%20-%20Ecossistema%20Vue/1%20-%20Nuxt.md) 90 | 2. [Gridsome](/tutorial/8%20-%20Ecossistema%20Vue/2%20-%20Gridsome.md) 91 | 3. [VueNative](/tutorial/8%20-%20Ecossistema%20Vue/3%20-%20VueNative.md) 92 | 4. [VueElectron](/tutorial/8%20-%20Ecossistema%20Vue/4%20-%20VueElectron.md) 93 | 5. [Quasar](/tutorial/8%20-%20Ecossistema%20Vue/5%20-%20Quasar.md) 94 | 6. [Vuepress](/tutorial/8%20-%20Ecossistema%20Vue/6%20-%20Vuepress.md) 95 | 7. [Obrigado](/tutorial/8%20-%20Ecossistema%20Vue/7%20-%20Obrigado.md) 96 | 97 | ### Vue 3 98 | 99 | 1. [API de Composição](/tutorial/9%20-%20Next/1%20-%20API.md) 100 | 2. [Ecossistema](/tutorial/9%20-%20Next/2%20-%20Ecossistema.md) 101 | 3. [Hooks](/tutorial/9%20-%20Next/3%20-%20Hooks.md) 102 | 4. [Suspense](/tutorial/9%20-%20Next/4%20-%20Suspense.md) 103 | 5. [JSX](/tutorial/9%20-%20Next/5%20-%20JSX.md) 104 | 6. [TypeScript](/tutorial/9%20-%20Next/6%20-%20Typescript.md) 105 | 7. [Vite](/tutorial/9%20-%20Next/7%20-%20Vite.md) 106 | 8. [Pinia](/tutorial/9%20-%20Next/8%20-%20Pinia.md) 107 | 9. [Vuetelemetry](/tutorial/9%20-%20Next/9%20-%20Vuetelemetry.md) 108 | 10. [IonicVue](/tutorial/9%20-%20Next/10%20-%20IonicVue.md) 109 | 11. [Obrigado](/tutorial/9%20-%20Next/11%20-%20Obrigado.md) 110 | 111 | ## Repositório 112 | 113 | [Github](https://github.com/Novout/vue4noobs) 114 | 115 | ## Autores 116 | 117 | * **Giovane Cardoso (Novout)** - *Freelance Frontend Developer & Member of He4rt Developers* - [Twitter](https://twitter.com/NovoutT) 118 | * **Lucas Souza (deverebor)** - *Frontend Software Engineer at Juntos Somos Mais & Member of He4rt Developers* - [Twitter](https://twitter.com/deverebor) 119 | 120 |Made with 💜
121 | -------------------------------------------------------------------------------- /docs/tutorial/3-Vuetify/1-Iniciando com Vuetify.md: -------------------------------------------------------------------------------- 1 | # O que e Vuetify 2 | 3 | [Vuetify](https://vuetifyjs.com/pt-BR/) é uma Biblioteca Vue UI com Material Components para a sua aplicação, tirando a necessidade de conhecimentos sobre UI. 4 | 5 | ## Instalação 6 | 7 | Lembra do começo do nosso curso que usamos o **Vue-CLI** para criar nosso projeto? Iremos utilizar novamente ele! 8 | 9 | Estando em um diretório para criar o projeto, execute o comando `vue ui` para iniciar a UI. Na outra vez fizemos por comando, agora quero te mostrar como fazer isso diretamente da UI. 10 | 11 | * Para adicionar uma biblioteca em um projeto existente, podemos usar o add: `vue add vuetify` 12 | 13 | Irá aparecer esta tela: 14 | 15 |
17 | 
25 | 
37 | 
43 | 
49 | 
57 | 
63 | 
67 | 
75 | 
21 | Oiiiiiiiiiiiiiiiiiiiii
35 |Oiiiiiiiiiiiiiiiiiiiii
77 |Digite a senha!
211 | 212 | ``` 213 | 214 | Recomendamos FORTEMENTE que olhe a documentação do [Vuelidate](https://vuelidate.js.org/#sub-form-submission). 215 | 216 | Na próxima seção iremos apresentar a forma de fazer **internacionalização** no **Vue**! 217 | 218 | [Próxima Seção](./2-Vuei18n.md) 219 | -------------------------------------------------------------------------------- /docs/tutorial/2-Conceitos/2-Diretivas.md: -------------------------------------------------------------------------------- 1 | # Diretivas 2 | 3 | Todas as **diretivas** do vue possuem o **v-**, como por exemplo os já ensinados **v-bind** e **v-on**, e nesta seção iremos introduzar novas diretivas para ajudar o seu desenvolvimento. 4 | 5 | ## V-IF 6 | 7 | Ele possui um funcionamento bem simples: analiza a condição imposta ou variavel e em caso de **true** exibe no template, e em caso de **false** ele não exibe. 8 | 9 | Exemplo: 10 | 11 | ```html 12 | 13 |1
15 |2
16 |3
17 |1
37 |2
38 |3
39 |1
61 |2
62 |3
63 |1
87 |2
88 |3
89 |Carlos
109 |João
110 |José
111 |Nome do Usuário: {{ item.nome }}
138 |
161 | Nome do Usuário: {{ item.nome }}
174 |Par
186 |Ímpar
187 |{{ input }}
203 |{{ concluido ? 'SIM' : 'NÃO' }}
69 | ``` 70 | 71 | * No caso **concluido** pertence ao **data()**. 72 | * Atribuições e controle de fluxo **NÃO** funcionam. 73 | 74 | --- 75 | 76 | Podemos também preencher o que temos no **data** com dados **assíncronos** usando [LifeCycleHooks](https://br.vuejs.org/v2/guide/instance.html#Diagrama-do-Ciclo-de-Vida), mas iremos abordar esse tema mais para a frente pois precisamos ver alguns outros conceitos do **Vue** primeiramente. 77 | 78 | ## Methods 79 | 80 | Métodos que vão juntar na instância do Vue. Você pode acessar esses métodos diretamente na instância do vue ou usá-los em expressões de diretiva. Todos os métodos terão esse contexto automaticamente vinculado à instância do Vue. O funcionamento de um **método** é basicamente ao de uma **função**, diferenciando de uma **computed** que será explicado na próxima seção. 81 | 82 | Agora, vamos fazer um **contador** mutando a nossa variavel declarada na instância, usando **methods**: 83 | 84 | ```ts 85 | 86 |Você clicou no botão {{ contador }} vezes
89 |O valor de contador é: {{ contador }}
116 |
234 | Hello
46 |He4rt
47 |Hello
56 |He4rt
57 | 58 | ``` 59 | 60 | O **HelloWorld** é um componente que está sendo importado por outro componente **App.vue**, para isso, precisamos registrar o componente: 61 | 62 | ```html 63 | 72 | ``` 73 | 74 | ## Convensões de Importanção 75 | 76 | * Curiosidade: O **Vue** reconhece tanto **PascalCase** quanto **kebab-case** e vice-versa, exemplo: 77 | 78 | ```html 79 | 80 |
115 | For a guide and recipes on how to configure / customize this project,
116 | check out the
117 | vue-cli documentation.
118 |
Hello He4rt
32 |
53 | 
185 | Vue4Noobs
204 | Pela: He4rt Developers 205 |
251 | Olá de /login
32 | 33 | 34 | 37 | ``` 38 | 39 | Agora vamos acessar o `localhost:
43 |