Configurar un nuevo proyecto con VueJS y Parcel

#Vue #JavaScript #Parcel

Voy a hacer una pequeña guia para mostrar lo rápido y simple que puede ser empezar un proyecto nuevo en VueJS usando Parcel como module bundler, en lugar de otras soluciones (como webpack).

Parcel es un web bundler pensado en ofrecer una buena experiencia, ser super rápido y poder funcionar con 0 configuración. Todo eso junto parece imposible, pero como voy a mostrar a continuación es muy simple de poner en marcha.

Preparativos

Instalamos Parcel (de forma global), usando npm.

npm install -g parcel-bundler

Creamos una carpeta para nuestro proyecto, y dentro de esa carpeta inicializamos un proyecto de npm creando un package.json, para eso hacemos

mkdir proyecto
cd proyecto
npm init -y

Inicio del proyecto

Y ahora estamos listos para crear el contenido del proyecto.

Vamos a empezar con un ejemplo muy simple, directamente en VueJS. Para esto, en un archivo index.html agregamos:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ejemplo Parcel Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

Y en otro archivo, en index.js, agregamos:

import Vue from 'vue';
import App from './app.vue';

new Vue(App).$mount('#app')

Por último, creamos un componente Vue en modo Single File Component, para eso creamos app.vue:

<template>
  <div class="container">
    <p class="greetings">Hello {{ name }}</p>
    <p>How are you?</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        name: "World"
      };
    },
  };
</script>

<style lang="scss">
  $primary: #678;
  .container {
    p.greetings {
      color: $primary;
    }
  }
</style>

Ejecutamos lo que tenemos hasta el momento… para eso hacemos:

parcel index.html

Y Parcel nos va a informar que ya hay un servidor corriendo, ejecutando nuestro código. Podemos entrar directamente a esa dirección y ver el resultado.

Conclusión

Lo que pasó por detrás es muchisimo, y Parcel se encargó de todo, sin que tengamos que configurar nada. Parcel se descarga automaticamente todo lo necesario para poder procesar Vue, SASS, y cualquier otra tecnología que vayamos necesitando.

Maravilloso.

En la documentación oficial de Parcel (desde donde yo basé este ejemplo) se pueden ver muchisimas más de las capacidades de esta genial herramienta.

Agregar Comentario

Tu dirección de email no será publicada. Los comentarios son revisados de forma manual antes de ser publicados.

Gracias por enviar tu comentario

Si todo funciona bien pronto estará visible en el sitio.

Error

Hubo un error con el envío del comentario. Deberías volver a intentarlo.