Propiedad compilerOptions de Vue3

Vue3 选项式 APIAPI de opciones de Vue3

En Vue 3,compilerOptionses un objeto que se utiliza para configurar el compilador de plantillas de Vue.

El compilador de plantillas se encarga de convertir la sintaxis de plantillas de Vue (comov-bind、v-ifetc.) en código JavaScript. A través decompilerOptions, los desarrolladores pueden controlar el comportamiento del compilador, por ejemplo, cómo manejar los espacios en blanco, si conservar los comentarios, si habilitar optimizaciones específicas, etc.

Configuraciones comunes de compilerOptions

1. whitespace

Uso: controla cómo se manejan los espacios en blanco en las plantillas.

Valores opcionales：

  • 'preserve': conservar todos los espacios en blanco.
  • 'condense': comprimir los espacios en blanco sobrantes.
  • 'collapse': eliminar todos los espacios en blanco innecesarios.

Ejemplo

const app = createApp(App, {
  compilerOptions: {
    whitespace: 'condense'
  }
});

2. comments

    Uso: controla si se conservan los comentarios en las plantillas.

    Valores opcionales：

    • true: conservar los comentarios.
    • false: eliminar los comentarios.

    Ejemplo

    const app = createApp(App, {
      compilerOptions: {
        comments: false
      }
    });

    3. delimiters

    Uso: personalizar los símbolos de interpolación en las plantillas. De forma predeterminada, Vue usa{{ }}como símbolos de interpolación.

    Ejemplo

    const app = createApp(App, {
      compilerOptions: {
        delimiters: ['${', '}']
      }
    });

    Resultado: en las plantillas, puedes usar${ expression }en lugar de{{ expression }}。

    4. isCustomElement

    Uso: especifica qué etiquetas deben tratarse como elementos personalizados, en lugar de componentes de Vue.

    Ejemplo

    const app = createApp(App, {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('my-')
      }
    });

    Resultado: todas las etiquetas que comiencen conmy-se considerarán elementos personalizados.

    ¿Cómo usar compilerOptions?

    compilerOptionsNormalmente, al crear una aplicación Vue, la configuración se realiza a través delcreateAppsegundo parámetro del método. A continuación se muestra un ejemplo completo:

    Ejemplo

    import { createApp } from 'vue';
    import App from './App.vue';

    const app = createApp(App, {
      compilerOptions: {
        whitespace: 'condense',
        comments: false,
        delimiters: ['${', '}'],
        isCustomElement: tag => tag.startsWith('my-')
      }
    });

    app.mount('#app');

    Vue3 选项式 APIAPI de opciones de Vue3

    Otras extensiones