From 3450a9654f4ae93cfefd386e758a6b9ca859c3a4 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 12:13:10 +0100 Subject: [PATCH 01/24] traduction de la page mixins.md --- src/v2/guide/mixins.md | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index be5027f239..2d2571b92d 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -4,11 +4,13 @@ type: guide order: 17 --- -## Basics +## Bases -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options. +

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

-Example: +Les mixins sont une manière souple de créer des fonctionnalités réutilisables par les composants de Vue. Un mixin peut utiliser toute option valides pour un composant. Quand un composant utilise un mixin, toutes les options des différents mixins seront fusionnées pour constituer les options du composant. + +Exemple: ``` js // define a mixin object @@ -24,6 +26,7 @@ var myMixin = { } // define a component that uses this mixin +// définition d'un composant qui utilise ce mixin var Component = Vue.extend({ mixins: [myMixin] }) @@ -31,9 +34,9 @@ var Component = Vue.extend({ var component = new Component() // -> "hello from mixin!" ``` -## Option Merging +## Fusion des options -When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called **before** the component's own hooks: +Quand un mixin et un composant contiennent des options communes, elles seront chacune fusionnées avec la stratégie adequate. Par exemple, les fonctions de hook seront mergées dans un tableau afin qu'elles soient bien toutes appelées. Par ailleurs, les hooks des mixin seront appelés **avant** les hooks du composant: ``` js var mixin = { @@ -53,7 +56,7 @@ new Vue({ // -> "component hook called" ``` -Options that expect object values, for example `methods`, `components` and `directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects: +Pour les options qui s'attendent à recevoir un objet, telles que `methods`, `components` et `directives`, les valeurs seront fusionnée au sein du même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. ``` js var mixin = { @@ -84,14 +87,14 @@ vm.bar() // -> "bar" vm.conflicting() // -> "from self" ``` -Note that the same merge strategies are used in `Vue.extend()`. +Notez que les mêmes stratégies de fusion sont utilisée pour `Vue.extend()`. -## Global Mixin +## Mixin Global -You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect **every** Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options: +Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec beaucoup de prudence ! Une fois que vous appliquer un mixin globalement, il modifiera **toutes** les instances de vues qui suivent. Bien utilisé, cela peut être utilisé pour injecter de la logique dans des options customs : ``` js -// inject a handler for `myOption` custom option +// injection d'une fonction pour l'option custom myOption` Vue.mixin({ created: function () { var myOption = this.$options.myOption @@ -107,11 +110,11 @@ new Vue({ // -> "hello!" ``` -

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It's also a good idea to ship them as [Plugins](plugins.html) to avoid duplicate application.

+

-## Custom Option Merge Strategies +## Stratégie de fusion des options custom -When custom options are merged, they use the default strategy, which simply overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to `Vue.config.optionMergeStrategies`: +Quand les options customs sont fusionnées, elles utilisent la stratégie par défaut, qui est d'écraser la valeur pré-existante. Si vous souhaitez appliquer une logique custom pour la fusion, vous devez attacher une fonction à `Vue.config.optionMergeStrategies`: ``` js Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { @@ -119,7 +122,7 @@ Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { } ``` -For most object-based options, you can simply use the same strategy used by `methods`: +Pour la plupart des options qui attendent des objets, vous pouvez simplement utiliser la stratégie de fusion utilisée par `methods`: ``` js var strategies = Vue.config.optionMergeStrategies @@ -127,6 +130,7 @@ strategies.myOption = strategies.methods ``` A more advanced example can be found on [Vuex](https://github.com/vuejs/vuex)'s 1.x merging strategy: +A exemple plus avancé peut être trouvé dans la stratégie de fusion de [Vuex](https://github.com/vuejs/vuex) 1.x: ``` js const merge = Vue.config.optionMergeStrategies.computed From 43e8de1d984dff4f9fd0b495d211b8497b92443b Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 12:20:33 +0100 Subject: [PATCH 02/24] corrections typos --- src/v2/guide/mixins.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 2d2571b92d..0bbb58dc2b 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -8,7 +8,7 @@ order: 17

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

-Les mixins sont une manière souple de créer des fonctionnalités réutilisables par les composants de Vue. Un mixin peut utiliser toute option valides pour un composant. Quand un composant utilise un mixin, toutes les options des différents mixins seront fusionnées pour constituer les options du composant. +Les mixins sont une manière souple de créer des fonctionnalités réutilisables par les composants de Vue. Un mixin peut utiliser toute option valide pour un composant. Quand un composant utilise des mixins, toutes les options des différents mixins seront fusionnées pour constituer les options finales du composant. Exemple: @@ -25,7 +25,6 @@ var myMixin = { } } -// define a component that uses this mixin // définition d'un composant qui utilise ce mixin var Component = Vue.extend({ mixins: [myMixin] @@ -36,7 +35,7 @@ var component = new Component() // -> "hello from mixin!" ## Fusion des options -Quand un mixin et un composant contiennent des options communes, elles seront chacune fusionnées avec la stratégie adequate. Par exemple, les fonctions de hook seront mergées dans un tableau afin qu'elles soient bien toutes appelées. Par ailleurs, les hooks des mixin seront appelés **avant** les hooks du composant: +Quand un mixin et un composant définissent les mêmes options, elles seront chacune fusionnées avec la stratégie adequate. Par exemple, les fonctions de hook seront fusionnées dans un tableau afin qu'elles soient bien toutes appelées. Par ailleurs, les hooks des mixins seront appelés **avant** les hooks du composant: ``` js var mixin = { @@ -56,7 +55,7 @@ new Vue({ // -> "component hook called" ``` -Pour les options qui s'attendent à recevoir un objet, telles que `methods`, `components` et `directives`, les valeurs seront fusionnée au sein du même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. +Pour les options qui s'attendent à recevoir un objet, telles que `methods`, `components` et `directives`, les valeurs seront fusionnées au sein du même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. ``` js var mixin = { @@ -87,14 +86,14 @@ vm.bar() // -> "bar" vm.conflicting() // -> "from self" ``` -Notez que les mêmes stratégies de fusion sont utilisée pour `Vue.extend()`. +Notez que les mêmes stratégies de fusion sont utilisée par `Vue.extend()`. -## Mixin Global +## Mixin global -Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec beaucoup de prudence ! Une fois que vous appliquer un mixin globalement, il modifiera **toutes** les instances de vues qui suivent. Bien utilisé, cela peut être utilisé pour injecter de la logique dans des options customs : +Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec beaucoup de prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créees ensuite. Bien utilisé, cela permet d'injecter de la logique dans des options custom : ``` js -// injection d'une fonction pour l'option custom myOption` +// injection d'une fonction pour l'option custom `myOption` Vue.mixin({ created: function () { var myOption = this.$options.myOption @@ -110,11 +109,11 @@ new Vue({ // -> "hello!" ``` -

+

Utilisez les mixins globaux avec beaucoup de prudence et de modération, parce qu'ils affectent chacune des Vue créees, y compris celles des librairies tierces. La plupart du temps, vous devriez uniquement vous en servir pour la gestion des options custom comme dans l'exemple ci-dessus. C'est aussi une bonne idée d'en faire des [Plugins](plugins.html) pour éviter de les appliquer plusieurs fois par erreur.

## Stratégie de fusion des options custom -Quand les options customs sont fusionnées, elles utilisent la stratégie par défaut, qui est d'écraser la valeur pré-existante. Si vous souhaitez appliquer une logique custom pour la fusion, vous devez attacher une fonction à `Vue.config.optionMergeStrategies`: +Quand les options custom sont fusionnées, elles utilisent la stratégie par défaut, qui est d'écraser la valeur pré-existante. Si vous souhaitez appliquer une logique custom pour la fusion, vous devez attacher une nouvelle fonction à `Vue.config.optionMergeStrategies`: ``` js Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { @@ -129,7 +128,6 @@ var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods ``` -A more advanced example can be found on [Vuex](https://github.com/vuejs/vuex)'s 1.x merging strategy: A exemple plus avancé peut être trouvé dans la stratégie de fusion de [Vuex](https://github.com/vuejs/vuex) 1.x: ``` js From a487dfbfc849f1d16aaf2eedb05d40d79dc5254b Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 19:34:42 +0100 Subject: [PATCH 03/24] traduction de la page [v2/guide/single-file-components.md] --- src/v2/guide/single-file-components.md | 57 ++++++++++++++------------ 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index a6f10a084e..2c487f9f72 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -8,36 +8,39 @@ order: 19

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page. -This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent: -- **Global definitions** force unique names for every component -- **String templates** lack syntax highlighting and require ugly slashes for multiline HTML -- **No CSS support** means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out -- **No build step** restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel +Cela pourra très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : -All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify. +- **Les définitions globales** force à avoir un nom unique pour chacun des composants +- **Les templates sous forme de chaîne de caractère** ne bénéficie pas de la coloration syntaxique du html et requiert l'usage de slashes pour le multilignes. +- **Le css non supporté** ne vous permet pas d'injecter du css dans vos composants, seulement du Javascript et du html +- **L'absence d'étape de build** ne nous permet pas d'utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). -Here's a simple example of a file we'll call `Hello.vue`: + +Tous ces désavantages sont résolus par les composants monofichier avec une extension `.vue`, dont l'existence est rendue possible grâce aux outils de build tels que Webpack ou Browserify. + +Voici un exemple simple de fichier que nous appelerons `Hello.vue` : -Now we get: +Maintenant nous avons : -- [Complete syntax highlighting](https://github.com/vuejs/awesome-vue#syntax-highlighting) -- [CommonJS modules](https://webpack.github.io/docs/commonjs.html) -- [Component-scoped CSS](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) +- [Une coloration syntaxique complète](https://github.com/vuejs/awesome-vue#syntax-highlighting) +- [Des modules CommonJS](https://webpack.github.io/docs/commonjs.html) +- [Du css avec portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) -As promised, we can also use preprocessors such as Jade, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components. +Et comme promis, nous pouvons maintenant utiliser des preprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et avec plus de fonctionnalités. -These specific languages are just examples. You could just as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules. +Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - tout tout autre preprocesseur qui vous rend plus productif. Du fait de l'utilisation de Webpack avec le loader `vue-loader`, vous obtenez en même temps un outil de premier choix pour les modules CSS. -### What About Separation of Concerns? +### Qu'en est-il de la séparation des responsabilités ? -One important thing to note is that **separation of concerns is not equal to separation of file types.** In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweaves with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable. +Une chose importante à souligner est que **la séparation des responsabilités n'est pas la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes, il était plus intuitif de le diviser en petits composants découplés, puis de composer l'interface utilisateur en les combinant. Au sein d'un même composant, son template, sa logique et ses styles sont interdépendants, et les regrouper rend le composant plus cohérent et facile à maintenir. + +Si toutefois vous n'aimez vraiment pas l'idée des composants monofichier, vous pouvez toujours mettre à profit le hot-reloading et la pre-compilation pour mettre le css et le javascript dans des fichiers séparés. -Even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files: ``` html @@ -48,22 +51,24 @@ Even if you don't like the idea of Single-File Components, you can still leverag ``` -## Getting Started +## Bien commencer + +### Pour les utilisateurs qui ne connaissent les systemes de modules en Javascript -### For Users New to Module Build Systems in JavaScript +Avec les composants `.vue`, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already: +Avec les composants `.vue`, nous entrons de plein-pied dans les domaines des applications javascripts avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : -With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already: +- **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_. -- **Node Package Manager (NPM)**: Read the [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_. +- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités, mais gardez cette page pour pouvoir y revenir quand vous en aurez besoin. -- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don't have to memorize every feature right now, but keep this page as a reference you can come back to. +Une fois que vous aurez pris une journée pour vous familiariser avec ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading. -After you've taken a day to dive into these resources, we recommend checking out the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015 and hot-reloading running in no time! +Ce template de projet utilise [Webpack](https://webpack.github.io/), un packager qui rassemble vos différents "modules" pour créer votre fichier d'application final. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). -The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). +Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le bundle, et Vue propose le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) configure tout pour vous, mais si vous souhaitez en apprendre sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation pour vue-loader](https://vue-loader.vuejs.org). -In Webpack, each module can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org). +### Pour les utilisateur avancés -### For Advanced Users +Que vous préfériez Webpack ou Browserify, nous avons des templates pour les projets simples comme pour les projets complexes. Nous vous invitons à explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), choisir un template qui vous convient et suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). -Whether you prefer Webpack or Browserify, we have documented templates for both simple and more complex projects. We recommend browsing [github.com/vuejs-templates](https://github.com/vuejs-templates), picking a template that's right for you, then following the instructions in the README to generate a new project with [vue-cli](https://github.com/vuejs/vue-cli). From 6d31263ebe098142859d22f677734af79a9a14e2 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 19:35:29 +0100 Subject: [PATCH 04/24] [v2/guide/single-file-components.md] - fix du titre --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 2c487f9f72..676593f441 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -1,5 +1,5 @@ --- -title: Single File Components +title: Les composants monofichier type: guide order: 19 --- From 4c946aa9ad3cc713225266ffca3e668499a53ea8 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 19:36:15 +0100 Subject: [PATCH 05/24] =?UTF-8?q?[v2/guide/single-file-components.md]=20-?= =?UTF-8?q?=20suppression=20de=20l'encart=20de=20warning=20concernant=20la?= =?UTF-8?q?=20traduction=20fran=C3=A7aise=20en=20cours?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/single-file-components.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 676593f441..4c515f0a8a 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -6,9 +6,6 @@ order: 19 ## Introduction -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page. - - Cela pourra très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : - **Les définitions globales** force à avoir un nom unique pour chacun des composants From 15187a0a6bd0bcf7d5900a790c91d6e7b227c43f Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 19:49:15 +0100 Subject: [PATCH 06/24] [v2/guide/single-file-components.md] - fix typos --- src/v2/guide/single-file-components.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 4c515f0a8a..2939d7309d 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -9,14 +9,14 @@ order: 19 Cela pourra très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : - **Les définitions globales** force à avoir un nom unique pour chacun des composants -- **Les templates sous forme de chaîne de caractère** ne bénéficie pas de la coloration syntaxique du html et requiert l'usage de slashes pour le multilignes. -- **Le css non supporté** ne vous permet pas d'injecter du css dans vos composants, seulement du Javascript et du html +- **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique du html et requiert l'usage de slashes disgracieux pour le multilignes. +- **Le css non supporté** ne nous permet pas d'injecter du css dans nos composants, seulement du Javascript et du html - **L'absence d'étape de build** ne nous permet pas d'utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). -Tous ces désavantages sont résolus par les composants monofichier avec une extension `.vue`, dont l'existence est rendue possible grâce aux outils de build tels que Webpack ou Browserify. +Tous ces désavantages disparaissent en utilisant les composants monofichier avec une extension `.vue`, dont l'existence est rendue possible grâce aux outils de build tels que Webpack ou Browserify. -Voici un exemple simple de fichier que nous appelerons `Hello.vue` : +Voici un exemple simple de fichier que nous appellerons `Hello.vue` : @@ -30,11 +30,11 @@ Et comme promis, nous pouvons maintenant utiliser des preprocesseurs tels que Ja -Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - tout tout autre preprocesseur qui vous rend plus productif. Du fait de l'utilisation de Webpack avec le loader `vue-loader`, vous obtenez en même temps un outil de premier choix pour les modules CSS. +Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre preprocesseur qui vous rend plus productif. Du fait de l'utilisation de Webpack avec le loader `vue-loader`, vous obtenez en même temps un outil de premier choix pour les modules CSS. ### Qu'en est-il de la séparation des responsabilités ? -Une chose importante à souligner est que **la séparation des responsabilités n'est pas la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes, il était plus intuitif de le diviser en petits composants découplés, puis de composer l'interface utilisateur en les combinant. Au sein d'un même composant, son template, sa logique et ses styles sont interdépendants, et les regrouper rend le composant plus cohérent et facile à maintenir. +Une chose importante à souligner est que **la séparation des responsabilités n'est pas égal à la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes, il était plus intuitif de le diviser en petits composants découplés, puis de composer notre interface en les combinant. Au sein d'un même composant, son template, sa logique et ses styles sont interdépendants, et les regrouper rend le composant plus cohérent et facile à maintenir. Si toutefois vous n'aimez vraiment pas l'idée des composants monofichier, vous pouvez toujours mettre à profit le hot-reloading et la pre-compilation pour mettre le css et le javascript dans des fichiers séparés. @@ -52,20 +52,19 @@ Si toutefois vous n'aimez vraiment pas l'idée des composants monofichier, vous ### Pour les utilisateurs qui ne connaissent les systemes de modules en Javascript -Avec les composants `.vue`, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already: -Avec les composants `.vue`, nous entrons de plein-pied dans les domaines des applications javascripts avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : +Avec les composants `.vue`, nous entrons de plain-pied dans les domaines des applications Javascripts avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : -- **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_. +- **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_. -- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités, mais gardez cette page pour pouvoir y revenir quand vous en aurez besoin. +- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités, mais gardez cette page en référence pour pouvoir y revenir quand vous en aurez besoin. Une fois que vous aurez pris une journée pour vous familiariser avec ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading. Ce template de projet utilise [Webpack](https://webpack.github.io/), un packager qui rassemble vos différents "modules" pour créer votre fichier d'application final. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). -Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le bundle, et Vue propose le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) configure tout pour vous, mais si vous souhaitez en apprendre sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation pour vue-loader](https://vue-loader.vuejs.org). +Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le bundle, et Vue propose le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) configure tout pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation pour vue-loader](https://vue-loader.vuejs.org). -### Pour les utilisateur avancés +### Pour les utilisateurs avancés Que vous préfériez Webpack ou Browserify, nous avons des templates pour les projets simples comme pour les projets complexes. Nous vous invitons à explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), choisir un template qui vous convient et suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). From 55b7261365c20701fbf667107d38aeaca699ad19 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 23:07:40 +0100 Subject: [PATCH 07/24] =?UTF-8?q?[v2/guide/single-file-components.md]=20-?= =?UTF-8?q?=20rajout=20d'une=20phrase=20manquante=20au=20d=C3=A9but=20suit?= =?UTF-8?q?e=20=C3=A0=20erreur=20copier-coller?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/single-file-components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 2939d7309d..a794f387ec 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -6,7 +6,9 @@ order: 19 ## Introduction -Cela pourra très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : +Dans la plupart des projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi par `new Vue({ el: '#container' })` pour cibler un élément conteneur dans le body de chaque page. + +Cela fonctionnera très bien pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : - **Les définitions globales** force à avoir un nom unique pour chacun des composants - **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique du html et requiert l'usage de slashes disgracieux pour le multilignes. From 017cd6ee8f02a4eb1ca828a415edaf603504c14f Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 8 Jan 2017 23:10:27 +0100 Subject: [PATCH 08/24] fix typo --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index a794f387ec..0cab38dbac 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -10,7 +10,7 @@ Dans la plupart des projets Vue, des composants globaux seront définis en utili Cela fonctionnera très bien pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : -- **Les définitions globales** force à avoir un nom unique pour chacun des composants +- **Les définitions globales** forcent à avoir un nom unique pour chacun des composants - **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique du html et requiert l'usage de slashes disgracieux pour le multilignes. - **Le css non supporté** ne nous permet pas d'injecter du css dans nos composants, seulement du Javascript et du html - **L'absence d'étape de build** ne nous permet pas d'utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). From d0e61ddc709415f6dbebde5fb2a28f05c40a4bea Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:33:05 +0100 Subject: [PATCH 09/24] =?UTF-8?q?[mixins.md]=20traduction=20plus=20pr?= =?UTF-8?q?=C3=A9cise=20du=20premier=20paragraphe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 0bbb58dc2b..adac119d1b 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -8,7 +8,7 @@ order: 17

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

-Les mixins sont une manière souple de créer des fonctionnalités réutilisables par les composants de Vue. Un mixin peut utiliser toute option valide pour un composant. Quand un composant utilise des mixins, toutes les options des différents mixins seront fusionnées pour constituer les options finales du composant. +Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut utiliser toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. Exemple: From 16de46848a5d162c7ea5c1d411b2c0c33423cdd2 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:34:42 +0100 Subject: [PATCH 10/24] =?UTF-8?q?[mixins.md]=20r=C3=A9utilisation=20du=20m?= =?UTF-8?q?ot=20contenir=20pour=20'contain'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index adac119d1b..92d7c17122 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -8,7 +8,7 @@ order: 17

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

-Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut utiliser toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. +Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. Exemple: From 0373669e634f481b3a3f5431dcc78ed9723b42b6 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:38:50 +0100 Subject: [PATCH 11/24] =?UTF-8?q?[mixins.md]=20traduction=20plus=20pr?= =?UTF-8?q?=C3=A9cise=20du=20deuxieme=20paragraphe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 92d7c17122..83b7b949ac 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -35,7 +35,7 @@ var component = new Component() // -> "hello from mixin!" ## Fusion des options -Quand un mixin et un composant définissent les mêmes options, elles seront chacune fusionnées avec la stratégie adequate. Par exemple, les fonctions de hook seront fusionnées dans un tableau afin qu'elles soient bien toutes appelées. Par ailleurs, les hooks des mixins seront appelés **avant** les hooks du composant: +Quand un mixin et un composant définissent les mêmes options, elles seront fusionnées en utilisant la stratégie appropriée. Par exemple, les fonctions de hook avec le même nom seront fusionnées dans un tableau afin qu'elles soient toutes appelées. De plus, les hooks des mixins seront appelés **avant** les hooks du composant: ``` js var mixin = { From 6c83c0ef6eb94e8b643b12de21d35ade12f2d4b5 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:40:33 +0100 Subject: [PATCH 12/24] =?UTF-8?q?[mixins.md]=20traduction=20plus=20pr?= =?UTF-8?q?=C3=A9cise=20du=20troisieme=20paragraphe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 83b7b949ac..6bb93873eb 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -55,7 +55,7 @@ new Vue({ // -> "component hook called" ``` -Pour les options qui s'attendent à recevoir un objet, telles que `methods`, `components` et `directives`, les valeurs seront fusionnées au sein du même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. +Les options qui attendent un objet, par exemple `methods`, `components` et `directives`, seront fusionnées dans le même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. ``` js var mixin = { From 3712eb9f76d1e48a62635394af53d1b970103c92 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:43:09 +0100 Subject: [PATCH 13/24] =?UTF-8?q?[mixins.md]=20traduction=20plus=20pr?= =?UTF-8?q?=C3=A9cise=20du=204eme=20paragraphe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 6bb93873eb..44c6d80f1d 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -90,7 +90,7 @@ Notez que les mêmes stratégies de fusion sont utilisée par `Vue.extend()`. ## Mixin global -Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec beaucoup de prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créees ensuite. Bien utilisé, cela permet d'injecter de la logique dans des options custom : +Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créees ensuite. Bien utilisé, cela peut être exploité pour injecter de la logique pour des options custom : ``` js // injection d'une fonction pour l'option custom `myOption` From daffaf5ad811301c90adba4f06b25a382893186a Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 13:50:24 +0100 Subject: [PATCH 14/24] =?UTF-8?q?[mixins.md]=20traduction=20plus=20pr?= =?UTF-8?q?=C3=A9cises=20des=20derniers=20paragraphes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/mixins.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 44c6d80f1d..0f8daa7594 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -109,11 +109,11 @@ new Vue({ // -> "hello!" ``` -

Utilisez les mixins globaux avec beaucoup de prudence et de modération, parce qu'ils affectent chacune des Vue créees, y compris celles des librairies tierces. La plupart du temps, vous devriez uniquement vous en servir pour la gestion des options custom comme dans l'exemple ci-dessus. C'est aussi une bonne idée d'en faire des [Plugins](plugins.html) pour éviter de les appliquer plusieurs fois par erreur.

+

Utilisez les mixins globaux prudemment et rarement, parce qu'ils affectent chacune des Vue créees, y compris celles des librairies tierces. Dans la plupart des cas, vous devriez uniquement vous en servir pour la gestion des options custom comme illustré dans l'exemple ci-dessus. C'est aussi une bonne idée de les encapsuler dans des [Plugins](plugins.html) pour éviter de les appliquer plusieurs fois par erreur.

## Stratégie de fusion des options custom -Quand les options custom sont fusionnées, elles utilisent la stratégie par défaut, qui est d'écraser la valeur pré-existante. Si vous souhaitez appliquer une logique custom pour la fusion, vous devez attacher une nouvelle fonction à `Vue.config.optionMergeStrategies`: +Quand les options custom sont fusionnées, elles utilisent la stratégie par défaut, qui est simplement d'écraser la valeur existante. Si vous souhaitez appliquer une stratégie de fusion custom pour une option custom, vous devez attacher une nouvelle fonction à `Vue.config.optionMergeStrategies`: ``` js Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { @@ -128,7 +128,7 @@ var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods ``` -A exemple plus avancé peut être trouvé dans la stratégie de fusion de [Vuex](https://github.com/vuejs/vuex) 1.x: +Un exemple plus avancé peut être trouvé dans la stratégie de fusion de [Vuex](https://github.com/vuejs/vuex) 1.x: ``` js const merge = Vue.config.optionMergeStrategies.computed From fa5e8d1fb468bf9c2d090aeb83b0616aeecf4733 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 17:39:29 +0100 Subject: [PATCH 15/24] =?UTF-8?q?single-file-components=20-=20r=C3=A9ecrit?= =?UTF-8?q?ure=20plus=20proche=20de=20l'originale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/single-file-components.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 0cab38dbac..4bc788dd29 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -6,17 +6,17 @@ order: 19 ## Introduction -Dans la plupart des projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi par `new Vue({ el: '#container' })` pour cibler un élément conteneur dans le body de chaque page. +Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#container' })` pour cibler un élément container dans le corps de chaque page. -Cela fonctionnera très bien pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des inconvénients vont se manifester : +Cela fonctionnera très bien pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des désavantages se manifestent : -- **Les définitions globales** forcent à avoir un nom unique pour chacun des composants -- **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique du html et requiert l'usage de slashes disgracieux pour le multilignes. -- **Le css non supporté** ne nous permet pas d'injecter du css dans nos composants, seulement du Javascript et du html -- **L'absence d'étape de build** ne nous permet pas d'utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). +- **Les définitions globales** forcent à avoir un nom unique pour chaque composant +- **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique et requiert l'usage de slashes disgracieux pour le HTML multilignes. +- **L'absence de support pour le css** signifie que le css ne peut pas être modularisé comme HTML et Javascript +- **L'absence d'étape de build** nous restreint au HTML et à Javascript ES5, sans pouvoir utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). -Tous ces désavantages disparaissent en utilisant les composants monofichier avec une extension `.vue`, dont l'existence est rendue possible grâce aux outils de build tels que Webpack ou Browserify. +Tous ces désavantages sont résolus par les composants monofichier avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. Voici un exemple simple de fichier que nous appellerons `Hello.vue` : @@ -26,13 +26,13 @@ Maintenant nous avons : - [Une coloration syntaxique complète](https://github.com/vuejs/awesome-vue#syntax-highlighting) - [Des modules CommonJS](https://webpack.github.io/docs/commonjs.html) -- [Du css avec portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) +- [Du css à la portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) -Et comme promis, nous pouvons maintenant utiliser des preprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et avec plus de fonctionnalités. +Et comme promis, nous pouvons aussi utiliser des preprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités. -Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre preprocesseur qui vous rend plus productif. Du fait de l'utilisation de Webpack avec le loader `vue-loader`, vous obtenez en même temps un outil de premier choix pour les modules CSS. +Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre preprocesseur qui vous aide à être productif. Si vous utilisez Webpack avec `vue-loader`, vous aurez aussi un outil de premier choix pour les modules CSS. ### Qu'en est-il de la séparation des responsabilités ? From 72c7f1db08f0ae9cc039260e3281c7cf98aeef00 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 17:47:02 +0100 Subject: [PATCH 16/24] =?UTF-8?q?single-file-components.md=20:=20r=C3=A9ec?= =?UTF-8?q?riture=20plus=20proche=20de=20l'original?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/single-file-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 4bc788dd29..975ff72dab 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -36,9 +36,9 @@ Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi ai ### Qu'en est-il de la séparation des responsabilités ? -Une chose importante à souligner est que **la séparation des responsabilités n'est pas égal à la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes, il était plus intuitif de le diviser en petits composants découplés, puis de composer notre interface en les combinant. Au sein d'un même composant, son template, sa logique et ses styles sont interdépendants, et les regrouper rend le composant plus cohérent et facile à maintenir. +Une chose importante à souligner est que **la séparation des responsabilités n'est pas identique à la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes inter-dépendantes, il était plus intuitif de le diviser en petits composants faiblement couplés, et de les combiner. Au sein d'un composant, son template, sa logique et ses styles sont intrinsèquement couplés, et les réunir rend en réalité le composant plus cohérent et facile à maintenir. -Si toutefois vous n'aimez vraiment pas l'idée des composants monofichier, vous pouvez toujours mettre à profit le hot-reloading et la pre-compilation pour mettre le css et le javascript dans des fichiers séparés. +Si vous n'aimez pas l'idée des composants monofichier, vous pouvez toujours tirer parti du hot-reloading et la pre-compilation pour mettre le css et le javascript dans des fichiers séparés. ``` html From 27ad788bcc05c58e3bf7dfecb61640a933e6ecbe Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 17:56:21 +0100 Subject: [PATCH 17/24] =?UTF-8?q?single-file-components.md=20:=20fin=20r?= =?UTF-8?q?=C3=A9ecriture=20plus=20proche=20de=20l'original?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/single-file-components.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 975ff72dab..468d7ac689 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -52,21 +52,21 @@ Si vous n'aimez pas l'idée des composants monofichier, vous pouvez toujours tir ## Bien commencer -### Pour les utilisateurs qui ne connaissent les systemes de modules en Javascript +### Pour les utilisateurs qui ne connaissent pas les systemes de modules en Javascript -Avec les composants `.vue`, nous entrons de plain-pied dans les domaines des applications Javascripts avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : +Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications Javascript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : - **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_. -- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités, mais gardez cette page en référence pour pouvoir y revenir quand vous en aurez besoin. +- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir. -Une fois que vous aurez pris une journée pour vous familiariser avec ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading. +Une fois que vous aurez pris une journée pour vous plonger dans ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading ! -Ce template de projet utilise [Webpack](https://webpack.github.io/), un packager qui rassemble vos différents "modules" pour créer votre fichier d'application final. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). +Ce template de projet utilise [Webpack](https://webpack.github.io/), un empaqueteur de modules qui prend des "modules" et les empaquette dans votre application finale. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). -Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le bundle, et Vue propose le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) configure tout pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation pour vue-loader](https://vue-loader.vuejs.org). +Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le paquet, et Vue offre le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) a déjà tout configuré pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation de vue-loader](https://vue-loader.vuejs.org). ### Pour les utilisateurs avancés -Que vous préfériez Webpack ou Browserify, nous avons des templates pour les projets simples comme pour les projets complexes. Nous vous invitons à explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), choisir un template qui vous convient et suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). +Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), choisir un template qui vous convient et suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). From 3629ab6e317abad6b82257a66f44f9e8bd04d8a3 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 18:03:48 +0100 Subject: [PATCH 18/24] [v2/guide/single-file-components.md] - fix dernier paragraphe - fin deuxieme relecture --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 468d7ac689..7e98266be9 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -68,5 +68,5 @@ Dans Webpack, chaque module peut être transformé par un "loader" avant d'être ### Pour les utilisateurs avancés -Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), choisir un template qui vous convient et suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). +Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), de choisir un template qui vous convient et de suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). From 0dc42e3340596e7034ae8973ae92c92397ce9ee1 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 23:37:15 +0100 Subject: [PATCH 19/24] [mixins.md] suppression de l'encart concernant la traduction --- src/v2/guide/mixins.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 0f8daa7594..5f75436782 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -6,8 +6,6 @@ order: 17 ## Bases -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

- Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. Exemple: From 9c3c9ec26c73c6f7e32eeec2810515087310e7c4 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 23:45:05 +0100 Subject: [PATCH 20/24] [mixins.md] relecture sylvain --- src/v2/guide/mixins.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 5f75436782..4c5ac6d044 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -6,7 +6,7 @@ order: 17 ## Bases -Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. +Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables pour les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant. Exemple: @@ -53,7 +53,7 @@ new Vue({ // -> "component hook called" ``` -Les options qui attendent un objet, par exemple `methods`, `components` et `directives`, seront fusionnées dans le même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets. +Les options qui attendent un objet, par exemple `methods`, `components` et `directives`, seront fusionnées dans le même objet. Les options du composant auront la priorité en cas de conflit sur une ou plusieurs clés de ces objets. ``` js var mixin = { @@ -84,14 +84,14 @@ vm.bar() // -> "bar" vm.conflicting() // -> "from self" ``` -Notez que les mêmes stratégies de fusion sont utilisée par `Vue.extend()`. +Notez que les mêmes stratégies de fusion sont utilisées par `Vue.extend()`. ## Mixin global -Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créees ensuite. Bien utilisé, cela peut être exploité pour injecter de la logique pour des options custom : +Vous pouvez aussi appliquer un mixin de manière globale. À utiliser avec prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créées ensuite. Bien utilisé, cela peut être exploité pour injecter une logique de traitement pour des options personnalisées : ``` js -// injection d'une fonction pour l'option custom `myOption` +// injection d'une fonction pour l'option personnalisée `myOption` Vue.mixin({ created: function () { var myOption = this.$options.myOption @@ -107,11 +107,11 @@ new Vue({ // -> "hello!" ``` -

Utilisez les mixins globaux prudemment et rarement, parce qu'ils affectent chacune des Vue créees, y compris celles des librairies tierces. Dans la plupart des cas, vous devriez uniquement vous en servir pour la gestion des options custom comme illustré dans l'exemple ci-dessus. C'est aussi une bonne idée de les encapsuler dans des [Plugins](plugins.html) pour éviter de les appliquer plusieurs fois par erreur.

+

Utilisez les mixins globaux prudemment et rarement, parce qu'ils affectent chacune des Vue créées, y compris celles des librairies tierces. Dans la plupart des cas, vous devriez uniquement vous en servir pour la gestion des options personnalisées comme illustré dans l'exemple ci-dessus. C'est aussi une bonne idée de les encapsuler dans des [Plugins](plugins.html) pour éviter de les appliquer plusieurs fois par erreur.

-## Stratégie de fusion des options custom +## Stratégie de fusion des options personnalisées -Quand les options custom sont fusionnées, elles utilisent la stratégie par défaut, qui est simplement d'écraser la valeur existante. Si vous souhaitez appliquer une stratégie de fusion custom pour une option custom, vous devez attacher une nouvelle fonction à `Vue.config.optionMergeStrategies`: +Quand les options personnalisées sont fusionnées, elles utilisent la stratégie par défaut, qui est simplement d'écraser la valeur existante. Si vous souhaitez appliquer une logique personnalisée pour la fusion d'une option personnalisée, vous devez attacher une nouvelle fonction à `Vue.config.optionMergeStrategies`: ``` js Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { From f11565235cf164aa265cf3a5c9c2064808a3893a Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 9 Jan 2017 23:56:26 +0100 Subject: [PATCH 21/24] [single-file-components.md] relecture Sylvain --- src/v2/guide/single-file-components.md | 40 +++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 7e98266be9..2d3e42548c 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -1,22 +1,22 @@ --- -title: Les composants monofichier +title: Les composants monofichiers type: guide order: 19 --- ## Introduction -Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#container' })` pour cibler un élément container dans le corps de chaque page. +Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#conteneur' })` pour cibler un élément conteneur dans le corps de chaque page. -Cela fonctionnera très bien pour des petits projets ou des projets de taille moyenne, pour lesquels Javascript est utilisé uniquement pour améliorer certains templates. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par Javascript, des désavantages se manifestent : +Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certains vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent : - **Les définitions globales** forcent à avoir un nom unique pour chaque composant -- **Les templates sous forme de chaîne de caractères** ne bénéficient pas de la coloration syntaxique et requiert l'usage de slashes disgracieux pour le HTML multilignes. -- **L'absence de support pour le css** signifie que le css ne peut pas être modularisé comme HTML et Javascript -- **L'absence d'étape de build** nous restreint au HTML et à Javascript ES5, sans pouvoir utiliser des preprocesseurs tels que Babel ou Pug (précédemment Jade). +- **Les templates sous forme de chaînes de caractères** ne bénéficient pas de la coloration syntaxique et requièrent l'usage de slashes disgracieux pour le HTML multiligne. +- **L'absence de support pour le CSS** signifie que le CSS ne peut pas être modularisé comme HTML et JavaScript +- **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (précédemment Jade). -Tous ces désavantages sont résolus par les composants monofichier avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. +Tous ces désavantages sont résolus par les composants monofichiers avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. Voici un exemple simple de fichier que nous appellerons `Hello.vue` : @@ -26,19 +26,19 @@ Maintenant nous avons : - [Une coloration syntaxique complète](https://github.com/vuejs/awesome-vue#syntax-highlighting) - [Des modules CommonJS](https://webpack.github.io/docs/commonjs.html) -- [Du css à la portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) +- [Du CSS à la portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) -Et comme promis, nous pouvons aussi utiliser des preprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités. +Et comme promis, nous pouvons aussi utiliser des préprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités. -Ces languages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre preprocesseur qui vous aide à être productif. Si vous utilisez Webpack avec `vue-loader`, vous aurez aussi un outil de premier choix pour les modules CSS. +Ces langages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre préprocesseur qui vous aide à être productif. Si vous utilisez Webpack avec `vue-loader`, vous aurez aussi un outil de premier choix pour les modules CSS. -### Qu'en est-il de la séparation des responsabilités ? +### Qu'en est-il de la séparation des préoccupations (Separation of concerns) ? -Une chose importante à souligner est que **la séparation des responsabilités n'est pas identique à la séparation des fichiers**. Dans le développement des interfaces utilisateurs modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes inter-dépendantes, il était plus intuitif de le diviser en petits composants faiblement couplés, et de les combiner. Au sein d'un composant, son template, sa logique et ses styles sont intrinsèquement couplés, et les réunir rend en réalité le composant plus cohérent et facile à maintenir. +Une chose importante à souligner est que **la séparation des préoccupations n'est pas identique à la séparation des fichiers**. Dans le développement des interfaces utilisateur modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes inter-dépendantes, il était plus intuitif de le diviser en petits composants faiblement couplés, et de les combiner. Au sein d'un composant, son template, sa logique et ses styles sont intrinsèquement couplés, et les réunir rend en réalité le composant plus cohérent et facile à maintenir. -Si vous n'aimez pas l'idée des composants monofichier, vous pouvez toujours tirer parti du hot-reloading et la pre-compilation pour mettre le css et le javascript dans des fichiers séparés. +Si vous n'aimez pas l'idée des composants monofichiers, vous pouvez toujours tirer parti du rechargement à chaud et la précompilation pour mettre le CSS et le JavaScript dans des fichiers séparés. ``` html @@ -52,21 +52,21 @@ Si vous n'aimez pas l'idée des composants monofichier, vous pouvez toujours tir ## Bien commencer -### Pour les utilisateurs qui ne connaissent pas les systemes de modules en Javascript +### Pour les utilisateurs qui ne connaissent pas les systemes de build de modules en JavaScript -Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications Javascript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : +Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications JavaScript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : - **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_. -- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir. +- **JavaScript moderne avec ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir. -Une fois que vous aurez pris une journée pour vous plonger dans ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading ! +Une fois que vous aurez pris une journée pour vous plonger dans ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et le rechargement à chaud ! -Ce template de projet utilise [Webpack](https://webpack.github.io/), un empaqueteur de modules qui prend des "modules" et les empaquette dans votre application finale. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). +Ce template de projet utilise [Webpack](https://webpack.github.io/), un empaqueteur de modules qui prend des "modules" et les empaquette dans votre application finale. Pour en apprendre plus sur Webpack, [cette vidéo](https://www.youtube.com/watch?v=WQue1AN93YU) est une bonne introduction. Une fois que vous aurez les bases, vous pourrez aussi parcourir [ce cours sur Egghead.io](https://egghead.io/courses/using-webpack-for-production-JavaScript-applications). -Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le paquet, et Vue offre le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) a déjà tout configuré pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation de vue-loader](https://vue-loader.vuejs.org). +Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le paquet, et Vue offre le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichiers `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) a déjà tout configuré pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation de vue-loader](https://vue-loader.vuejs.org). ### Pour les utilisateurs avancés -Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), de choisir un template qui vous convient et de suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). +Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandons d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), de choisir un template qui vous convient et de suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli). From 94f57eda3cc69b40f3839dd8d76eccdcdd5a3883 Mon Sep 17 00:00:00 2001 From: yann Date: Tue, 10 Jan 2017 16:36:46 +0100 Subject: [PATCH 22/24] single-file-components.md: relecture Haeresis --- src/v2/guide/single-file-components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 2d3e42548c..166133fb4d 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -6,7 +6,7 @@ order: 19 ## Introduction -Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#conteneur' })` pour cibler un élément conteneur dans le corps de chaque page. +Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#container' })` pour cibler un élément conteneur dans le corps de chaque page. Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certains vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent : @@ -16,7 +16,7 @@ Cela peut très bien fonctionner pour des petits projets ou des projets de taill - **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (précédemment Jade). -Tous ces désavantages sont résolus par les composants monofichiers avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. +Tous ces désavantages sont résolus par les **composants monofichiers** avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. Voici un exemple simple de fichier que nous appellerons `Hello.vue` : @@ -28,7 +28,7 @@ Maintenant nous avons : - [Des modules CommonJS](https://webpack.github.io/docs/commonjs.html) - [Du CSS à la portée limitée au composant](https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md) -Et comme promis, nous pouvons aussi utiliser des préprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités. +Et comme promis, nous pouvons aussi utiliser des préprocesseurs tels que Pug, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités. @@ -56,7 +56,7 @@ Si vous n'aimez pas l'idée des composants monofichiers, vous pouvez toujours ti Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications JavaScript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà : -- **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_. +- **Node Package Manager (NPM)**: Lisez le guide NPM [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_. - **JavaScript moderne avec ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir. From fe716c50327a67ce1b84dac9e29b65db0cde01e2 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 11 Jan 2017 11:20:00 +0100 Subject: [PATCH 23/24] single-file-components.md - anciennement Jade --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 166133fb4d..2325289245 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -13,7 +13,7 @@ Cela peut très bien fonctionner pour des petits projets ou des projets de taill - **Les définitions globales** forcent à avoir un nom unique pour chaque composant - **Les templates sous forme de chaînes de caractères** ne bénéficient pas de la coloration syntaxique et requièrent l'usage de slashes disgracieux pour le HTML multiligne. - **L'absence de support pour le CSS** signifie que le CSS ne peut pas être modularisé comme HTML et JavaScript -- **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (précédemment Jade). +- **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (anciennement Jade). Tous ces désavantages sont résolus par les **composants monofichiers** avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. From c5153c253c9007534893ac6c41821d4589b22fe3 Mon Sep 17 00:00:00 2001 From: yann Date: Sat, 14 Jan 2017 10:50:20 +0100 Subject: [PATCH 24/24] mixins.md : traduction commentaire manquant. single-file-components.md --- src/v2/guide/mixins.md | 2 +- src/v2/guide/single-file-components.md | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 4c5ac6d044..e7f7101058 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -11,7 +11,7 @@ Les mixins offrent une manière flexible de créer des fonctionnalités réutili Exemple: ``` js -// define a mixin object +// définir un objet mixin var myMixin = { created: function () { this.hello() diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 2325289245..c15d8fcd66 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -8,14 +8,13 @@ order: 19 Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#container' })` pour cibler un élément conteneur dans le corps de chaque page. -Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certains vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent : +Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certaines vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent : - **Les définitions globales** forcent à avoir un nom unique pour chaque composant - **Les templates sous forme de chaînes de caractères** ne bénéficient pas de la coloration syntaxique et requièrent l'usage de slashes disgracieux pour le HTML multiligne. - **L'absence de support pour le CSS** signifie que le CSS ne peut pas être modularisé comme HTML et JavaScript - **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (anciennement Jade). - Tous ces désavantages sont résolus par les **composants monofichiers** avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify. Voici un exemple simple de fichier que nous appellerons `Hello.vue` :