Propriété compilerOptions de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue 3,compilerOptionsest un objet utilisé pour configurer le compilateur de templates de Vue.

Le compilateur de templates est responsable de la conversion de la syntaxe de template de Vue (telle quev-bind、v-ifetc.) en code JavaScript. Grâce à cela,compilerOptionsles développeurs peuvent contrôler le comportement du compilateur, notamment la gestion des espaces blancs, la conservation des commentaires, l'activation d'optimisations spécifiques, etc.

Configurations courantes de compilerOptions

1. whitespace

Objectif: contrôle la gestion des espaces blancs dans les templates.

Valeurs possibles：

  • 'preserve': Préserver tous les espaces blancs.
  • 'condense': Compresser les espaces blancs superflus.
  • 'collapse': Supprimer tous les espaces blancs inutiles.

Exemple

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

2. commentaires

    Objectif: Contrôle si les commentaires dans les templates sont préservés.

    Valeurs possibles：

    • true: Préserver les commentaires.
    • false: Supprimer les commentaires.

    Exemple

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

    3. délimiteurs

    Objectif: Personnalise les délimiteurs d'interpolation dans les templates. Par défaut, Vue utilise{{ }}comme délimiteurs d'interpolation.

    Exemple

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

    Résultat: Dans les templates, vous pouvez utiliser${ expression }au lieu de{{ expression }}。

    4. isCustomElement

    Objectif: Spécifie quelles balises doivent être traitées comme des éléments personnalisés, plutôt que comme des composants Vue.

    Exemple

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

    Résultat: Toutes les balisesmy-qui commencent par le préfixe seront traitées comme des éléments personnalisés.

    Comment utiliser compilerOptions ?

    compilerOptionsHabituellement, lors de la création d'une application Vue, viacreateApple deuxième paramètre de la méthode pour la configuration. Voici un exemple complet :

    Exemple

    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 选项式 APIVue3 API des options

    Autres extensions