From 3bfc7b8b28f6483df1580699c81d46860d84b227 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 14 Sep 2017 13:26:05 +0200 Subject: [PATCH 01/11] Relecture de index.md Signed-off-by: Bruno Lesieur --- en/guide/index.md | 108 +++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 59 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index c490c0745..63feac3c2 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -1,82 +1,75 @@ --- title: Introduction -description: "The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born." +description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annoncait Next.js, un framework pour les applications React rendues côtés serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évident: Nuxt.js était né." --- -> The 25th of October 2016, the team behind [zeit.co](https://zeit.co/), announced [Next.js](https://zeit.co/blog/next), a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered [Vue.js](https://vuejs.org) applications the same way as Next.js was obvious: **Nuxt.js** was born. +> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annoncait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côtés serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://vuejs.org) était évident: Nuxt.js était né. -## What is Nuxt.js ? +## Qu'est-ce que Nuxt.js ? -Nuxt.js is a framework for creating Universal Vue.js Applications. +Nuxt.js est un framework pour créer des applications Vue.js universelles. -Its main scope is **UI rendering** while abstracting away the client/server distribution. +Son champ principal est le **rendu UI** tout en abstrayant la distribution client/server. -Our goal is to create a framework flexible enough so that you can use it as a main project base or in addition to your current project based on Node.js. +Notre but est de créer un framework suffisament flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sous Node.js. -Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. +Nuxt.js prédéfinit toute la configuration nécessaire pour rendre votre développement d'une application Vue.js rendue côté serveur plus agréable. -In addition, we also provide another deployment option called: *nuxt generate*. It will build a **Static Generated** Vue.js Application. -We believe that option could be the next big step in the development of Web Applications with microservices. +En outre, nous fournissons également une autre option de déploiement appelée: *nuxt generate*. Elle permet de construire une application Vue.js générée statiquement (**Static Generated**). +Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications Web avec microservices. -As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc. +En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre le côté client et le côté serveur telles que les données asynchrones, les *middlewares*, les *layouts*, etc. -## How it Works +## Comment ça marche -![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png) - -Nuxt.js includes the following to create a rich web application development: +![Vue avec Webpack et Babel](https://i.imgur.com/avEUftE.png) +Nuxt.js comprends les éléments suivants afin de créer une expérience de développement optimale: - [Vue 2](https://github.com/vuejs/vue) - [Vue-Router](https://github.com/vuejs/vue-router) -- [Vuex](https://github.com/vuejs/vuex) (included only when using the [store option](/guide/vuex-store)) +- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option "store"](/guide/vuex-store) est activée) - [Vue-Meta](https://github.com/declandewet/vue-meta) -A total of only **57kb min+gzip** (53kb with vuex). +Un total de seulement **28kb min+gzip** (31kb avec vuex). -Under the hood we use [Webpack](https://github.com/webpack/webpack) with [vue-loader](https://github.com/vuejs/vue-loader) and [babel-loader](https://github.com/babel/babel-loader) to bundle, code-split and minify your code. +Sous le capot, nous utilisons [Webpack](https://github.com/webpack/webpack) avec [vue-loader](https://github.com/vuejs/vue-loader) et [babel-loader](https://github.com/babel/babel-loader) pour regrouper (*bundle*), *code-split* et minifier votre code. -## Features +## Fonctionnalités -- Write Vue Files -- Automatic Code Splitting -- Server-Side Rendering -- Powerful Routing System with Asynchronous Data -- Static File Serving +- Écris des fichiers Vue (**.vue*) +- *Code splitting* automatique +- Rendu coté serveur (*Server-Side Rendering* / SSR) +- Système de routage puissant à l'aide des données asynchrones (*Asynchronous Data*) +- Sert les fichiers statiques (*Static File Serving*) - ES6/ES7 Transpilation -- Bundling and minifying of your JS & CSS -- Managing `` element (title, meta...) -- Hot module replacement in Development -- Pre-processor: SASS, LESS, Stylus, etc -- HTTP/2 push headers ready -- Extending with Modular architecture +- Bundle et minification de vos fichiers JS et CSS +- Management des éléments *Head* +- Hot reloading pendant le développement +- Pré-processeur: SASS, LESS, Stylus, etc -## Schema +## Schéma -This schema shows what is called by nuxt.js when the server is called or when the user navigate through the app via ``: +Ce schéma (en anglais) montre ce qui est invoqué par nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de ``: ![nuxt-schema](/nuxt-schema.png) -## Server Rendered (Universal SSR) - -You can use nuxt.js as a framework to handle all the UI rendering of your project. - -When launching `nuxt`, it will start a development server with hot-reloading and [vue-server-renderer](https://ssr.vuejs.org/en/) configured to automatically server-render your application. +## Rendu côté serveur -### Single Page Applications (SPA) +Vous pouvez utiliser nuxt.js en tant que framework afin de gérer le rendu complet de l'UI de votre projet. -If for any reason you prefer not using server side rendering or need static hosting for your applications, you can simply use SPA mode using `nuxt --spa`. Combination with *generate* feature gives a powerful SPA deployment mechanism without need to use Node.js runtime or any special server handling. +Lors de la commande `nuxt`, il va démarrer un serveur de développement avec *hot-reloading* et *vue-server-renderer* configurés afin de servir atuomatiquement votre application rendue côté serveur. -Take a look at [the commands](/guide/commands) to learn more about usage. +Jetez un oeil aux [commandes](/guide/commands) pour en savoir plus. -If you already have a server, you can plug Nuxt.js by using it as a middleware, there is no restriction at all when using nuxt.js for developing your Universal Web Applications, see the [Using Nuxt.js Programmatically](/api/nuxt) guide. +Si vous avez déjà un serveur, vous pouvez greffer nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez nuxt.js pour développer votre application web universelle; voir le guide [Using Nuxt.js Programmatically](/api/nuxt). -## Static Generated (Pre Rendering) +## Génération d'applications statique -The big innovation of nuxt.js comes here: `nuxt generate` +La grande innovation de nuxt.js est: `nuxt generate` -When building your application it will generate the HTML for every one of your routes and store it in a file. +Lors de la création de votre application, il générera le code HTML de chacune de vos routes pour le stocker dans un fichier. -Example: +Exemple: ```bash -| pages/ @@ -84,8 +77,7 @@ Example: ----| index.vue ``` -Will generate: - +Va générer: ``` -| dist/ ----| about/ @@ -93,20 +85,18 @@ Will generate: ----| index.html ``` -This way, you can host your generated web application on any static hosting! - -The best example is this website. It is generated and hosted on GitHub Pages: - -- [Source code](https://github.com/nuxt/nuxtjs.org) -- [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) +De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique! -We don't want to manually generate the application every time we update the [docs repository](https://github.com/nuxt/docs), so each push made calls an AWS Lambda function which: +Le meilleur exemple est ce site web. Il est généré et hébergé sur GitHub Pages: +- [Code source](https://github.com/nuxt/nuxtjs.org) (en anglais) +- [Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais) -1. Clone the [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org) -2. Install the dependencies via `npm install` -3. Run `nuxt generate` -4. Push the `dist` folder to the `gh-pages` branch +Nous ne voulons pas devoir générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui: +1. Clone le [répertoire nuxtjs.org](https://github.com/nuxt/nuxtjs.org) +2. Installe les dépendances via `npm install` +3. Lance `nux generate` +4. Déploie le dossier `dist` sur la branche `gh-pages` -We now have a **Serverless Static Generated Web Application** :) +Et nous voilà avec une **Serverless Static Generated Web Application** :) -We can go further by thinking of an e-commerce web application made with `nuxt generate` and hosted on a CDN, and every time a product is out of stock or back in stock, we regenerate the web app. But if the user navigates through the web app in the meantime, it will be up to date thanks to the API calls made to the e-commerce API. No need to have multiple instances of a server + a cache anymore! +Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN, et regénérée à chaque fois qu'un produit est en rupture de stock ou de retour en stock. Mais si l'utilisateur navigue à sur l'application en attendant, il vera les informations à jour grâce aux appels API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur ainsi qu'un cache supplémentaire! From 5c5da496a60906b877c1c0d400c38d1931dce410 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 14 Sep 2017 14:15:02 +0200 Subject: [PATCH 02/11] =?UTF-8?q?Relecture=20premi=C3=A8re=20partie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- en/guide/index.md | 63 ++++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index 63feac3c2..a7763f4aa 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -1,65 +1,66 @@ --- title: Introduction -description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annoncait Next.js, un framework pour les applications React rendues côtés serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évident: Nuxt.js était né." +description: « Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.js, un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évidente : Nuxt.js était né. » --- -> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annoncait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côtés serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://vuejs.org) était évident: Nuxt.js était né. +> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annonçait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://fr.vuejs.org) était évident : Nuxt.js était né. -## Qu'est-ce que Nuxt.js ? +## Nuxt.js, qu’est-ce que c’est ? Nuxt.js est un framework pour créer des applications Vue.js universelles. -Son champ principal est le **rendu UI** tout en abstrayant la distribution client/server. +Son champ principal est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution au client et au serveur. -Notre but est de créer un framework suffisament flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sous Node.js. +Notre but est de créer un framework suffisamment flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sur Node.js. -Nuxt.js prédéfinit toute la configuration nécessaire pour rendre votre développement d'une application Vue.js rendue côté serveur plus agréable. +Nuxt.js prédéfinit toute la configuration nécessaire pour faire de votre développement d'application Vue.js rendue côté serveur quelque chose d'agréable. -En outre, nous fournissons également une autre option de déploiement appelée: *nuxt generate*. Elle permet de construire une application Vue.js générée statiquement (**Static Generated**). -Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications Web avec microservices. +En outre, nous fournissons également une autre option de déploiement appelée : *nuxt generate*. Elle permet de construire une application Vue.js **générée statiquement**. +Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications web avec microservices. -En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre le côté client et le côté serveur telles que les données asynchrones, les *middlewares*, les *layouts*, etc. +En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre côté client et serveur telles que les données asynchrones, les *middlewares*, les *layouts*, etc. ## Comment ça marche -![Vue avec Webpack et Babel](https://i.imgur.com/avEUftE.png) +![Vue avec webpack et Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale : -Nuxt.js comprends les éléments suivants afin de créer une expérience de développement optimale: - [Vue 2](https://github.com/vuejs/vue) -- [Vue-Router](https://github.com/vuejs/vue-router) -- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option "store"](/guide/vuex-store) est activée) -- [Vue-Meta](https://github.com/declandewet/vue-meta) +- [Vue Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée) +- [Vue Meta](https://github.com/declandewet/vue-meta) -Un total de seulement **28kb min+gzip** (31kb avec vuex). +Un total de seulement **57ko min+gzip** (53ko avec Vuex). -Sous le capot, nous utilisons [Webpack](https://github.com/webpack/webpack) avec [vue-loader](https://github.com/vuejs/vue-loader) et [babel-loader](https://github.com/babel/babel-loader) pour regrouper (*bundle*), *code-split* et minifier votre code. +Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec [vue-loader](https://github.com/vuejs/vue-loader) et [babel-loader](https://github.com/babel/babel-loader) pour empaqueter (« bundle »), scinder (« code-split ») et minifier votre code. ## Fonctionnalités -- Écris des fichiers Vue (**.vue*) -- *Code splitting* automatique -- Rendu coté serveur (*Server-Side Rendering* / SSR) -- Système de routage puissant à l'aide des données asynchrones (*Asynchronous Data*) -- Sert les fichiers statiques (*Static File Serving*) -- ES6/ES7 Transpilation -- Bundle et minification de vos fichiers JS et CSS -- Management des éléments *Head* -- Hot reloading pendant le développement -- Pré-processeur: SASS, LESS, Stylus, etc +- Utilisation des fichiers Vue (`*.vue*`) +- Scission de code automatique +- Rendu coté serveur (ou « SSR » pour « Server-Side Rendering ») +- Système de routage puissant à l'aide de données asynchrones +- Génération de fichiers statiques +- Transpilation ES6/ES7 +- Empaquetage et minification de vos fichiers JS et CSS +- Gestion des éléments de balise d'en-tête `` HTML (``, `<meta>`, etc.) +- Rechargement à chaud pendant le développement +- Pré-processeur : Sass, Less, Stylus, etc. ## Schéma -Ce schéma (en anglais) montre ce qui est invoqué par nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>`: +Ce schéma (en anglais) montre ce qui est invoqué par nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>` : ![nuxt-schema](/nuxt-schema.png) -## Rendu côté serveur +## Rendu côté serveur (SSR universel) -Vous pouvez utiliser nuxt.js en tant que framework afin de gérer le rendu complet de l'UI de votre projet. +Vous pouvez utiliser nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet. -Lors de la commande `nuxt`, il va démarrer un serveur de développement avec *hot-reloading* et *vue-server-renderer* configurés afin de servir atuomatiquement votre application rendue côté serveur. +En utilisant la commande `nuxt`, Nuxt va démarrer un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) configurés afin de servir automatiquement le rendu de votre application fait côté serveur. -Jetez un oeil aux [commandes](/guide/commands) pour en savoir plus. +Jetez un œil aux [commandes](/guide/commands) pour en savoir plus. Si vous avez déjà un serveur, vous pouvez greffer nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez nuxt.js pour développer votre application web universelle; voir le guide [Using Nuxt.js Programmatically](/api/nuxt). From 1faee74f1e2b23da728023e2bf691fda16f7a309 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Thu, 14 Sep 2017 14:20:10 +0200 Subject: [PATCH 03/11] Ajout de deux nouveaux points Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/en/guide/index.md b/en/guide/index.md index a7763f4aa..3acb22f8c 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -47,6 +47,8 @@ Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec - Gestion des éléments de balise d'en-tête `<head>` HTML (`<title>`, `<meta>`, etc.) - Rechargement à chaud pendant le développement - Pré-processeur : Sass, Less, Stylus, etc. +- En-tête HTTP/2 PUSH +- Extensible avec une architecture modulaire ## Schéma From 5c129e9729b6068b6078033925886a7a70356e5f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Thu, 14 Sep 2017 16:48:08 +0200 Subject: [PATCH 04/11] Additional line Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/en/guide/index.md b/en/guide/index.md index 3acb22f8c..3472c64a7 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -62,6 +62,10 @@ Vous pouvez utiliser nuxt.js comme framework pour gérer le rendu complet de l'i En utilisant la commande `nuxt`, Nuxt va démarrer un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) configurés afin de servir automatiquement le rendu de votre application fait côté serveur. +### Application monopage + +Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'héberger statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou SPA « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de *génération*, vous avez la une puissante application monopage qui ne nécessite aucunement de Node.js ou d'un serveur spécial pour fonctionner. + Jetez un œil aux [commandes](/guide/commands) pour en savoir plus. Si vous avez déjà un serveur, vous pouvez greffer nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez nuxt.js pour développer votre application web universelle; voir le guide [Using Nuxt.js Programmatically](/api/nuxt). From 066eff300aad2b2a14d6f739b3e38c95e90e0756 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Thu, 14 Sep 2017 16:54:09 +0200 Subject: [PATCH 05/11] =?UTF-8?q?R=C3=A9alignement=20de=20diverse=20ligne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index 3472c64a7..1c19db8df 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -52,13 +52,13 @@ Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec ## Schéma -Ce schéma (en anglais) montre ce qui est invoqué par nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>` : +Ce schéma (en anglais) montre ce qui est invoqué par Nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>` : ![nuxt-schema](/nuxt-schema.png) ## Rendu côté serveur (SSR universel) -Vous pouvez utiliser nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet. +Vous pouvez utiliser Nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet. En utilisant la commande `nuxt`, Nuxt va démarrer un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) configurés afin de servir automatiquement le rendu de votre application fait côté serveur. @@ -66,17 +66,17 @@ En utilisant la commande `nuxt`, Nuxt va démarrer un serveur de développement Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'héberger statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou SPA « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de *génération*, vous avez la une puissante application monopage qui ne nécessite aucunement de Node.js ou d'un serveur spécial pour fonctionner. -Jetez un œil aux [commandes](/guide/commands) pour en savoir plus. +Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus. -Si vous avez déjà un serveur, vous pouvez greffer nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez nuxt.js pour développer votre application web universelle; voir le guide [Using Nuxt.js Programmatically](/api/nuxt). +Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). -## Génération d'applications statique +## Génération statique (Pré rendu) -La grande innovation de nuxt.js est: `nuxt generate` +La grande innovation de Nuxt.js est : `nuxt generate` Lors de la création de votre application, il générera le code HTML de chacune de vos routes pour le stocker dans un fichier. -Exemple: +Exemple : ```bash -| pages/ @@ -84,7 +84,8 @@ Exemple: ----| index.vue ``` -Va générer: +Va générer : + ``` -| dist/ ----| about/ @@ -92,9 +93,10 @@ Va générer: ----| index.html ``` -De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique! +De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique ! + +Le meilleur exemple est ce site web. Il est généré et hébergé sur le système d'hébergement de page de GitHub : -Le meilleur exemple est ce site web. Il est généré et hébergé sur GitHub Pages: - [Code source](https://github.com/nuxt/nuxtjs.org) (en anglais) - [Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais) From e6d16b81cd1a6da03e3c1ae6ee0ce46df08251ba Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Thu, 14 Sep 2017 17:00:55 +0200 Subject: [PATCH 06/11] =?UTF-8?q?Remise=20=C3=A0=20niveau=20du=20fichier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index 1c19db8df..a9fbb8b82 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -100,12 +100,13 @@ Le meilleur exemple est ce site web. Il est généré et hébergé sur le systè - [Code source](https://github.com/nuxt/nuxtjs.org) (en anglais) - [Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais) -Nous ne voulons pas devoir générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui: -1. Clone le [répertoire nuxtjs.org](https://github.com/nuxt/nuxtjs.org) +Nous ne voulons pas devoir générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui : + +1. Clone le [dépôt nuxtjs.org](https://github.com/nuxt/nuxtjs.org) 2. Installe les dépendances via `npm install` 3. Lance `nux generate` 4. Déploie le dossier `dist` sur la branche `gh-pages` -Et nous voilà avec une **Serverless Static Generated Web Application** :) +Et nous voilà avec une **application web générée sans partie serveur** :) -Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN, et regénérée à chaque fois qu'un produit est en rupture de stock ou de retour en stock. Mais si l'utilisateur navigue à sur l'application en attendant, il vera les informations à jour grâce aux appels API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur ainsi qu'un cache supplémentaire! +Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN. Chaque fois qu'un produit est en rupture de stock ou de nouveau en stock nous régénérons l'application. Mais si l'utilisateur navigue sur l'application en même temps, il verra les informations à jour grâce aux appels d'API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur ou un cache ! \ No newline at end of file From 602348c0c67e0892b85a10f05024d287f5c4e7ea Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Fri, 15 Sep 2017 08:45:22 +0200 Subject: [PATCH 07/11] =?UTF-8?q?Pas=20de=20majuscule=20a=20pr=C3=A9=20ren?= =?UTF-8?q?du=20dans=20le=20titre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index a9fbb8b82..9c6c81bcb 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -1,6 +1,6 @@ --- title: Introduction -description: « Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.js, un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évidente : Nuxt.js était né. » +description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.js, un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évidente : Nuxt.js était né." --- > Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annonçait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://fr.vuejs.org) était évident : Nuxt.js était né. @@ -70,7 +70,7 @@ Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus. Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). -## Génération statique (Pré rendu) +## Génération statique La grande innovation de Nuxt.js est : `nuxt generate` From a369997eb9011243dcea1d1455c140504b64368e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Fri, 15 Sep 2017 14:22:37 +0200 Subject: [PATCH 08/11] Revue de @rspt Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index 9c6c81bcb..4e4a9954e 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -3,7 +3,7 @@ title: Introduction description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.js, un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications Vue.js était évidente : Nuxt.js était né." --- -> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annonçait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://fr.vuejs.org) était évident : Nuxt.js était né. +> Le 25 octobre 2016, l'équipe derrière [zeit.co](https://zeit.co/), annonçait [Next.js](https://zeit.co/blog/next), un framework pour les applications React rendues côté serveur. Quelques heures après l'annonce, l'idée de créer un équivalent pour les applications [Vue.js](https://fr.vuejs.org) était évidente : Nuxt.js était né. ## Nuxt.js, qu’est-ce que c’est ? @@ -46,8 +46,8 @@ Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec - Empaquetage et minification de vos fichiers JS et CSS - Gestion des éléments de balise d'en-tête `<head>` HTML (`<title>`, `<meta>`, etc.) - Rechargement à chaud pendant le développement -- Pré-processeur : Sass, Less, Stylus, etc. -- En-tête HTTP/2 PUSH +- Préprocesseur : Sass, Less, Stylus, etc. +- Entête HTTP/2 PUSH - Extensible avec une architecture modulaire ## Schéma @@ -68,13 +68,13 @@ Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté se Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus. -Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restrictions quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). +Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). ## Génération statique La grande innovation de Nuxt.js est : `nuxt generate` -Lors de la création de votre application, il générera le code HTML de chacune de vos routes pour le stocker dans un fichier. +Lors de la création de votre application, il génèrera le code HTML de chacune de vos routes pour le stocker dans un fichier. Exemple : From 64ed787a85a3bae30dfc65d0e22273c42f14b06c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Fri, 15 Sep 2017 16:25:24 +0200 Subject: [PATCH 09/11] Revue de @Kocal Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/guide/index.md b/en/guide/index.md index 4e4a9954e..91c3b0392 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -9,7 +9,7 @@ description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.j Nuxt.js est un framework pour créer des applications Vue.js universelles. -Son champ principal est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution au client et au serveur. +Son principal but est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution au client et au serveur. Notre but est de créer un framework suffisamment flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sur Node.js. From 1ceca5debd935c09e97e277b38dc98b1075f6643 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Sat, 16 Sep 2017 09:30:59 +0200 Subject: [PATCH 10/11] Review de @forresst Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index 91c3b0392..fc0621014 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -9,16 +9,16 @@ description: "Le 25 octobre 2016, l'équipe derrière zeit.co, annonçait Next.j Nuxt.js est un framework pour créer des applications Vue.js universelles. -Son principal but est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution au client et au serveur. +Son principal but est de **faire le rendu d'interface utilisateur (« UI »)** en faisant abstraction de la distribution entre le client et le serveur. Notre but est de créer un framework suffisamment flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou en tant que supplément pour votre projet actuel basé sur Node.js. Nuxt.js prédéfinit toute la configuration nécessaire pour faire de votre développement d'application Vue.js rendue côté serveur quelque chose d'agréable. En outre, nous fournissons également une autre option de déploiement appelée : *nuxt generate*. Elle permet de construire une application Vue.js **générée statiquement**. -Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications web avec microservices. +Nous croyons que cette option pourrait être la prochaine étape importante dans le développement d'applications web avec des microservices. -En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre côté client et serveur telles que les données asynchrones, les *middlewares*, les *layouts*, etc. +En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre côté client et serveur tels que les données asynchrones, les *middlewares*, les *layouts*, etc. ## Comment ça marche @@ -60,17 +60,17 @@ Ce schéma (en anglais) montre ce qui est invoqué par Nuxt.js quand le serveur Vous pouvez utiliser Nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet. -En utilisant la commande `nuxt`, Nuxt va démarrer un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) configurés afin de servir automatiquement le rendu de votre application fait côté serveur. +En utilisant la commande `nuxt`, Nuxt démarrera un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) sera configuré pour faire automatiquement le rendu de votre application côté serveur. ### Application monopage -Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'héberger statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou SPA « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de *génération*, vous avez la une puissante application monopage qui ne nécessite aucunement de Node.js ou d'un serveur spécial pour fonctionner. +Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'un hébergement statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou « SPA » pour « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de *génération*, vous avez la une puissante application monopage qui ne nécessite aucunement de Node.js ou d'un serveur spécial pour fonctionner. Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus. Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). -## Génération statique +## Génération statique (pré-rendu) La grande innovation de Nuxt.js est : `nuxt generate` @@ -84,7 +84,7 @@ Exemple : ----| index.vue ``` -Va générer : +Cela générera : ``` -| dist/ @@ -100,13 +100,13 @@ Le meilleur exemple est ce site web. Il est généré et hébergé sur le systè - [Code source](https://github.com/nuxt/nuxtjs.org) (en anglais) - [Code généré](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) (en anglais) -Nous ne voulons pas devoir générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui : +Nous ne voulons pas générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), du coup chaque modification réalisée invoque une fonction AWS Lambda qui : 1. Clone le [dépôt nuxtjs.org](https://github.com/nuxt/nuxtjs.org) 2. Installe les dépendances via `npm install` 3. Lance `nux generate` 4. Déploie le dossier `dist` sur la branche `gh-pages` -Et nous voilà avec une **application web générée sans partie serveur** :) +Et nous voilà avec une **application web générée sans fichiers statiques serveurs** :) -Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN. Chaque fois qu'un produit est en rupture de stock ou de nouveau en stock nous régénérons l'application. Mais si l'utilisateur navigue sur l'application en même temps, il verra les informations à jour grâce aux appels d'API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur ou un cache ! \ No newline at end of file +Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN. Chaque fois qu'un produit est en rupture de stock ou de nouveau en stock nous régénérons l'application. Mais si l'utilisateur navigue sur l'application en même temps, il verra les informations à jour grâce aux appels d'API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur d'un cache ! \ No newline at end of file From 8af9fc04495cfd0d2affcfd6b8a1741b06335bf1 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur <bruno.lesieur@gmail.com> Date: Sat, 16 Sep 2017 09:38:19 +0200 Subject: [PATCH 11/11] =?UTF-8?q?Remarque=20=C3=89criture=20prise=20en=20c?= =?UTF-8?q?ompte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> --- en/guide/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/guide/index.md b/en/guide/index.md index fc0621014..d39a2262b 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -37,10 +37,10 @@ Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec ## Fonctionnalités -- Utilisation des fichiers Vue (`*.vue*`) +- Écriture des fichiers Vue (`*.vue*`) - Scission de code automatique - Rendu coté serveur (ou « SSR » pour « Server-Side Rendering ») -- Système de routage puissant à l'aide de données asynchrones +- Routage puissant à l'aide de données asynchrones - Génération de fichiers statiques - Transpilation ES6/ES7 - Empaquetage et minification de vos fichiers JS et CSS @@ -48,7 +48,7 @@ Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec - Rechargement à chaud pendant le développement - Préprocesseur : Sass, Less, Stylus, etc. - Entête HTTP/2 PUSH -- Extensible avec une architecture modulaire +- Extensibilité avec une architecture modulaire ## Schéma