Comment configurer le style de la valeur par défaut d'exportation dans Vue

Configuration des styles de composants avec export default dans Vue

Cette question aborde comment structurer la section Style dans l'objet export default d'un composant Vue. L'option style dans l'objet export default vous permet d'intégrer directement CSS dans votre composant. Ce CSS est coté au composant par défaut, ce qui signifie qu'il n'affectera pas les autres parties de votre application. Voici un exemple:

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
  style: `
    p {
      color: blue;
    }
  `
};

Dans cet exemple, la balise p dans le MyComponent aura toujours du texte bleu, quels que soient les autres styles appliqués ailleurs dans votre application. Vous pouvez inclure plusieurs blocs de style, mais un seul peut manquer de l'attribut scoped.

Styles CSS de portée dans un composant Vue en utilisant export default

pour étendre les styles CSS dans un composant VUE à l'aide de export default, vous utilisez l'attribut scoped dans votre balise style. Cet attribut ajoute automatiquement un attribut unique à l'élément racine du composant, garantissant que les styles ne s'appliquent qu'à cette instance de composante spécifique. Cela empêche les conflits de style et favorise une meilleure organisation CSS.

export default {
  // ... other component options ...
  style: `
    p {
      color: blue; /* This style is scoped */
    }
  `
};

Cela équivaut à:

<style scoped>
  p {
    color: blue;
  }
</style>

dans la balise <style scoped>, le navigateur ajoutera automatiquement un attribut unique (généralement un attribut de données comme data-v-xxxx) à l'élément racine du composant et à ses enfants. Le sélecteur CSS ne ciblera alors que les éléments avec cet attribut spécifique. Il s'agit de l'approche recommandée pour que les composants de style maintiennent l'encapsulation et empêchent les conflits.

Différentes façons de styliser un composant Vue avec export default

Il existe plusieurs façons de styliser un composant Vue lors de l'utilisation de export default:

1. Styles en ligne dans l'option style (lunette): Comme indiqué ci-dessus, il s'agit de la méthode la plus simple. Il maintient le style directement dans la définition du composant. L'utilisation de l'attribut scoped garantit que les styles sont limités au composant.
2. FEET DE STYLES EXTERNE (noncoped): Vous pouvez importer un fichier CSS externe et appliquer des styles à l'échelle mondiale. Ceci est utile pour les styles qui devraient s'appliquer sur plusieurs composants ou l'application entière. Cette approche nécessite l'importation de la feuille de style dans votre composant, en utilisant généralement une balise <link> dans votre fichier d'application principal, ou une instruction d'importation dans la section de script de votre composant si vous utilisez un bundler de module comme WebPack. Cette méthode n'utilise pas utilisation de l'option style dans export default.
3. modules CSS: Les modules CSS vous permettent de créer des classes CSS réutilisables avec des noms uniques, empêchant les collisions de nommage. Vous importeriez le module CSS dans votre composant, et les styles seraient automatiquement déterminés via les noms de classe générés. Cette méthode n'utilise pas directement l'option dans style. export default
4. Pré-processeurs (Sass, moins, etc.): Comme discuté dans la section suivante, vous pouvez les utiliser en pré-processeurs pour écrire vos styles en SASS, moins ou dans d'autres langues, puis les compiler en CSS réguliers. Le CSS compilé peut ensuite être utilisé dans l'option ou importé sous forme de feuille de style externe. style

en utilisant des pré-processeurs (sass, moins) avec

export default

oui, vous pouvez utiliser des pré-processeurs comme Sass ou moins avec

dans la section de style de votre composant VUE. Cependant, vous aurez besoin d'un processus de build (comme WebPack ou Vite) configuré pour prétraiter votre SASS ou moins de fichiers dans CSS avant l'exécution de votre application. export default

Par exemple, si vous utilisez SASS, vous rédigeriez généralement vos styles dans un fichier

(par exemple, .scss), et votre processus de construction le compilerait dans CSS. Ensuite, vous importeriez le fichier CSS compilé dans l'option MyComponent.scss de votre composant Vue ou utilisez une approche de module CSS. style

Exemple à l'aide de SASS (nécessite un webpack / vite approprié Configuration):

myComponent.scss:

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
  style: `
    p {
      color: blue;
    }
  `
};

myComponent.vue:

export default {
  // ... other component options ...
  style: `
    p {
      color: blue; /* This style is scoped */
    }
  `
};

L'attribut

dans le balise lang="scss" indique le processus de construction pour utiliser le processeur SASS. L'instruction <style> importe le CSS compilé à partir de @import. N'oubliez pas que cette configuration nécessite la configuration de votre processus de construction pour gérer correctement les fichiers SASS ou moins. Sans configuration appropriée, le code pré-processeur ne sera pas compilé et entraînera des erreurs. MyComponent.scss

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!