Vue 3

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.