App.vue
<template>
<div class="corpo">
<div class="teste" >
<h1 class="centralizado">{{titulo}}</h1>
</div>
<ul class="lista-fotos">
<li class="lista-fotos-item" v-for= "foto of fotos">
<meu-painel :titulo="foto.titulo">
<img class="imagem-responsiva ":src="foto.url" :alt="foto.titulo">
</meu-painel>
</li>
</ul>
</div>
</template>
<script>
import Painel from 'src/assets/components/shared/painel/Painel.vue'
export default {
components: {
'meu-painel': Painel
},
data () {
return {
titulo: 'Alurapic',
fotos: []
}
},
created() {
this.$http
.get('http://localhost:3000/v1/fotos')
.then(res => res.json())
.then(fotos => this.fotos = fotos, err => console.log(err));
}
}
</script>
<style>
.centralizado{
text-align: center;
}
.corpo{
font-family: Helvetica, sans-serif;
margin:0 auto;
width: 96%;
}
.lista-fotos{
list-style:none;
}
.lista-fotos .lista-fotos-item{
display: inline-block;
}
</style>
Painel.vue
<template>
<div class="painel">
<h2 class="painel-titulo">{{ titulo }}</h2>
<div class="painel-corpo">
</div><!-- fim painel-corpo -->
</div><!-- fim painel -->
</template>
<script>
export default {
props:['titulo']
}
</script>
<style>
.painel {
padding: 0 auto;
border: solid 2px grey;
display: inline-block;
margin: 5px;
box-shadow: 5px 5px 10px grey;
width: 200px;
height: 100%;
vertical-align: top;
text-align: center;
}
.painel .painel-titulo {
text-align: center;
border: solid 2px;
background: lightblue;
margin: 0 0 15px 0;
padding: 10px;
text-transform: uppercase;
}
.imagem-responsiva{
width: 100%;
}
/*.teste{
background-color: red;
color:white;
width: auto;
}*/
</style>
Erro:
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.
js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve 'src/assets/components/shared/painel/Pain
el.vue' in 'C:\Users\Rafael\Desktop\alurapic\src'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?typ
e=script&index=0!./src/App.vue 24:0-68
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./src/main.js