Vue 3: Diferenzas entre revisións

De Wiki do Ciclo ASIR do IES de Rodeira
Saltar á navegación Saltar á procura
Liña 51: Liña 51:
A versión ''Completa'' fai referencia a distribucións que levan o motor de execución e o "compilador" de ''Vue'', mentres que a versón ''Runtime'' unicamente conten o JavaScript que forma parte do FrameWork.
A versión ''Completa'' fai referencia a distribucións que levan o motor de execución e o "compilador" de ''Vue'', mentres que a versón ''Runtime'' unicamente conten o JavaScript que forma parte do FrameWork.
Existen 3 versións distintas de distribución de ''Vue'':
Existen 3 versións distintas de distribución de ''Vue'':
* '''UMD''': Están deseñadas para ser utilizadas directamente no navegador mediante a etiqueta <script>
;* '''UMD''': Están deseñadas para ser utilizadas directamente no navegador mediante a etiqueta <script>
*'''CommonJS''': Este formato está deseñado para empaquetadores de JavaScript tradicionais como webpack 1 ou broweserify.
;*'''CommonJS''': Este formato está deseñado para empaquetadores de JavaScript tradicionais como webpack 1 ou broweserify.
*'''ES Module''': Utiliza módulos ECMAScript para empaquetadores de JavaScript máis modernos como webpack 2 ou rollup.
;*'''ES Module''': Utiliza módulos ECMAScript para empaquetadores de JavaScript máis modernos como webpack 2 ou rollup.


Aquí tes unha táboa que mostra os diferentes ficheiros de Vue.js en varios formatos. A columna "UMD" contén os ficheiros do formato Universal Module Definition, mentres que as columnas "CommonJS" e "ES Module" amosan os ficheiros nos seus respectivos formatos. Para a versión de producción, só están dispoñibles algúns dos ficheiros.
Aquí tes unha táboa que mostra os diferentes ficheiros de Vue.js en varios formatos. A columna "UMD" contén os ficheiros do formato Universal Module Definition, mentres que as columnas "CommonJS" e "ES Module" amosan os ficheiros nos seus respectivos formatos. Para a versión de producción, só están dispoñibles algúns dos ficheiros.

Revisión como estaba o 15 de outubro de 2024 ás 09:49

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A diferenza doutros frameworks monolíticos, Vue está deseñado dende cero para ser utilizado de maneira incremental. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.

Vue dispón dun "compilador" que se encarga de transformar as plantillas de Vue en código JavaScript optimizado que utilizará o navegador para renderizar o contido. Se encarga de convertir as directrices e etiquetas Vue (como v-if, v-for) en funcións JavaScript que manipulan o DOM.

As distribucións de desenvolvemento de Vue inclúen o compilador o que permite escribir as plantillas no HTML ou en ficheiros .vue sepearados sen compilalos previamente. Unha vez rematada a aplicación se "compilan" (build) xerando a aplicación de produción.

As distribucións de produción non precisan o compilador, unicamente o "runtime", xa que a aplicación xa estará "compilada" a JavaScript.

Un exemplo de plantilla Vue sería o seguinte:

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
template
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>
</script>

Instalación

Existen varias compilacións de Vue:

UMD CommonJS ES Module
Completa vue.js vue.common.js vue.esm.js
Runtime vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Completa (producción) vue.min.js - -
Runtime (producción) vue.runtime.min.js - -

A versión Completa fai referencia a distribucións que levan o motor de execución e o "compilador" de Vue, mentres que a versón Runtime unicamente conten o JavaScript que forma parte do FrameWork. Existen 3 versións distintas de distribución de Vue:

UMD
  • Están deseñadas para ser utilizadas directamente no navegador mediante a etiqueta <script>
  • CommonJS: Este formato está deseñado para empaquetadores de JavaScript tradicionais como webpack 1 ou broweserify.
  • ES Module: Utiliza módulos ECMAScript para empaquetadores de JavaScript máis modernos como webpack 2 ou rollup.

Aquí tes unha táboa que mostra os diferentes ficheiros de Vue.js en varios formatos. A columna "UMD" contén os ficheiros do formato Universal Module Definition, mentres que as columnas "CommonJS" e "ES Module" amosan os ficheiros nos seus respectivos formatos. Para a versión de producción, só están dispoñibles algúns dos ficheiros.

Existen varios modos de instalación:

  • Inclusión Direta con <script>: Simplemente se debe descargar e incluír a etiqueta script coa ruta correcta, ou utilizar un CDN. Vue será rexistrado como unha variable global. Por exemplo: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>. Vue tamén está dispoñible nos CDN unpkg e cdnjs. A versión de produción completa é vue.min.js.