Compilar ficheros vue (single file components) sin usar webpack o browserify

Llevo un tiempo estudiando Vue.js y me gusta bastante. Lo que más me gusta es poder tener los componentes separados en ficheros .vue con su HTML, CSS y JS.

El problema es que estos ficheros .vue no se pueden usar directamente, hay que convertirlos, y para eso se requiere webpack o browserify o algún programa similar. Aprender a usar estos programas no es trivial, y lleva su tiempo.

Hay un paquete de Node, VUE cli, que permite crear un esqueleto de aplicación para Vue que ya tiene configurado webpack para “compilar” los ficheros .vue, pero no me convence porque aunque quizá para una aplicación que empieces desde cero puede valer no tengo muy claro cómo incorporarlo a un proyecto ya existente (quiero usar Vue para hive.ly).

Total, que al final he hecho un pequeño script al que le pasas tres parámetros:

• La carpeta donde están los ficheros .vue
• La ruta de un fichero js
• La ruta de un fichero css

y genera un fichero js y otro css con el código y los estilos de los ficheros .vue. Basta con cargar estos dos ficheros en nuestra página y ya podremos usar los componentes.

El script está disponible en GitHub y requiere que tengamos instalado PHP en nuestro ordenador.

El único requisito que deben cumplir los ficheros .vue es que el parámetro template de la llamada a Vue.component debe ser una cadena vacía con backticks: “

Ejemplo de fichero .vue:

<template>
	<div>
		<button v-on:click="count++">
			You clicked me {{ count }} times.
		</button>
		<image-counter></image-counter>
	</div>
</template>

<script>
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    };
  },
  template: ``
});
</script>

<style>
button {
	background: red;
}
</style>