=================
- Instalar Node and npm
- Instalar vue cli dependency
- Instalar visual studio code
- Instalar extensiones en Chrome y en editor.
vue create vue-personal-site
cd vue-personal-site
npm run serve
- Crear ficheros que son páginas dentro del directorio:
/pages
- Crear ficheros que son plantillas dentro del directorio:
/layouts
- Crear ficheros que son componentes dentro del directorio:
/components
Pages:
- Home
Layouts:
- Main
Componentes:
- Menú
- Header
- Footer
IMPORTANTE:
- Debe de haber una etiqueta
<template></template>
para el HTML. - Debe de haber una etiqueta
<script></script>
para el Javascript. - Debe de haber una etiqueta
<style></style>
para el CSS.
<template>
<main>
<h2>Main</h2>
</main>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style scoped>
main {
margin: 20px;
padding: 20px;
}
</style>
-
Dentro de la etiqueta
<template></template>
lo más importante es que haya un tag contenedor que englobe todo. -
Dentro de la etiqueta
<script></script>
lo más importante es que haya unexport default {}
y que tenga al menos 'name' como atributo. -
Incluiremos la etiqueta
<style></style>
cuando necesitemos incluir estilos al componente en el que estamos. E incluiremos el atributo scoped cuando queremos que estos estilos se adhieran al componente. Si quisiéramos que fueran generales esos estilos no ponemos el atributo scoped.
Hasta ahora nuestro proyecto habrá crecido un poco y tendrá esta estructura.
src/
assets/
components/
TheFooter.vue
TheHeader.vue
TheMenu.vue
layouts/
Main.vue
pages/
Home.vue
App.vue
TheFooter.vue
<template>
<footer>
<h2>Footer</h2>
</footer>
</template>
<script>
export default {
name: 'Footer',
}
</script>
<style scoped>
footer {
background-color: #000000;
color: #ffffff;
margin: 0;
padding: 40px;
}
</style>
TheHeader.vue
<template>
<header>
<h1>Hello, I am Cristina</h1>
<p>Frontend Developer</p>
</header>
</template>
<script>
export default {
name: 'Header'
}
</script>
<style scoped>
header {
border: 10px solid #ffffff;
padding: 20px;
margin: 20px;
text-align: left;
}
</style>
TheMenu.vue
<template>
<nav>
<div>M</div>
<div>X</div>
</nav>
</template>
<script>
export default {
name: 'TheMenu'
}
</script>
<style scoped>
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px;
}
</style>
Main.vue
```
<template>
<main>
<h2>Main</h2>
</main>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style scoped>
main {
margin: 20px;
padding: 20px;
}
</style>
```
Home.vue
```
<template>
<div>
<the-menu />
<the-header />
<Main />
<the-footer />
</div>
</template>
<script>
import TheMenu from '@/components/TheMenu.vue'
import TheHeader from '@/components/TheHeader.vue'
import TheFooter from '@/components/TheFooter.vue'
import Main from '@/layouts/Main.vue'
export default {
name: 'Home',
components: {
TheMenu,
TheHeader,
TheFooter,
Main
}
}
</script>
```
App.vue
<template>
<div id="app">
<Home />
</div>
</template>
<script>
import Home from './pages/Home.vue'
export default {
name: 'app',
components: {
Home
}
}
</script>
<style>
body {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: #fd5e60;
color: #ffffff;
margin: 0;
}
</style>
npm install
npm run serve
npm run build
npm run test
npm run lint