javascript - varios - Vue.js componentes de un solo archivo SIN un proceso de construcción

que son los componentes en vue

Question

Me encanta vue.js debido a su simplicidad, lo que significa que puedo piratear un rápido SPA de una página con una sintaxis de enlace de datos moderna e intuitiva y sin una cadena de herramientas compleja.

También me encanta la idea de componentes de un solo archivo, lo que significa que hay un solo lugar (archivo *.vue ) donde cada componente almacena DOM, el estilo y la funcionalidad de *.vue .

Sin embargo, quiero usar componentes de un solo archivo sin perder tiempo en administrar un proceso de compilación cada vez que armo una aplicación. En resumen, quiero los beneficios de la administración de componentes sin la sobrecarga de una cadena de herramientas de compilación, lo que significa dejar que el navegador haga el trabajo pesado para arrancar cada archivo *.vue través de XMLHttpRequest y la representación DOM. Asegurándonos de que reemplazamos module.exports e import llamadas con la funcionalidad correspondiente de Vue.component() .

Me encantaría saber si alguien ha encontrado una solución (solo) del lado del cliente para usar archivos *.vue en el navegador. Seguramente esto ya se ha hecho?

Answer 1

Estoy absolutamente seguro de que esto todavía no existe, porque si bien puede parecer relativamente fácil, ciertas funcionalidades hacen que sea bastante difícil de implementar. Por ejemplo:

1. No necesariamente importa solo otros componentes .vue, puede importar dependencias externas aleatorias. Lo que significa que el navegador ahora necesita descargar y analizar módulos npm, manejar sus dependencias, etc.
2. Se pueden escribir diferentes secciones de su componente .vue (plantilla, lógica y estilo) en otros idiomas además de HTML, JS y CSS. Lo que significa que el navegador ahora también necesita descargar un compilador / transpilador para Jade, CoffeeScript, LESS o cualquier otra cosa que esté utilizando y ejecutar su código a través de él. No hay garantía de que un transpiler escrito en JavaScript realmente exista, porque un módulo de nodo utilizado en un proceso de compilación regular podría ser solo un contenedor para alguna biblioteca externa que no se puede ejecutar en un navegador.
3. El estilo en un componente .vue puede tener un scoped , lo que significa que ahora necesita analizar la plantilla de un componente para insertar ID generadas aleatoriamente como atributos del elemento Y analizar el estilo del mismo componente para insertar esas mismas ID en sus selectores de CSS para que Su estilo termina siendo objeto de alcance.

Y esos son solo los más obvios de mi cabeza. Claro, podrías limitarte seriamente y no usar ninguna de esas funciones, pero entonces ya no es un componente .vue, ¿verdad?

Si realmente desea evitar un proceso de compilación a toda costa y está dispuesto a aceptar las limitaciones de no usar ninguna de las funciones anteriores, ¿por qué no usar un solo archivo JS?

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component(''my-component'', {
  template: myTemplate
  // component logic goes here
})

Debe cargarlos en el orden correcto, pero ahí lo tiene, el componente de archivo único de un hombre pobre.