From 86ff3550177cc9fc3e02a98c69b7020268df61ab Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 23 Jun 2018 03:56:34 +0000 Subject: [PATCH 01/15] Update components-registration.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Quelques mises à jour sur ce fichier --- src/v2/guide/components-registration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 7b1b735384..2f8d5f7917 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -8,17 +8,17 @@ order: 101 ## Component Names -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

When registering a component, it will always be given a name. For example, in the global registration we've seen so far:

+

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit:

```js Vue.component('my-component-name', { /* ... */ }) ``` -The component's name is the first argument of `Vue.component`. +Le nom du composant est le premier argument de `Vue.component`. -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. -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). ### Name Casing From a13c7f6a57bdd41e3d67a9ffc75fd7f4b3e18855 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 23 Jun 2018 14:57:34 +0000 Subject: [PATCH 02/15] Corrections des remarques du PR #145 --- src/v2/guide/components-registration.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 2f8d5f7917..c7650cbd0f 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -6,9 +6,9 @@ order: 101 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. -## Component Names +## Les noms de composant -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit:

+

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit:

```js Vue.component('my-component-name', { /* ... */ }) @@ -16,7 +16,7 @@ Vue.component('my-component-name', { /* ... */ }) Le nom du composant est le premier argument de `Vue.component`. -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. +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. Vous pouvez voir d'autres recommandations pour les noms de composants dans le [Guide des Conventions](../style-guide/#Base-component-names-strongly-recommended). From 25349be7f24439644e498a00bb0244464374d390 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 23 Jun 2018 16:17:42 +0000 Subject: [PATCH 03/15] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20la=20partie?= =?UTF-8?q?=20"Name=20Casing"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index c7650cbd0f..d54f90557d 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -20,25 +20,25 @@ Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez Vous pouvez voir d'autres recommandations pour les noms de composants dans le [Guide des Conventions](../style-guide/#Base-component-names-strongly-recommended). -### Name Casing +### Les cas de nom -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 ```js Vue.component('my-component-name', { /* ... */ }) ``` -When defining a component with kebab-case, you must also use kebab-case when referencing its custom element, such as in ``. +Lors de la définition d'un composant avec kebab-case, vous devez également utiliser kebab-case lors du référencement de l'élément, comme ceci ``. -#### 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 `` and `` 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 `` et `` sont acceptable. A noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). ## Global Registration From 9d9a920f49e0386fd991c682f92cf196cdaa48e4 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 23 Jun 2018 21:46:43 +0000 Subject: [PATCH 04/15] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20la=20partie?= =?UTF-8?q?=20"Global=20Registration"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index d54f90557d..9d60063d15 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -40,9 +40,9 @@ Vue.component('MyComponentName', { /* ... */ }) 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 `` et `` sont acceptable. A noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). -## Global Registration +## Création Globale -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`: ```js Vue.component('my-component-name', { @@ -50,7 +50,7 @@ Vue.component('my-component-name', { }) ``` -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: ```js Vue.component('component-a', { /* ... */ }) @@ -68,7 +68,7 @@ new Vue({ el: '#app' }) ``` -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_. ## Local Registration From f54b73b273008198a5c09bafd9ffa9996842f029 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sun, 24 Jun 2018 23:31:27 +0000 Subject: [PATCH 05/15] Update components-registration.md --- src/v2/guide/components-registration.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 9d60063d15..2b76419acb 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -70,11 +70,11 @@ new Vue({ el: '#app' }) Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _l'un dans l'autre_. -## Local Registration +## Création Locale -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 glabale 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. -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: ```js var ComponentA = { /* ... */ } @@ -82,7 +82,7 @@ var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } ``` -Then define the components you'd like to use in a `components` option: +Puis définissez les composants que vous souhaitez utiliser dans l'option `components`: ```js new Vue({ @@ -94,9 +94,9 @@ new Vue({ }) ``` -For each property in the `components` object, the key will be the name of the custom element, while the value will contain the options object for the component. +Pour chaque propriété de l'objet `components`, la clé sera le nom de l'élément personnalisé, tandis que la valeur contiendra l'objet d'options du composant. -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: ```js var ComponentA = { /* ... */ } @@ -109,7 +109,7 @@ var ComponentB = { } ``` -Or if you're using ES2015 modules, such as through Babel and Webpack, that might look more like: +Ou si vous utilisez des modules ES2015, tels que Babel et Webpack, cela pourrait plus ressembler à: ```js import ComponentA from './ComponentA.vue' @@ -122,10 +122,10 @@ export default { } ``` -Note that in ES2015+, placing a variable name like `ComponentA` inside an object is shorthand for `ComponentA: ComponentA`, meaning the name of the variable is both: +Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un objet est un raccourci à `ComponentA: ComponentA`, signifiant que le nom de la variable est à la fois: -- the custom element name to use in the template, and -- the name of the variable containing the component options +- le nom de l'élément personnalisé à utiliser dans le template, et +- le nom de la variable contenant les options du composant ## Module Systems From 8546172de31c818973e5d2e5abb480fc5fd35b1b Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Tue, 26 Jun 2018 23:23:58 +0000 Subject: [PATCH 06/15] =?UTF-8?q?MAJ=20partielle=20de=20la=20partie=20syst?= =?UTF-8?q?=C3=A8mes=20de=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 2b76419acb..0893f18ae5 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -127,15 +127,15 @@ Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un obj - le nom de l'élément personnalisé à utiliser dans le template, et - le nom de la variable contenant les options du composant -## Module Systems +## Systèmes de module -If you're not using a module system with `import`/`require`, you can probably skip this section for now. If you are, we have some special instructions and tips just for you. +Si vous n'utilisez pas un système de module avec `import`/`require`, vous pouvez probablement ignorer cette section pour l'instant. Si oui, nous avons quelques instructions spéciales et conseils pour vous. -### Local Registration in a Module System +### Création locale dans un système de module -If you're still here, then it's likely you're using a module system, such as with Babel and Webpack. In these cases, we recommend creating a `components` directory, with each component in its own file. +Si vous êtes toujours là, il est probable que vous utilisiez un système de modules, comme avec Babel et Webpack. Dans ces cas, nous recommandons de créer un répertoire `components`, avec chaque composant dans son propre fichier. -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` or `ComponentB.vue`: ```js import ComponentA from './ComponentA' @@ -150,13 +150,13 @@ export default { } ``` -Now both `ComponentA` and `ComponentC` can be used inside `ComponentB`'s template. +Maintenant, et `ComponentA` et `ComponentC` peuvent être utilisés dams le template du composant `ComponentB`. -### Automatic Global Registration of Base Components +### Enregistrement globale automatique des composents 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. -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: ```js import BaseButton from './BaseButton.vue' From b2a7f9d9ce5020a4c7317fdcb84a30e2f713f9c0 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Thu, 28 Jun 2018 02:28:55 +0000 Subject: [PATCH 07/15] =?UTF-8?q?MAJ=20de=20la=20deuxi=C3=A8me=20partie=20?= =?UTF-8?q?syst=C3=A8mes=20de=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 26 ++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 0893f18ae5..f13a2a42c7 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -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: ```html ``` -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. (p. ex. `src/main.js`): ```js import Vue from 'vue' @@ -192,35 +192,35 @@ import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( - // The relative path of the components folder + // Le chemin relatif du dossier composants './components', - // Whether or not to look in subfolders + // Suivre ou non les sous-dossiers 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 /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { - // Get component config + // Récupérer la configuration du composent const componentConfig = requireComponent(fileName) - // Get PascalCase name of component + // Récupérer le nom du composent en PascalCase const componentName = upperFirst( camelCase( - // Strip the leading `'./` and extension from the filename + // Enlever la chaine `'. /` et l'extension du nom de fichier fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) - // Register component globally + // Créer un composant global Vue.component( componentName, - // Look for the component options on `.default`, which will - // exist if the component was exported with `export default`, - // otherwise fall back to module's root. + // Chercher les options du composant dans `.default`, qui + // existera si le composant a été exporté avec `export default`, + // sinon revenez à la racine du module. componentConfig.default || componentConfig ) }) ``` -Remember that **global registration must take place before the root Vue instance is created (with `new Vue`)**. [Here's an example](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) of this pattern in a real project context. +N'oubliez pas que **la création globale doit avoir lieu avant la création de l'instance racine Vue (avec `new Vue`)**. [Voici un exemple](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) de ce modèle dans un contexte de projet réel. From a35331ff15a8e9bcbe49806aa9b250d6cb24d3eb Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Thu, 28 Jun 2018 02:57:10 +0000 Subject: [PATCH 08/15] =?UTF-8?q?Abr=C3=A9viation=20de=20par=20exemple=20e?= =?UTF-8?q?n=20ex.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index f13a2a42c7..cee1ceb04d 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -184,7 +184,7 @@ Juste pour supporter relativement peu de balisage dans un template: ``` -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. (p. ex. `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`): ```js import Vue from 'vue' From 7b1d69a305902ac1d7b40235c1b0409b61c97947 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Thu, 28 Jun 2018 03:06:34 +0000 Subject: [PATCH 09/15] Correction fautes de frappe --- src/v2/guide/components-registration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index cee1ceb04d..33b07aecbb 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -72,7 +72,7 @@ Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois ## Création Locale -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 glabale 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. +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. Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples: From 7be5d4a42f28e2e1228035283356d89c82fb8382 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 30 Jun 2018 17:02:34 +0000 Subject: [PATCH 10/15] =?UTF-8?q?Mise=20=C3=A0=20jours=20apr=C3=A8s=20les?= =?UTF-8?q?=20reviews?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 48 ++++++++++++------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 33b07aecbb..53e30a94dc 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -1,14 +1,14 @@ --- -title: Component Registration (EN) +title: Création de composants type: guide order: 101 --- -> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez cela en premier si vous êtes nouveau aux composants. ## Les noms de composant -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit:

+Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit : ```js Vue.component('my-component-name', { /* ... */ }) @@ -16,11 +16,11 @@ Vue.component('my-component-name', { /* ... */ }) Le nom du composant est le premier argument de `Vue.component`. -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. +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. -Vous pouvez voir d'autres recommandations pour les noms de composants dans le [Guide des Conventions](../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). -### Les cas de nom +### La casse des noms Vous avez deux options pour définir vos noms de composant: @@ -38,11 +38,11 @@ Lors de la définition d'un composant avec kebab-case, vous devez également uti Vue.component('MyComponentName', { /* ... */ }) ``` -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 `` et `` sont acceptable. A noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). +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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). -## Création Globale +## Création globale -Jusque là, nous avons crée des composants seulement avec la manière suivante: `Vue.component`: +Jusque là, nous avons créé des composants seulement avec la manière suivante : `Vue.component` : ```js Vue.component('my-component-name', { @@ -50,7 +50,7 @@ Vue.component('my-component-name', { }) ``` -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: +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 : ```js Vue.component('component-a', { /* ... */ }) @@ -70,9 +70,9 @@ new Vue({ el: '#app' }) Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _l'un dans l'autre_. -## Création Locale +## Création local -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. +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. Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples: @@ -82,7 +82,7 @@ var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } ``` -Puis définissez les composants que vous souhaitez utiliser dans l'option `components`: +Puis définissez les composants que vous souhaitez utiliser dans l'option `components` : ```js new Vue({ @@ -96,7 +96,7 @@ new Vue({ Pour chaque propriété de l'objet `components`, la clé sera le nom de l'élément personnalisé, tandis que la valeur contiendra l'objet d'options du composant. -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: +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: ```js var ComponentA = { /* ... */ } @@ -109,7 +109,7 @@ var ComponentB = { } ``` -Ou si vous utilisez des modules ES2015, tels que Babel et Webpack, cela pourrait plus ressembler à: +Ou si vous utilisez des modules ES2015, tels que Babel et webpack, cela pourrait plus ressembler à: ```js import ComponentA from './ComponentA.vue' @@ -124,7 +124,7 @@ export default { Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un objet est un raccourci à `ComponentA: ComponentA`, signifiant que le nom de la variable est à la fois: -- le nom de l'élément personnalisé à utiliser dans le template, et +- le nom de l'élément personnalisé à utiliser dans le template et - le nom de la variable contenant les options du composant ## Systèmes de module @@ -133,9 +133,9 @@ Si vous n'utilisez pas un système de module avec `import`/`require`, vous pouve ### Création locale dans un système de module -Si vous êtes toujours là, il est probable que vous utilisiez un système de modules, comme avec Babel et Webpack. Dans ces cas, nous recommandons de créer un répertoire `components`, avec chaque composant dans son propre fichier. +Si vous êtes toujours là, il est probable que vous utilisiez un système de modules, comme avec Babel et webpack. Dans ces cas, nous recommandons de créer un répertoire `components`, avec chaque composant dans son propre fichier. -Ensuite, vous devrez importer chaque composant que vous souhaitez utiliser avant de l'enregistrer localement. Par exemple, dans un fichier hypothétique `ComponentB.js` or `ComponentB.vue`: +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`: ```js import ComponentA from './ComponentA' @@ -150,11 +150,11 @@ export default { } ``` -Maintenant, et `ComponentA` et `ComponentC` peuvent être utilisés dams le template du composant `ComponentB`. +Maintenant, et `ComponentA` et `ComponentC` peuvent être utilisés dans le template du composant `ComponentB`. -### Enregistrement globale automatique des composents de base +### Enregistrement global automatique des composents de base -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. +La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champ ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-de-nom-de-composant-fortement-recommande) et ils ont tendance à être utilisés très fréquemment à travers vos composants. Le résultat est que de nombreux composants peuvent inclure de longues listes de composants de base: @@ -172,7 +172,7 @@ export default { } ``` -Juste pour supporter relativement peu de balisage dans un template: +Juste pour supporter relativement peu de balise dans un template: ```html ``` -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`): +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`): ```js import Vue from 'vue' @@ -196,7 +196,7 @@ const requireComponent = require.context( './components', // Suivre ou non les sous-dossiers false, - // L'expression régulière utilisée pour matcher les noms de fichiers de composant de base + // L'expression régulière utilisée pour faire concorder les noms de fichiers de composant de base /Base[A-Z]\w+\.(vue|js)$/ ) From d5f7de04ece8c60c1861acb4ddb95abc3b670a9e Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sat, 30 Jun 2018 23:05:48 +0000 Subject: [PATCH 11/15] Rectification d'erreurs --- src/v2/guide/components-registration.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 53e30a94dc..1902f18034 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -22,7 +22,7 @@ Vous pouvez voir d'autres recommandations pour les noms de composants dans le gu ### La casse des noms -Vous avez deux options pour définir vos noms de composant: +Vous avez deux options pour définir vos noms de composant : #### Avec kebab-case @@ -70,11 +70,11 @@ new Vue({ el: '#app' }) Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _l'un dans l'autre_. -## Création local +## Création locale 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. -Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples: +Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples : ```js var ComponentA = { /* ... */ } @@ -96,7 +96,7 @@ new Vue({ Pour chaque propriété de l'objet `components`, la clé sera le nom de l'élément personnalisé, tandis que la valeur contiendra l'objet d'options du composant. -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: +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 : ```js var ComponentA = { /* ... */ } @@ -109,7 +109,7 @@ var ComponentB = { } ``` -Ou si vous utilisez des modules ES2015, tels que Babel et webpack, cela pourrait plus ressembler à: +Ou si vous utilisez des modules ES2015, tels que Babel et webpack, cela pourrait plus ressembler à : ```js import ComponentA from './ComponentA.vue' @@ -122,7 +122,7 @@ export default { } ``` -Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un objet est un raccourci à `ComponentA: ComponentA`, signifiant que le nom de la variable est à la fois: +Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un objet est un raccourci à `ComponentA: ComponentA`, signifiant que le nom de la variable est à la fois : - le nom de l'élément personnalisé à utiliser dans le template et - le nom de la variable contenant les options du composant @@ -135,7 +135,7 @@ Si vous n'utilisez pas un système de module avec `import`/`require`, vous pouve Si vous êtes toujours là, il est probable que vous utilisiez un système de modules, comme avec Babel et webpack. Dans ces cas, nous recommandons de créer un répertoire `components`, avec chaque composant dans son propre fichier. -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`: +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` : ```js import ComponentA from './ComponentA' @@ -156,7 +156,7 @@ Maintenant, et `ComponentA` et `ComponentC` peuvent être utilisés dans le temp La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champ ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-de-nom-de-composant-fortement-recommande) et ils ont tendance à être utilisés très fréquemment à travers vos composants. -Le résultat est que de nombreux composants peuvent inclure de longues listes de composants de base: +Le résultat est que de nombreux composants peuvent inclure de longues listes de composants de base : ```js import BaseButton from './BaseButton.vue' @@ -172,7 +172,7 @@ export default { } ``` -Juste pour supporter relativement peu de balise dans un template: +Juste pour supporter relativement peu de balise dans un template : ```html ``` -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`): +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`) : ```js import Vue from 'vue' @@ -207,7 +207,7 @@ requireComponent.keys().forEach(fileName => { // Récupérer le nom du composent en PascalCase const componentName = upperFirst( camelCase( - // Enlever la chaine `'. /` et l'extension du nom de fichier + // Enlever la chaine `'./` et l'extension du nom de fichier fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) From 062754cacc4f211313d8bc9efdbcd4552a87422a Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sun, 1 Jul 2018 15:24:16 +0000 Subject: [PATCH 12/15] =?UTF-8?q?Corrections=20apr=C3=A8s=20reviews=20de?= =?UTF-8?q?=20rspt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 1902f18034..b00ff16dc9 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -8,7 +8,7 @@ order: 101 ## Les noms de composant -Lors de la création de composant, il faudra toujours spécifier un nom. Par exemple, la declaration se fera comme suit : +Lors de la création de composants, il faudra toujours spécifier un nom. Par exemple, la déclaration se fera comme suit : ```js Vue.component('my-component-name', { /* ... */ }) @@ -152,7 +152,7 @@ export default { Maintenant, et `ComponentA` et `ComponentC` peuvent être utilisés dans le template du composant `ComponentB`. -### Enregistrement global automatique des composents de base +### Enregistrement global automatique des composants de base La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champ ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-de-nom-de-composant-fortement-recommande) et ils ont tendance à être utilisés très fréquemment à travers vos composants. From 489f71985018bd60e3e624b2be6f00a649c1f78a Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Sun, 1 Jul 2018 22:48:40 +0000 Subject: [PATCH 13/15] =?UTF-8?q?Correction=20d'orthographe=20du=20mot=20c?= =?UTF-8?q?ha=C3=AEne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index b00ff16dc9..e1bd182960 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -38,7 +38,7 @@ Lors de la définition d'un composant avec kebab-case, vous devez également uti Vue.component('MyComponentName', { /* ... */ }) ``` -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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). +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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaîne). ## Création globale @@ -207,7 +207,7 @@ requireComponent.keys().forEach(fileName => { // Récupérer le nom du composent en PascalCase const componentName = upperFirst( camelCase( - // Enlever la chaine `'./` et l'extension du nom de fichier + // Enlever la chaîne `'./` et l'extension du nom de fichier fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) From add77f27360e2341de8264e3ee5dd28a20841e58 Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Mon, 2 Jul 2018 14:56:13 +0000 Subject: [PATCH 14/15] =?UTF-8?q?Changement=20de=20du=20mot=20"cha=C3=AEne?= =?UTF-8?q?"=20en=20"chaine"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components-registration.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index e1bd182960..5c8e32258f 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -16,7 +16,7 @@ Vue.component('my-component-name', { /* ... */ }) Le nom du composant est le premier argument de `Vue.component`. -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. +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. Vous pouvez voir d'autres recommandations pour les noms de composants dans le guide des [Conventions](../style-guide/#Base-component-names-strongly-recommended). @@ -38,7 +38,7 @@ Lors de la définition d'un composant avec kebab-case, vous devez également uti Vue.component('MyComponentName', { /* ... */ }) ``` -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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaîne). +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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). ## Création globale @@ -207,7 +207,7 @@ requireComponent.keys().forEach(fileName => { // Récupérer le nom du composent en PascalCase const componentName = upperFirst( camelCase( - // Enlever la chaîne `'./` et l'extension du nom de fichier + // Enlever la chaine `'./` et l'extension du nom de fichier fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) From 7e00089709ea026e8b342c31f6c9dd8b73e3c0fd Mon Sep 17 00:00:00 2001 From: Ahmadou Waly NDIAYE Date: Tue, 3 Jul 2018 09:48:55 +0000 Subject: [PATCH 15/15] Changer "Avec" en "En" avant "PascalCase | kebab-case" --- src/v2/guide/components-registration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 5c8e32258f..1429d4f8a7 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -24,21 +24,21 @@ Vous pouvez voir d'autres recommandations pour les noms de composants dans le gu Vous avez deux options pour définir vos noms de composant : -#### Avec kebab-case +#### En kebab-case ```js Vue.component('my-component-name', { /* ... */ }) ``` -Lors de la définition d'un composant avec kebab-case, vous devez également utiliser kebab-case lors du référencement de l'élément, comme ceci ``. +Lors de la définition d'un composant en kebab-case, vous devez également utiliser kebab-case lors du référencement de l'élément, comme ceci ``. -#### Avec PascalCase +#### En PascalCase ```js Vue.component('MyComponentName', { /* ... */ }) ``` -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 `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). +Lors de la définition d'un composant en PascalCase, vous pouvez utiliser l'un ou l'autre cas lors du référencement de l'élément. Cela signifie que `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine). ## Création globale