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 Beta

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

Fontes

Made with Slides.com