Configurar el entorno vue en el paquete web

uso básico

Sabemos que vue es un marco progresivo, que podemos usar localmente en el proyecto sin violar otros códigos.
La función más importante de vue es usar dom virtual para liberar a los desarrolladores de la complicada operación de dom, de modo que los desarrolladores puedan concentrarse más en la lógica del procesamiento de datos.

Instalar:npm i vue

Luego podemos introducir vue en la entrada js de webpack y usarlo.

import {
    
    createApp} from "vue"

const app = createApp({
    
    
  template: "<h2>Hello World</h2>"
})

app.mount("#app")

Después de compilar y ejecutar el código anterior, se descubre que la página web no tiene ningún efecto. ¿Por qué? Esto está relacionado con el archivo vue js importado.

El mensaje de advertencia indica que el entorno operativo actual no es compatible con la opción del módulo de plantilla y se recomienda que importemos vue/dist/vue.esm-bundler.jsel paquete manualmente.

Vue diferentes versiones de compilación

import imports vue, ¿qué estamos introduciendo exactamente?
Abra la carpeta node_module y mire index.js. Se encuentra que se importarán diferentes versiones de compilación de archivos vue js de acuerdo con el entorno de compilación actual.

Abra el directorio dist para ver todas las versiones de compilación proporcionadas por vue:

Resolución de versión de compilación

vue(.runtime).global(.prod).js：

• a través del navegador

vue(.runtime).esm-browser(.prod).js：

• Se usa para importar y usar a través de módulos ES nativos (en el navegador a través de

vue(.runtime).esm-bundler.js：

• Para herramientas de creación como webpack, resumen y paquetería ;
• El valor predeterminado en la herramienta de compilación es vue.runtime.esm-bundler.js;
• Si necesitamos analizar la plantilla de la plantilla, debemos especificar manualmente vue.esm-bundler.js;

vue.cjs(.prod).js：

• usos de representación del lado del servidor;
• Úselo en Node.js a través de require();

Tiempo de ejecución + compilador frente a solo tiempo de ejecución

Hay tantas versiones de compilación de vue, que se dividen principalmente en dos categorías: tiempo de ejecución + versión del compilador y versión de solo tiempo de ejecución.

• Runtime + Compiler: contiene el código compilado para la plantilla template, que es más completa, pero también más grande;
• Solo tiempo de ejecución: no contiene el código compilado para la versión de la plantilla, que es relativamente más pequeña;

El paquete web anterior importa solo la versión del entorno operativo de forma predeterminada, sin un compilador, por lo que el paquete es correcto, pero no se puede mostrar en el navegador y el navegador emite una advertencia.
Entonces, debemos especificar manualmente la versión de compilación con el compilador:

import {
    
    createApp} from 'vue/dist/vue.esm-bundler.js'

Vuelva a compilar y verá que hello world se ha renderizado en el navegador.

webpack crea archivos SFC

Durante el desarrollo de Vue, tenemos tres formas de escribir elementos DOM:

• Método 1: la forma de la función de renderizado, use la función h para escribir el contenido renderizado;
• Método 2: el método de plantilla de plantilla;
• Método 3: escriba la plantilla a través de la plantilla en el archivo .vue;

Estos tres métodos tienen diferentes requisitos para el paquete de compilación de Vue importado.
En la primera forma, la función h puede devolver directamente un nodo virtual, es decir, un nodo Vnode, por lo que solo se necesita el tiempo de ejecución de vue. Pero los dos últimos usan el módulo de plantilla, por lo que también se usa el módulo compilador en vue.

El caso anterior es el segundo método de desarrollo, pero en el desarrollo real usamos **SFC (componentes de archivo único)** en la mayoría de los casos. En vue está el archivo .vue.
Usando el método sfc para introducir vue, no hay necesidad de importar manualmente la versión del paquete web, puede directamenteform "vue"

También hay complementos en vscode que brindan soporte para archivos sfc:

• Complemento 1: Vetur, VSCode que ha estado en uso desde el desarrollo de Vue2 admite complementos de Vue;
• Complemento 2: Volar, el complemento recomendado oficialmente (el complemento VSCode oficial se desarrollará en base a Volar en el futuro);

vue-loader

Nos referimos al archivo .vue en el archivo de entrada empaquetado, y el paquete web no debe poder analizarlo, por lo que se requiere el cargador correspondiente: vue-loader
instalación:npm i vue-loader -D

Nota: después de configurar vue-loader, también debe agregar su complemento VueLoaderPlugin

const {
    
     VueLoaderPlugin } = require("vue-loader")

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.vue$/,
        use: ["vue-loader"]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Configuración de identificación global vue2 y dev-tools

Encontraremos que hay otra advertencia en la consola:

esta advertencia requiere que configuremos dos variables globalmente:__VUE_OPTIONS_API__``__VUE_PROD_DEVTOOLS__

En la documentación en GitHub, podemos encontrar instrucciones:

una es usar la API de opciones de Vue y la otra es si admitir herramientas devtools en modo Producción, aunque todas tienen valores predeterminados, se recomienda encarecidamente que las configuremos manualmente;

api de opciones Esta es la medida de compatibilidad de vue3 con vue2.Si la API de opciones no se usa en el proyecto, es decir, no se usa vue2, entonces el paquete web realizará un movimiento de árbol al empaquetar, y se eliminará el código de núcleo vue2 innecesario. .

Podemos configurar manualmente las variables globales en el complemento predeterminado de webpack, definePlugin, para indicarle a webpack si debe eliminar el código de la biblioteca principal de vue2 y si es compatible con devtools en el entorno de compilación.

plugins: [
  new DefinePlugin({
    
    
    BASE_URL: "'./'",
    __VUE_OPTIONS_API__: true,      
    __VUE_PROD_DEVTOOLS__: false
  })
]