33 - Herramientas: webpack
Vue propone implementar las componentes en un único archivo con extensión *.vue y cuyo contenido sea el template con el HTML de la componente, su lógica en Javascript con el framework Vue y la hoja de estilo.
Los archivos *.vue no pueden ser interpretados por un navegador por lo que necesitamos un programa que los procese de tal forma que queden legibles para navegadores. Esta actividad la resolvemos utilizando webpack.
Creación de un proyecto.
Vamos a crear ahora un segundo proyecto y emplearemos Vue CLI como en el concepto anterior. Utilizaremos una plantilla distinta a la del proyecto001.
Procedemos a escribir desde la línea de comandos de Node:
vue init webpack-simple proyecto002
Estamos indicando que se cree un proyecto llamado proyecto002 utilizando la plantilla 'webpack-simple':
Luego de esto ya tenemos el esqueleto básico de nuestra aplicación con la posibilidad de utilizar una serie de herramientas de desarrollo.
Para que se carguen todas estas herramientas debemos descender a la carpeta 'proyecto002' desde la línea de comando de Node y ejecutar 'npm install'.
Desde la línea de comandos escribimos
cd proyecto002 npm install npm run dev
Cuando se ejecuta 'npm install' se instalan todas las herramientas necesarias para la implementación de nuestro proyecto.
La carpeta más importante es 'src' que contiene los archivos:
main.js App.vue
Luego dentro de esta carpeta hay otra carpeta llamada 'assets' donde se guardan entre otras cosas los archivos de imágenes.
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Es donde se encuentra la instancia Vue principal de nuestra aplicación y hace referencia al elemento HTML '#app'.
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Es importante tener en cuenta que los archivos *.vue contienen todo el HTML:
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
Todo el código Javascript:
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Y toda la hoja de estilo para dicha componente:
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Debido a esta forma de organizar nuestro proyecto necesitamos webpack para procesar dichos archivos y dejarlos legibles para un navegador web.
En la capeta raiz del proyecto (proyecto002) tenemos los archivos:
index.html package.json .babelrc .editorconfig package-lock.json README.md webpack.config.js
El archvo index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>proyecto002</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
Ejecución del proyecto
Podemos ejecutar la aplicación desde la línea de comandos escribiendo:
npm run dev
Se lanza un servidor web y se carga la aplicación en el navegador:
Modificación del archivo App.vue
Procedamos a cambiar el contenido con el siguiente código elemental:
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ mensaje }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
mensaje: 'Hola Mundo Vue'
}
}
}
</script>
<style>
#app {
font-family: Courier;
text-align: center;
color:red;
}
</style>
Cada vez que hacemos cambios en la componente 'app' y grabamos los cambios podemos observar que el navegador se actualiza automáticamente sin tener que recargar la página (esto se logra por todas las herramientas que hemos instalado con Vue CLI:
Acotaciones
La definición del atributo data de la componente:
data () {
return {
mensaje: 'Hola Mundo Vue'
}
Es lo mismo que escribir:
data: function() {
return {
mensaje: 'Hola Mundo Vue'
}