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 -ySeguiremos 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 startArquivos
& 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
- Importar um arquivo de estilo externo.
- Criar um componente "post".
- Criar a página "lista de posts".
- Criar a página "detalhe de post".
- Implementar o vue-router.
- Criar serviço de API para resgatar posts.
- Implementar máquina de estado vuex.
- Implementar "carregando".
Perguntas?
Obrigado!
caio@yahoo.com
Vue.js: Up & Running
By Caio Tarifa
