Qu'est-ce que Nuxt.js

Nuxt.js est un framework pour créer des applications Vue.js rendues par le serveur. Il a été inspiré par Next.js. Sa portée principale est le rendu de l'interface utilisateur tout en abstrayant la distribution client / serveur. Nuxt.js est livré avec beaucoup de fonctionnalités pour vous aider dans votre développement entre le côté client et le côté serveur tels que les données asynchrones, les middlewares, les mises en page, etc.

En plus de créer des applications rendues par le serveur, Nuxt.js peut également être utilisé pour créer des applications Vue.js générées statiquement (ce qui sera notre objectif dans ce tutoriel).

Comment ça marche

En plus d'utiliser Vue.js, Nuxt.js utilise les bibliothèques suivantes pour créer un développement d'applications Web enrichi:

  • Vue-Routeur
  • Vuex (inclus uniquement lors de l'utilisation de l'option de magasin)
  • Vue-Meta

Tout est configuré pour vous, vous n'avez donc pas besoin de passer du temps à installer et configurer vous-même ces bibliothèques. Sous le capot, il utilise Webpack avec vue-loader et babel-loader pour regrouper, scinder le code et réduire votre code.

Nuxt.js essaie de rester minimaliste en gardant une taille totale de seulement 28kb min + gzip (31kb avec vuex).

L'image ci-dessous montre une large vue d'ensemble du fonctionnement de Nuxt.js:

Maintenant nous allons construire un site Web de portefeuille statique avec Nuxt.js.

Créer un projet Nuxt.js

Nous allons utiliser le modèle de démarrage fourni par l'équipe Nuxt.js. Nous allons l'installer à l'aide de Vue CLI, vous devez donc d'abord installer Vue CLI au cas où vous ne l'avez pas déjà installé:

npm installer -g vue-cli

Une fois installé, vous pouvez passer à la création du projet Nuxt.js avec:

vue init nuxt/starter portfolio

Nous pouvons le portefeuille de projets, vous pouvez le nommer comme vous voulez. Ensuite, nous devons installer les dépendances:

cd portfolio 
npm installer

Capture-d-e-cran-2018-03-30-a--19.57.18

Avec les dépendances installées, nous pouvons maintenant lancer notre projet:

npm run dev

Capture-d-e-cran-2018-03-30-a--19.59.52

L'application fonctionne maintenant sur http://localhost:3000. Si tout s'est bien passé, vous devriez voir un écran comme l'image ci-dessous:

Capture-d-e-cran-2018-03-30-a--20.00.38

Avant de plonger dans le code, prenons un moment pour définir le contenu de notre site web. Le site du portfolio contiendra quatre pages:

  • Homepage
  • About
  • Projets
  • Contact

Créer une mise en page

Nous allons commencer par créer une maquette maîtresse dont toutes nos pages hériteront. Nous allons utiliser Bulma comme notre framework CSS. Nous devons donc l'intégrer dans notre projet. Pour ce faire, ouvrez nuxt.config.js qui est le fichier de configuration Nuxt.js et collez le code ci-dessous dans l'objet lien qui se trouve dans l'objet head:

// nuxt.config.js

{rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css'},
{rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700'},

En plus d'utiliser dans Bulma, nous intégrons également une police de Google.

Dans le dossier layouts, il y a un fichier default.vue. Ouvrez-le et remplacez-le par:

<! - layouts / default.vue ->

<modèle>
  <div>
    <nuxt />
  </ div>
</ template>

<style>
  html {
    famille de polices: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</ style>

sera remplacé par le contenu réel de la page rendue.

Création d'un composant Navbar

Créons un composant navbar, nous pouvons l'ajouter à la maquette principale. Dans le dossier des composants, créez un nouveau fichier Navbar.vue et collez le code ci-dessous:

<! - components / Navbar.vue ->

<modèle>
  <div class = "container">
    <nav class = "navbar" rôle = "navigation" aria-label = "navigation principale">
      <div class = "navbar-brand">
        <a class="navbar-item" href="/"> Portfolio </a>
        <button class = "bouton navbar-burger">
          <span> </ span>
          <span> </ span>
          <span> </ span>
        </ button>
      </ div>
      <div class = "navbar-menu">
        <div class = "navbar-end">
          <nuxt-link class = "navbar-item" à = "/"> Accueil </ nuxt-link>
          <nuxt-link class = "navbar-item" à = "/ about"> À propos de </ nuxt-link>
          <nuxt-link class = "navbar-item" à = "/ projects"> Projets </ nuxt-link>
          <nuxt-link class = "navbar-item" à = "/ contact"> Contact </ nuxt-link>
        </ div>
      </ div>
    </ nav>
  </ div>
</ template>

Nous pouvons maintenant ajouter la barre de navigation à la disposition principale. Ouvrez les mises en page / default.vue et mettez à jour comme suit:

<! - layouts / default.vue ->

<modèle>
  <div>
    <navbar> </ navbar>
    <nuxt />
  </ div>
</ template>

<script>
  importer Navbar à partir de '../components/Navbar'

  valeur par défaut d'exportation {
    Composants: {
      Navbar
    }
  }
</ script>

<style>
  html {
    famille de polices: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</ style>

MBP-de-admin:pages admin$ npm run dev

> portfolio@1.0.0 dev /Users/admin/portfolio
> nuxt

  nuxt:build App root: /Users/admin/portfolio +0ms
  nuxt:build Generating /Users/admin/portfolio/.nuxt files... +1ms
  nuxt:build Generating files... +40ms
  nuxt:build Generating routes... +6ms
  nuxt:build Building files... +16ms
  nuxt:build Adding webpack middleware... +638ms
  ████████████████████ 100% 

Build completed in 2.887s



 DONE  Compiled successfully in -8110ms                                              14:34:03


 OPEN  http://localhost:3000

Capture-d-e-cran-2018-04-01-a--16.52.47

Besoin d'utiliser un autre port localhost pour votre développement ?

Remarque: pour une meilleure prise en charge du développement multi-plateforme, vous pouvez utiliser le package cross-env.

Installation:

npm installer --save-dev cross-env

Puis dans package.json on ajoute :

"scripts": {
 "dev": "cross-env HOST = 0.0.0.0 PORT = 3333 nuxt"
}

Créer la page d'accueil

Dans le dossier pages, vous verrez un fichier index.vue. Ce fichier est ce qui est rendu lorsque nous naviguons vers la route home de notre application. Nuxt.js génère des routes en fonction des fichiers dans le dossier pages. Par exemple, si nous avons des fichiers index.vue, about.vue et contact.vue dans le dossier pages, Nuxt.js formera les routes pour l'application en tant que /, / about et / contact respectivement.

Cela dit, ouvrez les pages / index.vue et remplacez le contenu par le code ci-dessous:

<! - pages / index.vue ->

<modèle>
  <section class = "section is-large">
    <div class = "conteneur has-text-centered">
      <h1 class = "title"> Bonjour, je suis Gabriel Sagnard </ h1>
      <h2 class = "subtitle"> un développeur de logiciels basé à Bourg-lès-Valence, France. </ h2>
    </ div>
  </ section>
</ template>

Si nous visitons à nouveau la route de départ, nous devrions voir la nouvelle page d'accueil en action:

Capture-d-e-cran-2018-04-05-a--21.28.29

Création de la page about

Nous allons maintenant créer la page about. Dans le dossier pages, créez un nouveau fichier about.vue et collez le code ci-dessous:

<! - pages / about.vue ->

<modèle>
  <section class = "section is-medium">
    <div class = "conteneur has-text-centered">
      <h1 class = "title"> À propos de moi </ h1>
      <p>
        Mon nom est Gabriel Sagnard (Valence), je suis un développeur de logiciels autodidacte basé à Bourg-lès-Valence (France). Je construis des applications modernes pour le web! </a>.
      </ p>
    </ div>
  </ section>
</ template>

Accédez à http://localhost:3000/about pour voir la page about en action:

Capture-d-e-cran-2018-04-05-a--21.31.13

Création de la page Projets

Dans la foulée, créons la page projects. Dans le dossier pages, créez un nouveau fichier projects.vue et collez le code ci-dessous:

<! - pages / projects.vue ->

<modèle>
  <section class = "section is-medium">
    <div class = "conteneur has-text-centered">
      <h1 class = "title"> Mes projets </ h1>
      <p>
        Certains de mes projets peuvent être trouvés sur <a href="https://github.com/gabrielsagnard" target="_blank"> GitHub </a>.
      </ p>
    </ div>
  </ section>
</ template>

Résultat :

Capture-d-e-cran-2018-04-05-a--22.12.24

Création de la page de contact

Enfin, nous créons la page de contact. Dans le dossier pages, créez un nouveau fichier contact.vue et collez le code ci-dessous:

<! - pages / contact.vue ->

<modèle>
  <section class = "section is-medium">
    <div class = "conteneur has-text-centered">
      <h1 class = "title"> Contactez-moi </ h1>
      <p>
        Vous pouvez me suivre sur Twitter: <a href="https://twitter.com/GabrielSagnard" target="_blank"> @GabrielSagnard </a>
      </ p>
    </ div>
  </ section>
</ template>

Génération de site statique

Maintenant, nous allons générer un site statique pour le site Web du portfolio qui contient jusqu'à présent un tas de fichiers Vue. Pour ce faire, nous utiliserons la commande nuxt generate:

npm run generate

La commande ci-dessus exécutera nuxt generate qui commencera à son tour à construire l'application et à générer les fichiers statiques. Une fois cela fait, vous devriez maintenant avoir un dossier dist qui contient les fichiers statiques générés.

La commande nuxt generate fonctionne en générant des fichiers HTML à partir des fichiers fichiers Vue dans le dossier pages pour toutes les routes de l'application.

MacBook-Pro-de-admin:pages admin$ npm run generate

> portfolio@1.0.0 generate /Users/admin/portfolio
> nuxt generate

  nuxt:generate Generating... +0ms
  nuxt:build App root: /Users/admin/portfolio +0ms
  nuxt:build Generating /Users/admin/portfolio/.nuxt files... +0ms
  nuxt:build Generating files... +37ms
  nuxt:build Generating routes... +5ms
  nuxt:build Building files... +19ms
  ████████████████████ 100% 

Build completed in 7.24s

Et après import sur mon bucket AWS S3 :

Capture-d-e-cran-2018-04-12-a--18.46.39