Skip to content

Commit 7f6afbd

Browse files
Merge pull request #4 from Kocal/essentials/getting-started.md
Traduction de `essentials/getting-started.md`
2 parents 3137511 + f646694 commit 7f6afbd

File tree

2 files changed

+31
-31
lines changed

2 files changed

+31
-31
lines changed

docs/en/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
- [Installation](installation.md)
88
- Essentiel
9-
- [Pour commencer (En)](essentials/getting-started.md)
9+
- [Pour commencer](essentials/getting-started.md)
1010
- [Dynamic Route Matching (En)](essentials/dynamic-matching.md)
1111
- [Nested Routes (En)](essentials/nested-routes.md)
1212
- [Programmatic Navigation (En)](essentials/navigation.md)

docs/en/essentials/getting-started.md

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# 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).*
1+
# Pour commencer
22

3-
> We will be using [ES2015](https://github.com/lukehoban/es6features) in the code samples in the guide.
3+
> Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide.
44
5-
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:
5+
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 :
66

7-
> All examples will be using the full version of Vue to make template parsing possible. See more details [here](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).
7+
> Tous les exemples utiliseront la version complète 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).
88
99
### HTML
1010

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

1515
<div id="app">
16-
<h1>Hello App!</h1>
16+
<h1>Bonjour l'application !</h1>
1717
<p>
18-
<!-- use router-link component for navigation. -->
19-
<!-- specify the link by passing the `to` prop. -->
20-
<!-- <router-link> will be rendered as an `<a>` tag by default -->
21-
<router-link to="/foo">Go to Foo</router-link>
22-
<router-link to="/bar">Go to Bar</router-link>
18+
<!-- utilisez le composant `router-link` pour la navigation. -->
19+
<!-- spécifiez le lien en le passant à la prop `to` -->
20+
<!-- <router-link> sera rendu en tag `<a>` par défaut -->
21+
<router-link to="/foo">Aller à Foo</router-link>
22+
<router-link to="/bar">Aller à Bar</router-link>
2323
</p>
24-
<!-- route outlet -->
25-
<!-- component matched by the route will render here -->
24+
<!-- balise pour le composant router-view -->
25+
<!-- le composant correspondant à la route sera rendu ici -->
2626
<router-view></router-view>
2727
</div>
2828
```
2929

3030
### JavaScript
3131

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

35-
// 1. Define route components.
36-
// These can be imported from other files
35+
// 1. Définissez les composants de route.
36+
// Ces derniers peuvent être importés depuis d'autre fichier
3737
const Foo = { template: '<div>foo</div>' }
3838
const Bar = { template: '<div>bar</div>' }
3939

40-
// 2. Define some routes
41-
// Each route should map to a component. The "component" can
42-
// either be an actual component constructor created via
43-
// Vue.extend(), or just a component options object.
44-
// We'll talk about nested routes later.
40+
// 2. Définissez des routes.
41+
// Chaque route doit correspondre à un composant. Le « composant » peut
42+
// soit être un véritable composant créé via `Vue.extend()`, ou juste un
43+
// objet d'options.
44+
// Nous parlerons plus tard des routes imbriquées.
4545
const routes = [
4646
{ path: '/foo', component: Foo },
4747
{ path: '/bar', component: Bar }
4848
]
4949

50-
// 3. Create the router instance and pass the `routes` option
51-
// You can pass in additional options here, but let's
52-
// keep it simple for now.
50+
// 3. Créez l'instance du routeur et passez l'option `routes`.
51+
// Vous pouvez également passer des options supplémentaires,
52+
// mais nous allons faire simple pour l'instant.
5353
const router = new VueRouter({
54-
routes // short for routes: routes
54+
routes // raccourci pour `routes: routes`
5555
})
5656

57-
// 4. Create and mount the root instance.
58-
// Make sure to inject the router with the router option to make the
59-
// whole app router-aware.
57+
// 5. Créez et montez l'instance de Vue.
58+
// Soyez sûr d'injecter le routeur avec l'option `router` pour
59+
// permettre à l'application tout entière d'être à l'écoute du routeur.
6060
const app = new Vue({
6161
router
6262
}).$mount('#app')
6363

64-
// Now the app has started!
64+
// L'application est maintenant en marche !
6565
```
6666

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

69-
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).
69+
Notez qu'un `<router-link>` obtiendra automatiquement la classe `.router-link-active` lorsque sa route cible correspond à la route actuelle. Vous pouvez en apprendre plus à propos de cela dans sa [documentation d'API](../api/router-link.md).

0 commit comments

Comments
 (0)