Tecnologias

beta.tagplus.com.br

Conteúdo

• Montagem do Ambiente + VS Code
• Referências NodeJS + Yarn
• Vue + Nuxt
• Projeto TagPlus Beta

Ambiente

VS Code Plugins

• Align
• Auto close tag
• Auto Import
• Auto Rename Tag
• DotEnv
• EsLint
• Javascript ES6 code Snippets

• Vetur
• Vscode-element-heper
• Vue
• Vue2 snippets
• Vue Peek
• Vue VsCode snippets
• Vue.js Extension Pack

Ambiente Node

Instalação Yarn:

https://yarnpkg.com/en/docs/install#debian-stable

NodeJS e Yarn

• yarn create nuxt-app <project-name>
   
• Package.json
  • Informações
  • Dependências
  • Scripts
    • yarn install
    • yarn run

VueJs e Nuxt

• O que é o VUE ?
  Biblioteca / Library
   
• O que é o NUXT ?
  Framework

Estrutura VueJs

• Arquivo ".vue"
  • Template
  • Script
  • Style

Estrutura VueJs

• data()
  • Uso no template
• methods
• computed
• components
  • props
  • $emit

Funções

Estrutura VueJs

• v-model
• v-bind ou ":"
• v-for
• v-if
• v-show

Atributos Especiais

Ciclo de vida VueJs

Estrutura Nuxt

• Configurações
  • nuxt.config.js
     
• Pages
• Components
• Plugins
• Middleware
• Assets
• Store
   

Tráfego de Dados
no Nuxt JS

• Pai => Filho
  • Diretivas (atributos)
• Filho => Pai
  • ​Eventos ($emit)

VueX / Store

• Store
  • state
  • mutations
  • actions
• Commit()
• Dispatch()

TagPlus Beta

• tagplus/tagplus-adonis
   
• tagplus/tagplus-nuxt
   
• Element UI
  https://element.eleme.cn/#/en-US/component/quickstart


• Axios
  https://jsonplaceholder.typicode.com/

TagPlus Beta

• Estrutura de Pastas
   
• Componentes
   
• Filtros
   
• Plugins
   
• Middleware

Fontes

• https://vuejs.org/v2/guide/
• https://nuxtjs.org/guide
• https://vuex.vuejs.org/guide/