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.

Sign up for GitHub

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

intallation.md #41

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7889049
Màj : intallation.md
MachinisteWeb Mar 4, 2017
7c260d7
Update from forresst
MachinisteWeb Mar 6, 2017
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
View file
Open in desktop
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 [CLI](https://github.com/vuejs/vue-cli) (interface en ligne de commande) officielle 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 :

``` 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 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**: 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**: le 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.

- **[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 directement 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`).

- **[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`).

- **[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 ces outils (`pkg.module`) est le *build* ES Module Runtime (`vue.runtime.esm.js`).

### 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 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.

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 •
edited
Loading

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