Vue.js

Up & Running

Viu.djeiéss

Vue.js

Caio Tarifa

Sócio-diretor na Formaweb

caio@yahoo.com

#0CJS

Ou seja, nada de arquivo de configuração.

📦

Parcel

Rápido, leve e sem configuração.

Instalando

$ yarn global add parcel-bundler
$ mkdir example
$ cd example
$ yarn init -y
$ npm install -g parcel-bundler
$ mkdir example
$ cd example
$ npm init -y

Seguiremos com o Yarn, ok? ;)

Configurando

$ yarn add vue
$ yarn add --dev parcel-bundler
{
  "name": "Example",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "parcel public/index.html"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

package.json

$ yarn install
$ yarn start

Arquivos
& Pastas

  • public/

    • index.html

  • src/

    • assets/

      • icon.svg

    • components/

      • button.vue

    • pages/

      • product-list.vue

      • product-detail.vue

    • styles/

      • style.css

    • App.vue

    • main.js

  • package.json

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hello Vue!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="../src/index.js"></script>
  </body>
</html>

main.js

import Vue from 'vue'

import App from './App'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue

<template>
  <div>
    Hello,{{ what }}!
  </div>
</template>

<script>
export default {
  data () {
    return {
      what: 'world'
    }
  }
}
</script>

<style>
div {
  color: red;
}
</style>

Up & Running

Colocando a mão na massa!

Ementa

  1. Importar um arquivo de estilo externo.
  2. Criar um componente "post".
  3. Criar a página "lista de posts".
  4. Criar a página "detalhe de post".
  5. Implementar o vue-router.
  6. Criar serviço de API para resgatar posts.
  7. Implementar máquina de estado vuex.
  8. Implementar "carregando".

Perguntas?

Obrigado!

caio@yahoo.com

Made with Slides.com