-
Notifications
You must be signed in to change notification settings - Fork 2
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
Changes from 3 commits
019352b
704cd2a
09cb779
f9690d0
02c5dac
f646694
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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). | ||
|
||
### HTML | ||
|
||
|
@@ -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` --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
C'est un terme propre à Vue que nous concervons donc tel quel. |
||
<!-- <router-link> sera rendu en tag `<a>` par défaut --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<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). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
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)
|
||
|
||
// 1. Define route components. | ||
// These can be imported from other files | ||
// 1. Définir des composants. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// Chaque route doit corresponde à un composant. Le "composant" peut | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// soit être un véritable composant créé via Vue.extend(), ou juste un | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// 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`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
}) | ||
|
||
// 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. garder There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 :
ou
En fait le point ici c'est que si tu mets les tick tu es censé y écrire un pend de code. Et comme |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.