Alguien save de VUE.js? Sobre incorporar un proyecto externo a Vue.

Archivado
Me ha tocado un marrón en el trabajo y como en 2012 hice algo de Javascript y no hay nadie mas que sepa pues me está tocando construir un proyecto con Vue.js y cuasi no tengo ni idea.

Por lo general guay, vi un tutorial decente en el que me explicaba el tema de componentes, vistas, ciclo de vida y tal y para cosas fáciles esta funcionando bien.

Lo que no se si se puede hacer sin que se me vaya todo a la m...:

Tengo un proyecto externo, básicamente una carpeta con un html que contiene una página web en html y muchísimo jQuery, un par de llamadas a scripts externos de CSS y otro par a librerías de Javascript(Principalmente para tratar con fechas). se conecta con fetch a una BBDD en Mysql para traer y guardar datos.

Por otro lado tengo el proyecto de Vue:
Se conecta a la misma BBDD para almacenar y tratar datos y tal, por el momento funciona todo bien, el proyecto tiene una docena de vistas y un puñado de componentes, varias conexiones a apis y tal.

La pregunta:
¿Hay alguna manera de importar este proyecto externo en vue? He intentado cuasicopiar pegar todo el código jQuery en el mounted() de Vue en una vista, y funciona, pero vue no es capaz de acceder a funciones jQuery desde html generado desde el propio jQuery,y el html generado por jQuery no es capaz de acceder a metodos vue(ni a los propios de jQuery), y no encuentro que cohones hacer.

¿No me queda otra que pasar todo a mano desde 0?
¿Me pego un tiro?


TL;DR: Tengo una carpeta con un html con jQuery que funciona,¿ hay manera de importar esto a lo bestia a una vista de Vue?

Gracias al que se haya leído el rollo. Voy tirando el PC por la ventana para ahorrar tiempo.
Hola, en mi caso no tengo niguna experiencia con Vue pero revisé por curiosidad y creo hay una ingente cantidad de páginas y tutoriales cercanas a lo que necesitas, disculpa tanta lectura, suerte.


https://www.it-swarm-es.com/es/jquery/c ... 825655878/
https://programmerclick.com/article/4859555050/
https://blog.webtraining.zone/truco-vue ... nde-viejo/
https://gerardofloresgr.medium.com/c%C3 ... 3b84a084d0
https://www.it-swarm-es.com/es/javascri ... 836154064/

https://blog.nickschnee.ch/vuejquery/
https://vuejsdevelopers.com/2017/05/20/ ... ry-plugin/
https://dev.to/ayekpleclemence/how-to-a ... to-vue-4n4
https://forum.vuejs.org/t/how-to-use-jq ... nt/45000/4
https://www.youtube.com/watch?v=CMjRLsTtdxs

https://forum.vuejs.org/t/como-importar ... -js/105877
https://dev.to/blankazucenalg/como-util ... nentes-4ko
Unreal McCoy escribió:Hola, en mi caso no tengo niguna experiencia con Vue pero revisé por curiosidad y creo hay una ingente cantidad de páginas y tutoriales cercanas a lo que necesitas, disculpa tanta lectura, suerte.


https://www.it-swarm-es.com/es/jquery/c ... 825655878/
https://programmerclick.com/article/4859555050/
https://blog.webtraining.zone/truco-vue ... nde-viejo/
https://gerardofloresgr.medium.com/c%C3 ... 3b84a084d0
https://www.it-swarm-es.com/es/javascri ... 836154064/

https://blog.nickschnee.ch/vuejquery/
https://vuejsdevelopers.com/2017/05/20/ ... ry-plugin/
https://dev.to/ayekpleclemence/how-to-a ... to-vue-4n4
https://forum.vuejs.org/t/how-to-use-jq ... nt/45000/4
https://www.youtube.com/watch?v=CMjRLsTtdxs

https://forum.vuejs.org/t/como-importar ... -js/105877
https://dev.to/blankazucenalg/como-util ... nentes-4ko


Gracias por el intento, he leído todos los enlaces que has puesto pero no es lo que estoy buscando.

Mi problema no es en usar jQuery como tal, eso me funciona, sino que tengo una página externa(.html con mucho jquery que hace uso de varios archivos en la ruta del proyecto)

Estoy intentando ver si hay una manera de cargar el proyecto a vue y que se ejecute tal y como lo hace por si solo, no necesito interaccionar con componentes, no necesto hacer nada más dinámico, ni agilizar la ejecución ni usar ninguna de las tecnologías que utiliza Vue. Solo necesito ejecutar lo que ya tengo pero desde Vue.

No se, todas y cada una de las páginas enseguida rotan a lo útiles que son los componentes, la encapsulación de código y lo facil que es de mantener si haces todo en Vue, o lo rapidiísimo que se ejecuta.

Coñe, solo quiero ejecutar lo que ya tengo pero desde vue, y me veo teniendo que hacerlo de 0, con el añadido que no tengo casi ni idea de Vue,

!Muchas gracias de todas formas!.

No entiendo como un framework para agilizar el desarrollo no tiene una forma de cargar proyectos externos. Esta mierda me va a acabar costando el puesto.
Hola Compañero, gracias, mi problema es que salvo por un programa antiguo para hacer juegos y Visual Studio, no he tocado nada de programación, tengo amigos que saben bastante de HTML, Excel y VBA, pero yo no tengo la menor idea en este campo. Quisiera seguir bicheando por si cuatro ojos ven más que dos :) al menos mientras te responde un forero conocedor.

Desde otra comunidad leí que 'Ajax' y 'Vue Loader' pueden facilitar este trasvase o 'carga' de un proyecto HTML a Vue.js

https://developer.mozilla.org/en-US/doc ... ng_Started

https://github.com/FranckFreiburger/http-vue-loader


Dejo otra remesilla de enlaces, siento que estén en Inglés, mucha suerte.


https://www.youtube.com/watch?v=J037aiMGGAw

https://stackoverflow.com/questions/462 ... to-vue-div

https://forum.vuejs.org/t/html-import-b ... js/47688/4

https://stackoverflow.com/questions/470 ... e-in-vuejs

https://www.it-swarm-es.com/es/vue.js/c ... 835391171/

https://stackoverflow.com/questions/611 ... local-file

https://stackoverflow.com/questions/461 ... ith-vue-js

https://stackoverflow.com/questions/524 ... -component

https://bootstrap-vue.org/docs
Buenas,

Parece que se puede hacer, echale un vistazo a esto:

https://stackoverflow.com/questions/47078315/how-to-load-external-html-file-in-a-template-in-vuejs

https://github.com/nsssim/Vue-CDN-load-component

Posiblemente esto te sirva, a pesar de todo, merece la pena juntar ambos proyectos? uno es codigo jquery y el otro tiene una filosofia de componentes moderna, no es mejor mantenerlos separados y montar redirecciones, subdominios o cosas asi?

Un saludo, espero que sirva
Buenas

No se si he comprendido bien el problema....pero voy a intentar hacer una sugerencia:
En lugar de intentar injectar el proyecto que usa JQuery en el proyecto Vue , te sugiero el siguiente experimento:

- Crea un objeto de javascript, con un único metodo que haga una llamada a uno de los métodos del "proyecto JQuery"
Llamemos a este objeto "JQInterface" por ejemplo
- En la instanciación del proyecto Vue, uno de los elementos a determinar es "data": aquí especifica "JQInterface" como uno de los datos que retornará "data"
- Intenta usar el método que encapsulaste, dentro de tu poyecto Vue.
Es decir , invoca JQInterface.metodo() desde dentro del proyecto Vue


Si esto te funciona, solo tendrás que declarar la lista de metodos que necesitas invocar entre proyectos dentro de este objeto JQInterface

Es un experimento rápido de hacer. Cógete un metodo que conozcas bien, y en seguida veras debugando si el resultado es el esperado

Saludos
Gracias por las respuestas, efectivamente, lo ideal sería pasarlo todo a vue, pero no me han dado tiempo para ello(2-2.5k líneas de código sin comentar en el que se utiliza de todo desde expresiones regulares a transformaciones raras de fechas)

Al final he hecho una autentica barbaridad informatica con un 70% de código duplicado para poder terminar esto a tiempo, en el que en el mounted(equivalente al document.ready) se lanza el proyecto original, y una vez ha terminado de cargar, se lanzan todas las demás funciones cuando tocan contra métodos duplicados en vue(Los cuales la mayoría ya habían tenido al menos una ejecucion al cargar la página)

La duplicidad es porque:
Algunas funciones de jQuery no podía lanzarlas desde vue.
Las funciones declaradas con jQuery no eran capaces de lanzar metods vue.
Pero había algunas funciones de jQuery que si se lanzaban cuando tocaban sin problemas.
Pero en la siguiente linea, la misma llamada ya no encontraba la función y tenía que redeclararla como método para poder lanzarla.

Un puto lío, si en alguna década de estas tuviera tiempo me gustaría ir quitando todo lo duplicado, pero no me van a dar tiempo y ya estoy con otras pares del proyecto.
Esto en algún momento lo voy a usar de ejemplo de lo que hay que evitar puf.


¡Muchas gracias de nuevo por las respuestas!
Realmente si el proyecto funciona con HTML + jQuery, ¿qué es lo que justifica migrarlo a vue.js?
Muchas veces se dice de utilizar tal framework o tal tecnología cuando realmente no es necesario.
Sé de muchos que son reacios a utilizar frameworks y teniendo buenos conocimientos de HTML+CSS+JS son capaces de sacar los proyectos adelante.
Newton escribió:Realmente si el proyecto funciona con HTML + jQuery, ¿qué es lo que justifica migrarlo a vue.js?
Muchas veces se dice de utilizar tal framework o tal tecnología cuando realmente no es necesario.
Sé de muchos que son reacios a utilizar frameworks y teniendo buenos conocimientos de HTML+CSS+JS son capaces de sacar los proyectos adelante.

Yo yo yoo

El mayor problema es que ahora hay algunos detalles que se generan a través de otros componentes en vue en lugar de la conexión directa que había antes, ahora esta un peliiiin más integrado.
8 respuestas
Archivado
Volver a Software libre