Skip to content

intallation.md #41

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 2 commits into from
Mar 6, 2017
Merged
Changes from 1 commit
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
70 changes: 35 additions & 35 deletions src/v2/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ ro_gz_size: "18.71"

### Compatibilité

<p class="tip">**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).**</p>Vue **ne** supporte **pas** IE8 et les versions antérieures, car il utilise des fonctionnalités ECMAScript 5 qui ne peuvent pas être émulées sur IE8. Cela dit, Vue supporte tous les [navigateurs compatibles ECMAScript 5](http://caniuse.com/#feat=es5).
Vue **ne** supporte **pas** IE8 et les versions antérieures, car il utilise des fonctionnalités ECMAScript 5 qui ne peuvent pas être émulées sur IE8. Cela dit, Vue supporte tous les [navigateurs compatibles ECMAScript 5](http://caniuse.com/#feat=es5).

### Notes de version

Expand Down Expand Up @@ -46,24 +46,24 @@ $ npm install vue

## CLI

Vue.js provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds:
Vue.js offre une [interface en ligne de commande officielle](https://github.com/vuejs/vue-cli) pour mettre rapidement en place les bases d'une application monopage ambitieuse. Il offre une série de *builds* pré-configurés pour un *workflow frontend* moderne. Cela ne prend que quelques minutes pour commencer et lancer des rechargements à chaud, de l'analyse syntaxique à la sauvegarde, et des *builds* prêts pour la production :
Copy link

Choose a reason for hiding this comment

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

Je préfère "CLI" à "interface en ligne de commande" (avis personnel)

de l'analyse syntaxique lors de la sauvegarde et des builds...

"lors de la" me parait plus cohérent et compréhensible que "à la"
enlève la virgule avant le "et", bien que l'original a la "," en français il faut éviter une virgule avant un "et"

Choose a reason for hiding this comment

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

je suggère d'ajouter CLI entre parenthèses derrière pour contenter tout le monde

Copy link
Member Author

Choose a reason for hiding this comment

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

De mémoire il me semble avoir vu « la CLI » quelque part ce qui sous entend qu'on a oublier de le traduire quelque part ? Je vais faire une petite recherche.


``` bash
# install vue-cli
# installer vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
# créer un nouveau projet en utilisant le template "webpack"
$ vue init webpack my-project
# install dependencies and go!
# installer les dépendances et go !
Copy link

Choose a reason for hiding this comment

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

installer les dépendances et c'est parti !

$ cd my-project
$ npm install
$ npm run dev
```

<p class="tip">The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through <a href="./">the guide</a> without any build tools before using the CLI.</p>
<p class="tip">Utiliser la CLI nécessite des connaissances préalables en Node.js et les outils de *build* associés. Si vous êtes nouveau sur Vue ou les outils de *build front-end*, nous vous recommandons fortement de parcourir <a href="./">le guide</a> sans aucun outil de *build* avant d'utiliser l'interface CLI.</p>

## Explanation of Different Builds
## Explication des différents *builds*

In the [`dist/` directory of the NPM package](https://unpkg.com/vue@latest/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them:
Dans le [dossier `dist/` du package NPM](https://unpkg.com/vue@latest/dist/) vous trouverrez plusieurs *builds* différents de Vue.js. Voici un aperçu des différences entre chacun d'eux :

| | UMD | CommonJS | ES Module |
| --- | --- | --- | --- |
Expand All @@ -72,41 +72,41 @@ In the [`dist/` directory of the NPM package](https://unpkg.com/vue@latest/dist/
| **Full (production)** | vue.min.js | - | - |
| **Runtime-only (production)** | vue.runtime.min.js | - | - |

### Terms
### Termes

- **Full**: builds that contains both the compiler and the runtime.
- **Full**: des *builds* qui contiennent la partie Compiler ainsi que la version Runtime.
Copy link

Choose a reason for hiding this comment

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

des builds qui contiennent la partie Compiler ainsi que la partie Runtime.

même si cela fait une répétition, on parle de bout de code (donc d'une partie) mais pas d'une version. De plus je mettrai bien "Compiler" et "Runtime" en gras pour mettre en évidence que cela concerne les deux paragraphes suivants

Copy link
Member Author

Choose a reason for hiding this comment

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

En fait Compiler est une partie de code qui n'existe pas seul. Alors que Runtime est un code qui existe seul et qui est une version de vue. Je préfère le préciser ainsi.


- **Compiler**: code that is responsible for compiling template strings into JavaScript render functions.
- **Compiler**: du code qui est responsable de compiler les chaînes de caractère de template en des fonctions de rendu en JavaScript.
Copy link

Choose a reason for hiding this comment

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

le code qui est responsable de la compilation des chaînes de caractère de template en des fonctions de rendu en JavaScript.


- **Runtime**: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
- **Runtime**: du code qui est responsable de la création des instances de Vue, de faire le rendu et les modifications du DOM virtuel, C'est à dire tout sauf ce que fait la partie Compiler.
Copy link

Choose a reason for hiding this comment

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

le code qui...

C'est à dire tout, sauf ce que fait la partie Compiler.

je rajouterais une virgule pour accentuer le sauf (avis purement personnel)

Copy link
Member Author

Choose a reason for hiding this comment

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

J'approuve.


- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue](https://unpkg.com/vue) is the Runtime + Compiler UMD build (`vue.js`).
- **[UMD](https://github.com/umdjs/umd)**: Les *builds* UMD peuvent être utilisés dans un navigateur directement avec la balise `<script>`. Le fichier par défaut du CDN Unpkg à l'adresse [https://unpkg.com/vue](https://unpkg.com/vue) est le *build* UMD Runtime + Compiler (`vue.js`).
Copy link

Choose a reason for hiding this comment

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

Les builds UMD peuvent être utilisés directement dans un navigateur avec la...


- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue.runtime.common.js`).
- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: Les *builds* CommonJS sont prévus pour une utilisation avec les vieux outils de *bundle* comme [browserify](http://browserify.org/) ou [webpack 1](https://webpack.github.io). Le fichier par défaut pour ces outils (`pkg.main`) est le *build* CommonJS Runtime (`vue.runtime.common.js`).
Copy link

Choose a reason for hiding this comment

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

Le fichier par défaut pour ces outils (pkg.main) contient uniquement le build CommonJS Runtime (vue.runtime.common.js).

il manquait la traduction de only qui me parait important, en espérant que ma proposition soit la plus proche de l'original. Une meilleure proposition ?

Copy link
Member Author

Choose a reason for hiding this comment

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

Nope sur ce coup c'est parceque Runtime-only on le traduit juste par Runtime. Effectivement là il y a pas le trait d'union mais on parle bien de la version Runtime sous forme CommonJS.


- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: ES module builds are intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [rollup](http://rollupjs.org/). The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue.runtime.esm.js`).
- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: Les *builds* ES module sont prévus pour une utilisation avec les outils de *bundle* modernes comme [webpack 2](https://webpack.js.org) ou [rollup](http://rollupjs.org/). Le fichier par défaut pour ses outils (`pkg.module`) est le *build* ES Module Runtime (`vue.runtime.esm.js`).
Copy link

Choose a reason for hiding this comment

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

Le fichier par défaut pour ces outils (pkg.module) contient uniquement le build ES Module Runtime (vue.runtime.esm.js).

même remarque qu'au-dessus et aussi remplace "ses" par "ces"

Copy link
Member Author

Choose a reason for hiding this comment

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

Même punition. Ok pour (c|s)es


### Runtime + Compiler vs. Runtime-only
### Runtime + Compiler vs. Runtime seul

If you need to compile templates on the fly (e.g. passing a string to the `template` option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:
Si vous avez besoin de compiler des templates en temps réel (ex. : passer une chaîne de caractère à l'option `template`, ou monter un élément en vous servant de sa représentation HTML dans le DOM comme template) vous aurez besoin du compilateur et donc du *build* Full :

``` js
// this requires the compiler
// ceci a besoin d'un compilateur
new Vue({
template: `<div>{{ hi }}</div>`
})

// this does not
// ceci non
Copy link

Choose a reason for hiding this comment

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

ceci n'en a pas besoin

new Vue({
render (h) {
return h('div', this.hi)
}
})
```

When using `vue-loader` or `vueify`, templates inside `*.vue` files are pre-compiled into JavaScript at build time. You don't really need the compiler in the final bundle, and can therefore use the runtime-only build.
En utilisant `vue-loader` ou `vueify`, les templates à l'intérieur des fichiers `*.vue` sont pré-compilés en JavaScript pendant l'étape de *build*. Vous n'avez donc pas réellement besoin du compilateur dans le *bundle* final, et pouvez dans ce cas utiliser la version du *build* Runtime.
Copy link

Choose a reason for hiding this comment

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

supprime la "," avant le "et" : "dans le bundle final et pouvez"


Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler:
Puisque le *build* Runtime est approximativement 30% plus léger que son homologue le *build* Full, vous devriez l'utiliser autant que possible. Si vous souhaitez toujours utiliser le *build* Full à la place, vous avez besoin de configurer un alias dans votre outil de *bundle* :

#### Webpack

Expand All @@ -115,7 +115,7 @@ module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' pour webpack 1
}
}
}
Expand All @@ -138,7 +138,7 @@ rollup({

#### Browserify

Add to your project's `package.json`:
Ajoutez au fichier `package.json` de votre projet :

``` js
{
Expand All @@ -149,17 +149,17 @@ Add to your project's `package.json`:
}
```

### Development vs. Production Mode
### Mode dévelopement vs. mode production

Development/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.
Les modes développement et production sont écrit en dure dans les *builds* UMD : les fichiers non minifiés son pour le développement, et les fichier minifiés sont pour la production.
Copy link

Choose a reason for hiding this comment

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

Les modes développement et production sont écrits en dur dans

il manque un s à écrits
j'ai un doute sur l'orthographe de dur, je mettrais pas de e

les fichiers non minifiés sont pour le développement,

là je suis sur qu'il manque un "t"

Copy link
Member Author

Choose a reason for hiding this comment

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

Tu as raison « dur »


CommonJS and ES Module builds are intended for bundlers, therefore we don't provide minified versions for them. You will be responsible for minifying the final bundle yourself.
Les *builds* CommonJS et ES Module sont prévus pour les outils de *bundle*, donc nous ne fournissons pas de version minifié pour eux. Vous aurez à votre charge de minifier le *bundle* final vous-même.
Copy link

Choose a reason for hiding this comment

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

Vous aurez à votre charge la minification du bundle final.

"à votre charge" et "vous-même" sont pour moi un pléonasme

Copy link
Member Author

@MachinisteWeb MachinisteWeb Mar 6, 2017

Choose a reason for hiding this comment

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

Je comprends le point. Je conserve tout de même car on pourrait très bien dire.

« Vous aurez à votre charge de faire minifier le bundle final par quelqu'un d'autre. »

Mais tu n'as pas totalement tord puisque dans mon cas je rajoute « faire » :)


CommonJS and ES Module builds also preserve raw checks for `process.env.NODE_ENV` to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing `process.env.NODE_ENV` with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.
Les *builds* CommonJS et ES Module contiennent une utilisation de `process.env.NODE_ENV` pour déterminer le mode qu'ils doivent suivre. Vous devriez utiliser une configuration d'outil de *bundle* appropriée pour remplacer ces variables afin de contrôler avec quel mode Vue doit être exécuté. Remplacer `process.env.NODE_ENV` avec une chaîne de caractère littérale permet aux outils de minification comme UglifyJS de complètement retirer les pends de code réservés au développement, réduisant ainsi la taille du fichier final.
Copy link

Choose a reason for hiding this comment

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

Vous devriez utiliser une configuration d'outil de bundle appropriée pour remplacer ces variables d'environnements afin de contrôler lequel des modes Vue exécutera.


#### Webpack

Use Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
Utiliser la fonction [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) de Webpack :

``` js
var webpack = require('webpack')
Expand All @@ -179,7 +179,7 @@ module.exports = {

#### Rollup

Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):
Utilisez le [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) :

``` js
const replace = require('rollup-plugin-replace')
Expand All @@ -196,19 +196,19 @@ rollup({

#### Browserify

Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle.
Appliquez une transformation [envify](https://github.com/hughsk/envify) globale à votre *bundle*.

``` bash
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```

Also see [Production Deployment Tips](deployment.html).
Référez vous également aux [conseils de déploiment en production](deployment.html).

### CSP environments
### Environnements CSP

Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of `new Function()` for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.
Certains environnements, tels que les Applications de Google Chrome, font respecter la politique de sécurité de contenu (*Content Security Policy* - CSP), qui ne permet pas l'utilisation de `new Function()` pour évaluer les expressions. Le *build standalone* a besoin de cette fonctionnalité pour compiler les templates, elle n'est donc pas utilisable dans ces environnements.

On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), your templates will be precompiled into `render` functions which work perfectly in CSP environments.
D'un autre côté, le *build runtime* respecte pleinement les CSP. Quand vous utilisez le *build runtime* avec [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) ou [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), vos templates vont être pré-compilé dans les fonctions `render` qui fonctionnent parfaitement dans des environnements CSP.
Copy link

Choose a reason for hiding this comment

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

vos templates vont être pré-compilés dans

manque un "s" à pré-compilé


## Build de développement

Expand All @@ -223,7 +223,7 @@ npm run build

## Bower

Only UMD builds are available from Bower.
Seulement les *builds* UMD sont disponibles depuis Bower.

``` bash
# dernière version stable
Expand Down