Traduction de components-registration.md
#145
Conversation
Quelques mises à jour sur ce fichier
| @@ -8,17 +8,17 @@ order: 101 | |||
|
|
|||
| ## Component Names | |||
|
|
|||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>When registering a component, it will always be given a name. For example, in the global registration we've seen so far:</p> | |||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit:</p> | |||
There was a problem hiding this comment.
espace après les deux points
| @@ -8,17 +8,17 @@ order: 101 | |||
|
|
|||
| ## Component Names | |||
|
|
||
| The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements. | ||
| Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à un modèle de chaîne ou un [composant-monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://www.w3.org/TR/custom-elements/#concepts) pour les noms de balises personnalisés (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs. |
There was a problem hiding this comment.
composant monofichier (sans très d'union)
MachinisteWeb
changed the title
components-registration.md
|
Merci pour la confiance @haeresis |
|
Moitier des lignes ! Merci. Courage ;) |
|
@haeresis pas de quoi.
|
|
@haeresis bien que la traduction de la page est entièrement faite, li me faut une journée pour personnellement relire avant de réclamer des reviews. |
|
@haeresis tu peux ajouter les tags nécessaires |
MachinisteWeb
requested review from
forresst,
sylvainpolletvillard,
Kocal,
rspt and
MachinisteWeb
|
Merci à @sir-kain pour son travail de traduction ! C'est parti pour la relecture ! |
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>When registering a component, it will always be given a name. For example, in the global registration we've seen so far:</p> | ||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit: </p> |
There was a problem hiding this comment.
Supprimer <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p> ainsi que le </p> de la fin.
Conserver la traduction, bien évidemment.
There was a problem hiding this comment.
Suit :, espace entre la fin du mot et les :
|
|
||
| The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements. | ||
| Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à un modèle de chaîne ou un [composant monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://www.w3.org/TR/custom-elements/#concepts) pour les noms de balises personnalisés (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs. |
There was a problem hiding this comment.
on a décidé de garder le mot template pour parler des templates. Ce qui donne
par opposition à un template de chaine de caractères (corrige moi @rspt mais l'écriture post 1990 retire le chapeau à chaine ?)
|
|
||
| ### Name Casing | ||
| ### Les cas de nom |
There was a problem hiding this comment.
Je traduirais par
La casse des noms
Qu'en pensez-vous ?
|
|
||
| You have two options when defining component names: | ||
| Vous avez deux options pour définir vos noms de composant: |
|
|
||
| ```js | ||
| Vue.component('MyComponentName', { /* ... */ }) | ||
| ``` | ||
|
|
||
| When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `<my-component-name>` and `<MyComponentName>` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates). | ||
| Lors de la définition d'un composant avec PascalCase, vous pouvez utiliser l'un ou l'autre cas lors du référencement de l'élément. Cela signifie que `<my-component-name>` et `<MyComponentName>` sont acceptable. A noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). |
|
|
||
| Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components. | ||
| La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champs ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-component-names-strongly-recommended) et ils ont tendance à être utilisés très fréquemment à travers vos composants. |
There was a problem hiding this comment.
Changer ../style-guide/#Base-component-names-strongly-recommended par ../style-guide/#Base-de-nom-de-composant-fortement-recommande
|
|
||
| The result is that many components may include long lists of base components: | ||
| Le résultat est que de nombreux composants peuvent inclure de longues listes de composants de base: |
| @@ -172,7 +172,7 @@ export default { | |||
| } | |||
| ``` | |||
|
|
|||
| Just to support relatively little markup in a template: | |||
| Juste pour supporter relativement peu de balisage dans un template: | |||
There was a problem hiding this comment.
peu de balise (on traduit markup ou tag par le même mot balise dans la doc FR)
espace avant le :
| @@ -184,43 +184,43 @@ Just to support relatively little markup in a template: | |||
| </BaseButton> | |||
| ``` | |||
|
|
|||
| Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): | |||
| Heureusement, si vous utilisez Webpack (ou [Vue CLI 3+](https://github.com/vuejs/vue-cli), qui utilise Webpack en interne), vous pouvez utiliser `require.context` pour enregistrer globalement précisément ces composants de base très courants. Voici un exemple de code que vous pouvez utiliser pour importer globalement des composants de base dans le fichier d'entrée de votre application. (ex. `src/main.js`): | |||
| false, | ||
| // The regular expression used to match base component filenames | ||
| // L'expression régulière utilisée pour matcher les noms de fichiers de composant de base |
There was a problem hiding this comment.
matcher peut être traduit par faire concorder, au choix
There was a problem hiding this comment.
Oui, je viens de voir "matcher" sur le dico et c'est différent de ce que je pensais.
Je valide pour faire concorder ou faire correspondre
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>When registering a component, it will always be given a name. For example, in the global registration we've seen so far:</p> | ||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit: </p> |
There was a problem hiding this comment.
- "Lors de la création de composants,"
- "la déclaration"
There was a problem hiding this comment.
J'ai voulu remplacer tous les textes du genre component registation par création de composant à moins que la sémantique de la phrase ne m'oblige à le redefinir.
En plus, j'ai en même temps utilisé le mot déclaration plus tard dans la phrase.
There was a problem hiding this comment.
Sur l'utilisation du mot création ou déclaration j'ai pas vraiment d'avis; mon commentaire soulignait deux fautes d'orthographe :)
|
|
||
| The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements. | ||
| Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à un modèle de chaîne ou un [composant monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://www.w3.org/TR/custom-elements/#concepts) pour les noms de balises personnalisés (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs. |
|
|
||
| So far, we've only created components using `Vue.component`: | ||
| Jusque là, nous avons crée des composants seulement avec la manière suivante: `Vue.component`: |
|
|
||
| Note that **locally registered components are _not_ also available in subcomponents**. For example, if you wanted `ComponentA` to be available in `ComponentB`, you'd have to use: | ||
| Notez que **les composants crées localement ne sont _pas_ disponibles dans les sous-composants**. Par exemple, si vous voulez que `ComponentA` soit disponible dans `ComponentB`, vous devez utiliser: |
|
|
||
| ### Automatic Global Registration of Base Components | ||
| ### Enregistrement globale automatique des composents de base |
There was a problem hiding this comment.
- "Enregistrement global automatique des composants de base"
|
|
||
| Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components. | ||
| La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champs ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-component-names-strongly-recommended) et ils ont tendance à être utilisés très fréquemment à travers vos composants. |
|
Merci à tous pour vos remarques. |
|
|
||
| You can see other recommendations for component names in the [Style Guide](../style-guide/#Base-component-names-strongly-recommended). | ||
| Vous pouvez voir d'autres recommandations pour les noms de composants dans le guide des [Conventions](../style-guide/#Base-component-names-strongly-recommended). |
There was a problem hiding this comment.
Je pense que guide des conventions devrait être le texte du lien, pas seulement conventions.
|
|
||
| You have two options when defining component names: | ||
| Vous avez deux options pour définir vos noms de composant: |
|
|
||
| #### With kebab-case | ||
| #### Avec kebab-case |
There was a problem hiding this comment.
En kebab-case
non ? pour moi ça sonne mieux ^^
|
|
||
| #### With PascalCase | ||
| #### Avec PascalCase |
|
|
||
| ```js | ||
| Vue.component('MyComponentName', { /* ... */ }) | ||
| ``` | ||
|
|
||
| When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `<my-component-name>` and `<MyComponentName>` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates). | ||
| Lors de la définition d'un composant avec PascalCase, vous pouvez utiliser l'un ou l'autre cas lors du référencement de l'élément. Cela signifie que `<my-component-name>` et `<MyComponentName>` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). |
There was a problem hiding this comment.
Y a pas à dire, je trouve vraiment bizarre de lire avec ... x)
There was a problem hiding this comment.
C'est vrai que En PascalCase sonne mieux.
On attend les autres...
There was a problem hiding this comment.
Si je dois choisir, je préfère « En ».
| @@ -184,43 +184,43 @@ Just to support relatively little markup in a template: | |||
| </BaseButton> | |||
| ``` | |||
|
|
|||
| Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): | |||
| Heureusement, si vous utilisez webpack (ou [Vue CLI 3+](https://github.com/vuejs/vue-cli), qui utilise webpack en interne), vous pouvez utiliser `require.context` pour enregistrer globalement précisément ces composants de base très courants. Voici un exemple de code que vous pouvez utiliser pour importer globalement des composants de base dans le fichier d'entrée de votre application. (ex. `src/main.js`): | |||
|
|
||
| Then you'll need to import each component you'd like to use, before you locally register it. For example, in a hypothetical `ComponentB.js` or `ComponentB.vue` file: | ||
| Ensuite, vous devrez importer chaque composant que vous souhaitez utiliser avant de l'enregistrer localement. Par exemple, dans un fichier hypothétique `ComponentB.js` ou `ComponentB.vue`: |
|
|
||
| Note that **locally registered components are _not_ also available in subcomponents**. For example, if you wanted `ComponentA` to be available in `ComponentB`, you'd have to use: | ||
| Notez que **les composants créés localement ne sont _pas_ disponibles dans les sous-composants**. Par exemple, si vous voulez que `ComponentA` soit disponible dans `ComponentB`, vous devez utiliser: |
|
|
||
| In these cases, you can define your components as plain JavaScript objects: | ||
| Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples: |
| const componentName = upperFirst( | ||
| camelCase( | ||
| // Strip the leading `'./` and extension from the filename | ||
| // Enlever la chaine `'. /` et l'extension du nom de fichier |
There was a problem hiding this comment.
Tu as un espace qui s'est rajouté au milieu de '. /
There was a problem hiding this comment.
D'ailleurs, est-ce que le ' n'est pas une erreur ?
Je pense que ça ne devrait pas être présent non ?
There was a problem hiding this comment.
Je suis du même avis, c'est peut-être une erreur.
Dans ce cas on rectifie ici?
There was a problem hiding this comment.
Il faut faire une PR de correction sur le dépôt original, et ensuite corriger ici oui 🙂
| @@ -207,7 +207,7 @@ requireComponent.keys().forEach(fileName => { | |||
| // Récupérer le nom du composent en PascalCase | |||
| const componentName = upperFirst( | |||
There was a problem hiding this comment.
Doit-on traduire les noms des variables?
There was a problem hiding this comment.
Il me semble qu'on ne le faisait pas, mais on traduisait les chaînes de caractères et les commentaires du code il me semble ^^
|
|
||
| <p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>When registering a component, it will always be given a name. For example, in the global registration we've seen so far:</p> | ||
| Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit : |
There was a problem hiding this comment.
Orthographe:
- "de composants"
- "déclaration"
|
|
||
| The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements. | ||
| Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à une chaîne ou un [composant monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://www.w3.org/TR/custom-elements/#concepts) pour les noms de balises personnalisés (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs. |
There was a problem hiding this comment.
Orthographe:
- "chaine", sans circonflexe sur le i
There was a problem hiding this comment.
Tu parles de quelle "chaine" sans circonflexe sur le i ?
There was a problem hiding this comment.
Tu parles de quelle "chaine" sans circonflexe sur le i ?
Tous et aucun ;)
Le mot "chaine" s'écrit sans circonflexe d'après la réforme orthographique que nous suivons pour la traduction francaise de Vue et son écosystème :)
There was a problem hiding this comment.
@rspt On est tous d'accord.
Seulement la ligne que tu as commenté n'a pas de mot "chaine" sans circonflexe sur le i.
C'est pourquoi j'ai demandé
There was a problem hiding this comment.
Ahahah non on s'est justement mal compris :)
Le mot "chaine" s'écrit sans circonflexe d'après la réforme orthographique que nous suivons pour la traduction francaise de Vue et son écosystème :)
Du coup, il ne doit pas y avoir de circonflexe à "chaine" et les mots composés le contenant.
There was a problem hiding this comment.
Merci de l'éclaircissement pour le coup.
|
|
||
| ### Automatic Global Registration of Base Components | ||
| ### Enregistrement global automatique des composents de base |
|
Bien joué @sir-kain ! Merci à tous ! J'attends que tu modifie « Avec » en « En » et on pourra update le site avec une nouvelle section en FR ! |
|
|
||
| The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements. | ||
| Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à une chaine ou un [composant monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://www.w3.org/TR/custom-elements/#concepts) pour les noms de balises personnalisés (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs. |
There was a problem hiding this comment.
personnalisés => personnalisées
Je pense que c'est les balises qui sont personnalisées
|
|
||
| ```js | ||
| Vue.component('MyComponentName', { /* ... */ }) | ||
| ``` | ||
|
|
||
| When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `<my-component-name>` and `<MyComponentName>` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates). | ||
| Lors de la définition d'un composant avec PascalCase, vous pouvez utiliser l'un ou l'autre cas lors du référencement de l'élément. Cela signifie que `<my-component-name>` et `<MyComponentName>` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). |
|
|
||
| So far, we've only created components using `Vue.component`: | ||
| Jusque là, nous avons créé des composants seulement avec la manière suivante : `Vue.component` : |
There was a problem hiding this comment.
la manière suivante : Vue.component : => la manière suivante Vue.component :
il y a un ":" en trop
|
|
||
| ```js | ||
| Vue.component('my-component-name', { | ||
| // ... options ... | ||
| }) | ||
| ``` | ||
|
|
||
| These components are **globally registered**. That means they can be used in the template of any root Vue instance (`new Vue`) created after registration. For example: | ||
| Ces composants sont **enregistrés globalement**. Cela signifie qu'ils peuvent être utilisés dans le template de n'importe quelle instance Vue (`new Vue`) créée après. Par exemple : |
| @@ -68,21 +68,21 @@ new Vue({ el: '#app' }) | |||
| </div> | |||
| ``` | |||
|
|
|||
| This even applies to all subcomponents, meaning all three of these components will also be available _inside each other_. | |||
| Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _l'un dans l'autre_. | |||
There was a problem hiding this comment.
seront également disponibles à l'intérieur les uns des autres.
|
|
||
| Global registration often isn't ideal. For example, if you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download. | ||
| La création globale n'est souvent pas idéale. Par exemple, si vous utilisez un système de build comme webpack, la création globale de composants fait que même si vous arrêtez d'utiliser un composant, il peut toujours être inclus dans votre build final. Cela augmente inutilement la quantité de JavaScript que vos utilisateurs doivent télécharger. |
There was a problem hiding this comment.
la création globale de composants fait signifie que même si vous arrêtez
|
@forresst oups merci. |
Quelques mises à jour sur ce fichier