Skip to content

Traduction de essentials/getting-started.md #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 18, 2017
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

- [Installation](installation.md)
- Essentiel
- [Pour commencer (En)](essentials/getting-started.md)
- [Pour commencer](essentials/getting-started.md)
- [Dynamic Route Matching (En)](essentials/dynamic-matching.md)
- [Nested Routes (En)](essentials/nested-routes.md)
- [Programmatic Navigation (En)](essentials/navigation.md)
Expand Down
60 changes: 30 additions & 30 deletions docs/en/essentials/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Getting Started (En) <br><br> *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/vue-router).*
# Pour commencer

> We will be using [ES2015](https://github.com/lukehoban/es6features) in the code samples in the guide.
> Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide.

Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them. Here's a basic example:
Créer une application monopage avec Vue.js + vue-router est vraiment simple. Avec Vue.js, nous concevons déjà notre application avec des composants. En ajoutant vue-router dans notre application, tout ce qu'il nous reste à faire est de relier nos composants aux routes, et de laisser vue-router faire le rendu. Voici un exemple de base :

> All examples will be using the standalone version of Vue to make template parsing possible. See more details [here](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build).
> Tous les exemples utiliseront la version standalone de Vue pour rendre l'analyse de template possible. Plus de détails [ici](https://fr.vuejs.org/guide/installation.html#Runtime-Compiler-vs-Runtime-seul).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

la version complète

La Version « standalone » a été modifié en la version « full » (Compiler + Runtime vs Runtime-only)

J'ai fait une PR dans ce sens pour la version EN, elle est passé. Il faut que tu mettes à jour ta branche vis à vis de vuejs-fr/vue-router:working et que tu résolves le confilt en concervant le terme « complète » dans ta traduction.


### HTML

Expand All @@ -13,57 +13,57 @@ Creating a Single-page Application with Vue.js + vue-router is dead simple. With
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<h1>Hello App!</h1>
<h1>Bonjour l'application !</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<!-- utilisez le composant router-link pour la navigation. -->
<!-- spécifiez le lien en le passant à la propriété `to` -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spécifiez le lien en le passant à la prop to

C'est un terme propre à Vue que nous concervons donc tel quel.

<!-- <router-link> sera rendu en tag `<a>` par défaut -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

router-link (entre `)

<router-link to="/foo">Aller à Foo</router-link>
<router-link to="/bar">Aller à Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<!-- balise pour le composant router-view -->
<!-- le composant correspondant à la route sera rendu ici -->
<router-view></router-view>
</div>
```

### JavaScript

``` js
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call Vue.use(VueRouter).
// 0. Si vous utilisez un système de module (e.g. via vue-cli), il faut importer Vue et VueRouter et ensuite appeler Vue.use(VueRouter).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(ex : via vue-cli)

On traduit tout les e.g. par ex même si ça existe tout de même en français car c'est moins rependu que « ex »

On ferra une PR global pour changer tous les « ex » par « par ex. » plus tard (déjà discuté dans une PR)

Vue.use(VueRouter). (entre `)


// 1. Define route components.
// These can be imported from other files
// 1. Définir des composants.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Définissez les composants de route

Pour être cohérant avec ta traduction plus haute. Ou inversement plus haut tu passe les « ez » à l'impératif

// Ces derniers peuvent être importés depuis d'autre fichier
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
// 2. Définir des routes.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Définissez des routes

// Chaque route doit corresponde à un composant. Le "composant" peut
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correspondre

« composant »

// soit être un véritable composant créé via Vue.extend(), ou juste un
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Même si pas das original ajoute Vue.extend() (entre `)

// objet d'options.
// Nous parlerons plus tard des routes imbriquées.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
// 3. Créer l'instance du routeur et passer l'option `routes`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Créez

Passez

// Vous pouvez également passer des options supplémentaires,
// mais nous allons faire simple pour l'instant.
const router = new VueRouter({
routes // short for routes: routes
routes // raccourci pour routes: routes
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

même si pas dans original, ajoute routes: routes (entre `)

})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
// 5. Créer et monter l'instance de Vue.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Créez et montez

// Soyez sûr d'injecter le routeur avec l'option `router` pour
// permettre à l'application tout entière d'être à l'écoute du routeur.
const app = new Vue({
router
}).$mount('#app')

// Now the app has started!
// L'application est maintenant en marche !
```

You can also checkout this example [live](http://jsfiddle.net/yyx990803/xgrjzsup/).
Vous pouvez aussi regarder cet [exemple](http://jsfiddle.net/yyx990803/xgrjzsup/).

Notice that a `<router-link>` automatically gets the `.router-link-active` class when its target route is matched. You can learn more about it in its [API reference](../api/router-link.md).
Notez qu'un `<router-link>` obtiendra automatiquement la classe `router-link-active` lorsque sa route cible correspond avec la route actuelle. Vous pouvez en apprendre plus à propos de cela dans sa [documentation d'API](../api/router-link.md).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

garder .router-link-active avec le point ou écrire la classe router-link-active sans les ` (je préfère rester fidèle à l'original).

Copy link
Member Author

@Kocal Kocal May 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je comprend pourquoi tu veux rester fidèle à l'original, mais ça m'embête un peu de faire un pléonasme ^^

Quand on écrit .router-link-active, on sait qu'on parle d'une classe.
Écrire « la classe .router-link-active » m'embête un peu, mais je vais apporter les modifications nécessaires.

Copy link
Member

@MachinisteWeb MachinisteWeb May 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compris pour le pléonasme. Pour essayer d'effacer ta gène, essaye de voir si elle y est toujours là dedans :

Utiliser la balise <a> pour faire des liens. Avec la classe .btn celui-ci ressemblera a un bouton mais attentions à l'attribut target="_blank" qui ouvrira le lien dans un nouvel onglet !

ou

Utiliser la balise a pour faire des liens. Avec la classe btn celui-ci ressemblera a un bouton mais attentions à l'attribut target en mode blank qui ouvrira le lien dans un nouvel onglet !

En fait le point ici c'est que si tu mets les tick tu es censé y écrire un pend de code. Et comme router-link-active n'est pas un pend de code « compréhensible » il est mieux avec un point (ou alors comme ça class="router-link-active" mais la on s'éloigne vraiment de l'original et ta gène ressenti du point de vu pléonasme est à la fête !