Instalación

Nota de compatibilidad

Vue no es compatible con IE8 y versiones anteriores, ya que utiliza las características de ECMAScript 5 que son incompatibles en IE8. Sin embargo, admite todos los navegadores compatibles con ECMAScript 5.

Notas de lanzamiento

Última versión estable: 2.5.16

Las notas de lanzamiento detalladas para cada versión están disponibles en GitHub.

Vue Devtools

Cuando use Vue, le recomendamos que también instale Vue Devtools en su navegador, lo que le permite inspeccionar y depurar sus aplicaciones de Vue de una manera más amigable.

Inclusión Directa con <script>

Simplemente descargue e incluya la etiqueta script con la ruta correcta. Vue será registrado como una variable global.

No utilice la versión minificada (de producción) durante el desarrollo. Usted perderá todas las advertencias interesantes para los errores más comunes!

CDN

Es recomendable vincular a un número específico de versión que pueda actualizar manualmente:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Puede examinar el código fuente del paquete NPM en cdn.jsdelivr.net/npm/vue.

Vue también está disponible en unpkg y cdnjs (cdnjs tarda un poco en sincronizarse, por lo que es posible que la última versión aún no esté disponible).

Asegúrese de leer acerca de las diferentes compilaciones de Vue y use la versión de producción en su sitio publicado, reemplazando vue.js con vue.min.js. Esta es una versión más pequeña optimizada para la velocidad en lugar de la experiencia de desarrollo.

NPM

NPM es el método de instalación recomendado para construir aplicaciones a gran escala con Vue. Este combina perfectamente con empaquetadores de módulos, tales como Webpack o Browserify. Vue también ofrece herramientas para la creación de componentes de un solo archivo (en inglés Single-File Components).

# latest stable
$ npm install vue

CLI

Vue proporciona un CLI oficial para rapidamente construir ambiciosas Single Page Applications. Proporciona configuraciones de build prontas para un proceso de trabajo de front-end moderno. Sólo tarda unos minutos para estar listo y ejecutándose con hot-reload, lint al guardar cambios y empaquetado listo para la distribución en producción. Consulte los documentos de Vue CLI para obtener más detalles.

Este tema presupone conocimiento previo en Node.js y herramientas de build asociadas. Si usted es nuevo en Vue o en este tipo de herramienta, le recomendamos encarecidamente que pase por toda la guía antes de intentar utilizar el CLI.

Explicación de las Diferentes Compilaciones

En el directorio dist/ del paquete NPM usted encontrará muchas compilaciones o distribuciones diferentes de Vue.js. Una descripción de la diferencia entre ellas:

Términos

• Completa: compilaciones que contienen tanto el compilador como el motor de tiempo de ejecución (en inglés, runtime).

• Compilador: código que es responsable de compilar template strings en las funciones de render de JavaScript.

• Runtime: código que es responsable de crear instancias de Vue, renderizado y actualización del DOM virtual, etc. Básicamente todo menos el compilador.

• UMD: las compilaciones UMD se pueden utilizar directamente en el navegador a través de un tag <script>. El archivo predeterminado de jsDelivr CDN en https://cdn.jsdelivr.net/npm/vue es la distribución Compilador + Runtime en formato UMD (vue.js).

• CommonJS: formato destinado a empaquetadores antiguos como browserify or webpack 1. El archivo predeterminado para estos empaquetadores (pkg.main) es la distribución Runtime en formato CommonJS (vue.runtime.common.js).

• ES Module: formato de módulos ECMAScript destinado a empaquetadores modernos como webpack 2 o rollup. El archivo predeterminado para estos empaquetadores (pkg.module) es la distribución Runtime en formato ES Module (vue.runtime.esm.js).

Runtime + Compilador vs. Runtime

Si necesita compilar templates en tiempo real en el cliente (por ejemplo: pasando un String en la opción template, o usando elementos preexistentes en el DOM a través del HTML como template), necesitará el compilador y por lo tanto la distribución completa:

// esto requiere el compilador
new Vue({
  template: '<div>{{ hi }}</div>'
})

// esto no
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

Cuando se usa vue-loader o vueify, los templates dentro de los archivos *.vue se compilan previamente en JavaScript en el momento de la compilación. Realmente no necesita el compilador en el paquete final y, por lo tanto, puede usar la distribución Runtime.

Dado que las distribuciones solo con el código de Runtime son aproximadamente un 30% más ligeras que las distribuciones completas, debe usarlas siempre que pueda. Si aún desea utilizar la distribución completa, debe configurar un alias en su empaquetador:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' para webpack 1
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

Agregue a su proyecto package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Agregue a su proyecto package.json:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

Desarrollo vs. Producción

Los modos de desarrollo/producción están codificados para las compilaciones de UMD: los archivos no minimizados son para desarrollo y los archivos minificados para producción.

Las distribuciones de módulos de CommonJS y ES están destinadas a empaquetadores, por lo tanto, no proporcionamos versiones mínimas para ellos. Usted será responsable de minimizar el paquete final usted mismo.

Estas distribuciones también preservan chequeos a la variable process.env.NODE_ENV para determinar el modo en que deben ejecutarse. Debe configurar apropiadamente su empaquetador para cambiar estas variables de entorno correctamente para controlar el modo en que Vue se ejecutará. Cambiar process.env.NODE_ENV usando Strings literales también permite que minificadores como UglifyJS eliminen completamente los bloques de código de desarrollo, reduciendo el tamaño del archivo final.

Webpack

En Webpack 4+, puede usar la opción mode:

module.exports = {
  mode: 'production'
}

Pero en Webpack 3 y anteriores, es necesario usar DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Utilice el rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Aplique una transformación envify global en su paquete.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Vea también Consejos de Publicación para Producción.

Ambientes CSP

Algunos entornos, como Google Chrome Apps, aplican la Política de seguridad de contenido (CSP), que prohíbe el uso de new Function() para evaluar expresiones. La distribución completa depende de esta característica para compilar templates, por lo que no se puede utilizar en estos entornos.

Por otro lado, la distribución Runtime es totalmente compatible con CSP. Cuando se utiliza la distribución Runtime con Webpack + vue-loader o Browserify + vueify, sus templates serán precompilados en funciones render que funcionan perfectamente en entornos CSP.

Compilación de Desarrollo

Importante: los archivos compilados en la carpeta /dist de GitHub solo se crean durante los lanzamientos de nuevas versiones. Para usar Vue desde el último código fuente de GitHub, ¡tendrás que crearlo tú mismo!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Solo las compilaciones UMD están disponibles en Bower.

# última versión estable
$ bower install vue

Cargadores de Módulos AMD

Todas las compilaciones UMD se pueden utilizar directamente como un módulo AMD.