Comment publier une application Vuetify avec Nginx sur Ubuntu 20.04

De Get Docs
Aller à :navigation, rechercher

Introduction

Les composants sont une caractéristique clé du développement frontal moderne. Un composant est un morceau de code qui comprend généralement deux morceaux :

  • La logique du composant : ce que le composant peut faire.
  • Le template : comment l'utilisateur va interagir avec l'application web.

L'organisation de votre application en composants vous aide à écrire des applications Web modernes et robustes. Les frameworks JavaScript, tels que React et Vue.js, peuvent vous aider à développer de nombreux types de composants et sont largement utilisés par les développeurs.

Cependant, l'un des points faibles de ces frameworks est que vous devez créer de nombreux composants, même pour des choses simples comme un champ de texte de saisie. Pour cette raison, une approche plus simple consiste à utiliser une bibliothèque de composants, qui contient des composants prêts à l'emploi que vous pouvez sélectionner et utiliser selon vos besoins. Avec une bibliothèque de composants, vous n'avez pas à vous soucier de la conception CSS, des couleurs, des tailles et des polices, vous pouvez vous concentrer sur la fonctionnalité.

Pour Vue.js, il existe Vuetify, une bibliothèque Vue UI basée sur les principes Material Design. Vuetify est hautement configurable et personnalisable. Vous pouvez modifier les composants en fonction de vos besoins et vous pouvez configurer votre propre thème pour disposer d'une bibliothèque de composants cohérente en fonction du style de votre marque.

Dans ce didacticiel, vous allez créer une application de tâches basée sur Vuetify et publiez-le en utilisant Nginx en tant que proxy inverse, nécessaire pour déployer une application Vue.

Remarque : Vue étant un framework frontal, l'application que vous créez pour ce didacticiel s'exécutera dans le navigateur. Cependant, pour des fonctionnalités supplémentaires, telles que l'authentification ou la persistance des données, vous auriez besoin d'un backend. La définition ou le développement de cette fonctionnalité principale n'entre pas dans le cadre de cet article.


Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Étape 1 - Configuration de votre application Vue

Dans cette étape, vous configurerez votre application Vue.js. Vue.js a un client que vous pouvez utiliser pour créer le passe-partout du projet, ce qui est un bon moyen de repartir de zéro.

Vous commencerez par installer le client Vue.js globalement avec cette commande :

sudo npm install -g @vue/cli

Ensuite, validez la version :

vue --version

La dernière version, lorsque ce tutoriel a été écrit, était 5.0.8:

[email protected]/cli 5.0.8

Maintenant que vous avez installé @vue/cli, vous pouvez l'utiliser pour créer le vuejs application. Dans ce tutoriel, l'application s'appellera vuetify-meets-nginx-app, mais vous pouvez changer le nom en ce que vous voulez.

Pour créer l'application, exécutez cette commande :

vue create vuetify-meets-nginx-app

Cette commande est interactive et comporte plusieurs options. Pour ce didacticiel, choisissez le Default option pour Vue 2:

OutputVue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
❯ Default ([Vue 2] babel, eslint)
  Manually select features

Avertissement : Au moment d'écrire ces lignes, Vuetify ne supporte pas Vue.js v3. Si vous essayez d'ajouter Vuetify à un Vue.js v3, vous verrez cette erreur :

OutputError: you cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.**

Pour plus d'informations, veuillez consulter la feuille de route Vuetify.


Une fois l'application créée, vous remarquerez que Vue a généré des fichiers et des répertoires :

├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public/
      ├── favicon.ico
      └── index.html
├── src
        ...
└── vue.config.js

Voici un bref aperçu :

  • babel.config.js: Babel est un compilateur Javascript, et ce fichier définit son comportement. Cela est nécessaire pour exécuter, créer et générer l'application finale.
  • jsconfig.json: Ce fichier est également nécessaire pour compiler l'application. Par exemple, ce fichier définit la version du code Javascript sur ECMAScript 2009 (ES5), celui par défaut. Pour plus d'informations, consultez cette documentation.
  • node_modules: Répertoire contenant toutes les bibliothèques installées et configurées.
  • package.json: Le fichier de configuration principal de votre application. Vous verrez ici des informations sur les dépendances et les commandes disponibles pour exécuter ou créer votre application.
  • package-lock.json: Il s'agit d'un fichier de vidage de toutes les dépendances utilisées par votre application. Ce fichier est particulièrement utile si vous souhaitez installer votre application sur un autre ordinateur portable ou serveur avec npm.
  • public: Ici, vous avez le code de base qui npm run serve La commande doit publier votre application. Il est généré par le @vue/cli commande.
  • vue.config.js: Vue fichier de configuration.

Dans le src dossier, vous verrez les fichiers et répertoires suivants :

src
├── App.vue
├── assets
│ ├── logo.png
│ └── logo.svg
├── components
│ └── HelloWorld.vue
├── main.js

Voici un bref aperçu :

  • App.vue: Le composant de niveau supérieur de l'application Vue.js. Tous les autres composants seront à l'intérieur du composant défini ici.
  • assets: tous les éléments, tels que les images, les fichiers CSS et les polices, doivent être placés ici.
  • components: Il contient tous les composants que vous créez. La @vue/cli la commande en a généré un appelé HelloWorld.vue.
  • main.js: Le fichier principal de l'application. Si vous avez besoin de configurer une bibliothèque ou un plugin, c'est le fichier. Il a également créé l'application Vue.

Vous pouvez maintenant naviguer vers le vuetify-meets-nginx-app annuaire:

cd vuetify-meets-nginx-app

Pour démarrer l'application en mode développement, exécutez la commande suivante :

npm run serve

Votre sortie ressemblera à ceci :

OutputINFO  Starting development server...

DONE  Compiled successfully in 27235ms

 App running at:
 - Local:   http://localhost:8080/
 - Network: unavailable

 Note that the development build is not optimized.
 To create a production build, run npm run build.

Une fois le serveur de développement démarré, rendez-vous sur localhost:8080 pour voir l'application :

Remarque : Si vous suivez le didacticiel sur un serveur distant, vous pouvez utiliser la redirection de port pour afficher l'application dans le navigateur. Assurez-vous que le port 8080 est ouvert sur votre serveur. Pendant que le serveur de développement est toujours en cours d'exécution, ouvrez un autre terminal sur votre ordinateur local et entrez la commande suivante pour lancer la redirection de port :

ssh -L 8080:localhost:8080  [email protected]_server_ip

Une fois connecté au serveur, accédez à http://localhost:8080 sur le navigateur Web de votre machine locale. Gardez le deuxième terminal ouvert pendant le reste de ce didacticiel.


Dans cette étape, vous avez créé votre application Vue.js. Ensuite, vous ajouterez Vuetify au projet.

Étape 2 - Intégration de Vuetify dans l'application Vue

Dans cette étape, vous ajouterez Vuetify à votre application Vue.js.

Sans une bibliothèque de composants comme Vuetify, vous devriez utiliser des entrées HTML, comme div et button, concevez le CSS de votre application Web et créez vos propres composants si vous souhaitez des blocs réutilisables. Mais avec la bibliothèque Vuetify, il vous suffit d'importer les composants que vous souhaitez et de les ajouter à votre modèle.

Vuetify est également hautement personnalisable. Par exemple, vous pouvez avoir des thèmes. Un thème est une bibliothèque CSS qui comprend des éléments tels que des palettes de couleurs, des tailles d'écran personnalisées et des polices. Par exemple, si votre primary La couleur est blue, vous pouvez configurer Vuetify de cette façon, et chaque fois que vous utilisez la classe CSS primary, Vuetify utilisera la couleur bleue. Vous pouvez trouver plus d'informations sur les thèmes dans la documentation Vuetify. Plus d'informations sur ces composants et d'autres peuvent être trouvées dans les Guides des fonctionnalités de Vuetify .

Pour commencer à ajouter Vuetify, terminez le serveur de développement que vous avez lancé à l'étape précédente en tapant CTRL+C dans le terminal où tourne le serveur de développement.

Ensuite, exécutez la commande suivante dans le vuetify-meets-nginx-app annuaire:

vue add vuetify

Cette commande installe Vuetify à l'aide du client Vue.js.

Choisir la default configuration dans la liste des options prédéfinies :

Output📦  Installing vue-cli-plugin-vuetify...

added 38 packages, and audited 39 packages in 2s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
  Configure (advanced)
❯ Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)

Après quelques minutes, vous pouvez relancer le serveur de développement :

npm run serve

Aller vers localhost:8080, où vous pouvez voir l'application avec un nouveau style "vuetifié":

À ce stade, vous avez créé une application de base et ajouté Vuetify pour le style. Ensuite, vous allez créer une application de tâches avec des fonctionnalités supplémentaires.

Étape 3 - Création d'une application Vuetify To-Do

Dans cette étape, vous allez créer une application de tâches. Une application de tâches est une liste de tâches qui nécessiteront certaines fonctionnalités de base :

  • Un moyen d'ajouter de nouvelles tâches.
  • Une façon de les marquer comme terminés.
  • Une méthode pour les afficher, permettant aux utilisateurs de voir ce qui est en attente.

Pour ajouter ces fonctionnalités à votre application, vous allez modifier le App.vue fichier, qui est le composant de niveau supérieur de l'application. Tous les autres composants seront à l'intérieur du composant défini ici.

Remarque : Vue.js, comme de nombreux autres frameworks, utilise le rechargement à chaud par défaut. Si vous continuez à exécuter le npm run serve commande pendant que vous développez votre code, vous verrez les mises à jour dans le navigateur dès que vous enregistrez les modifications.


Aller vers src/App.vue et ouvrez-le pour le modifier en utilisant nano ou votre éditeur de texte préféré :

cd src
nano App.vue

Voici le code par défaut :

vuetify-meets-nginx-app/src/App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

Chaque composant comporte deux éléments : un modèle (généralement du code HTML) et un script avec la fonctionnalité écrite en Javascript.

Le modèle est ce que l'utilisateur final verra dans le navigateur et détermine comment les utilisateurs interagissent avec votre application. En règle générale, vous devez importer des composants à utiliser dans le modèle, mais puisque vous avez installé Vuetify en tant que plugin, tous les composants sont disponibles dans le modèle sans les importer explicitement.

Dans le bloc modèle, il y a beaucoup de v- Balises HTML. Bien que non standard pour HTML, ces balises sont des composants Vuetify et commenceront toujours par v-.

Dans le modèle, vous avez actuellement :

  • v-app: le composant principal, qui est attaché au corps du site Web.
  • v-app-bar: la barre latérale par défaut.
  • v-img: un composant qui charge des images.
  • v-icon: un composant pour afficher des icônes.
  • v-spacer: un composant qui aligne le composant suivant à droite.

En ce qui concerne la script bloquer dans le App.vue fichier, l'installation de Vuetify n'ajoute aucun code ici, donc ce que vous avez est le code de démarrage généré par le Vue cli commande et le code minimum requis pour un composant Vue.

Maintenant que vous avez examiné le code par défaut dans le App.vue fichier, vous êtes prêt à commencer à créer votre application de tâches. La première étape consistera à supprimer certains codes par défaut que vous n'utiliserez pas.

Nettoyer le fichier App.vue

Le défaut HelloWorld le composant ne sera pas nécessaire pour votre application de tâches, vous le supprimerez donc de la App.vue dossier.

Pour utiliser un composant Vue dans un autre composant ou vue, vous devez importer le composant dans le bloc de script du fichier. Dans ton App.vue fichier, vous avez le HelloWorld importation de composants dans la première ligne :

vuetify-meets-nginx-app/src/App.vue

...
import HelloWorld from './components/HelloWorld';
...

Comme vous n'utiliserez pas ce composant, supprimez le import ligne.

L'étape suivante consiste à supprimer le composant de la liste des dépendances de composants du App.vue page. Dans le script block, recherchez les lignes suivantes :

vuetify-meets-nginx-app/src/App.vue

...
<script>
  ...

  components: {
    HelloWorld,
  },

  ...
</script>

Supprimer le HelloWorld ligne de la liste des components.

La dernière étape consiste à le supprimer du bloc modèle :

vuetify-meets-nginx-app/src/App.vue

...
<template>
    ...
    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>
...

Supprimer le HelloWorld ligne.

Maintenant que la valeur par défaut HelloWorld composant a été supprimé, vous pouvez commencer à créer votre application de tâches.

Ajout de champs de données de composant

Pour créer votre application de tâches, vous allez ajouter des champs de données pour votre application. La data du composant est une fonction qui retourne tous les modèles de données que vous pourrez utiliser dans le template. Tous ces modèles de données sont des variables Javascript à l'intérieur d'un objet et seront également accessibles par les méthodes du composant.

Localisez le data champ dans le script bloquer:

vuetify-meets-nginx-app/src/App.vue

...
<script>
  ...
  data: () => ({
    //
  }),
};
</script>

Vous modifierez le data fonction pour stocker votre liste de tâches. Ajoutez les lignes en surbrillance suivantes au data fonction:

vuetify-meets-nginx-app/src/App.vue

...
<script>
    ...
    data: () => ({
        tasks: ['task 1', 'task 2', 'task 3'],
        newTask: null
    }),
};
</script>

Avec cette mise à jour, vous avez ajouté deux modèles de données : un newTask variable pour stocker le nom de la tâche et tasks pour la liste des tâches. Les deux modèles de données sont maintenant disponibles pour être utilisés dans le modèle et dans les méthodes.

Remarque : Si vous ne savez pas comment Vue.js rend les modèles de données accessibles pour le template et les méthodes des composants, consultez Reactivity Fundamentals of Vue.js dans la documentation officielle.


Ajout de fonctionnalités à votre application

Ensuite, vous ajouterez la fonctionnalité. Dans les composants Vue.js, la fonctionnalité se trouve dans une liste de fonctions appelées methods. Dans le script bloquer sous le data modèles, ajoutez les lignes en surbrillance pour ajouter trois fonctions :

vuetify-meets-nginx-app/src/App.vue

...
<script>
export default {
    name: 'App',

    data: () => ({
        tasks: ['task 1', 'task 2', 'task 3'],
        newTask: null
    }),
    methods: {
        addNewTask() {
            this.tasks.push(this.newTask);
            this.clearNewTask();
        },
        clearNewTask() {
            this.newTask = '';
        },
        removeTask(i) {
            this.tasks.splice(i, 1);
        }
    }
};

Vous avez ajouté trois fonctions :

  • addNewTask: Pour ajouter la nouvelle tâche à l'intérieur du newTask modèle de données au tasks liste.
  • clearNewTask: Pour effacer le modèle de données pour newTask.
  • removeTask: Pour supprimer une tâche de tasks basé sur un index de tableau.

Vous avez maintenant ajouté la fonctionnalité pour votre application de tâches. Ensuite, vous allez modifier le modèle pour utiliser les méthodes.

Mise à jour du modèle

Le dernier élément de votre application de tâches est le modèle. Dans cette section, vous allez mettre à jour le modèle pour utiliser les méthodes et les modèles de données que vous avez ajoutés dans les sections précédentes.

Vous devrez supprimer certains composants dont vous n'avez pas besoin v-app-bar. Supprimer le v-btn bloquer. Ensuite, votre code ressemblera à ceci :

vuetify-meets-nginx-app/src/App.vue

<template>
    <v-app>
        <v-app-bar
            app
            color="primary"
            dark
        >
        <div class="d-flex align-center">
            <v-img
                alt="Vuetify Logo"
                class="shrink mr-2"
                contain
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
                transition="scale-transition"
                width="40"
            />

            <v-img
                alt="Vuetify Name"
                class="shrink mt-1 hidden-sm-and-down"
                contain
                min-width="100"
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
                width="100"
            />
        </div>

        <v-spacer></v-spacer>

        </v-app-bar>
        ...
    </v-app>
</template>

Ensuite, vous allez ajouter quelques composants pour définir la mise en page de base de votre application. Le premier est un v-container, qui est un composant qui permet de centrer et de remplir horizontalement le contenu de votre application. Vous trouverez plus d'informations sur ce composant et d'autres conteneurs dans la documentation grid system de Vuetify.

Dans v-container, vous ajouterez un v-card composant, qui est un autre conteneur Vuetify. Il est utile pour organiser le contenu sur l'écran, tel qu'un panneau ou une image statique. Pour plus d'informations sur le v-card composant, jetez un œil à la documentation Vuetify sur les cartes.

Localisez le v-main bloc dans le modèle actuel et ajoutez les lignes en surbrillance :

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
        </v-card>
    </v-container>
</v-main>
...

Comme vous pouvez le voir dans le code, il y a un elevation="0" propriété dans le v-card composant. L'élévation est une propriété commune dans les composants Vuetify qui ajuste la distance z relative entre deux composants. Dans ce cas, vous n'avez pas besoin de distance, et 0 est la valeur pour supprimer l'élévation. Cependant, vous pouvez jouer avec pour voir les différences ou consulter la documentation d'élévation.

Ensuite, vous utiliserez deux v-card composants fonctionnels : v-title, qui fournit une taille de police et un rembourrage par défaut pour les titres de carte, et v-card-text, qui contiendra le contenu de la carte. Ajoutez les lignes en surbrillance à votre v-card composant:

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title></v-card-title>
            <v-card-text></v-card-text>
       </v-card>
    </v-container>
</v-main>
...

Un composant fonctionnel est un composant qui n'affiche qu'un modèle. Il n'a aucune logique et, comme il ne s'agit que d'un modèle, il s'affiche plus rapidement. Pour en savoir plus sur les composants fonctionnels ou pour apprendre à créer les vôtres, consultez le guide Vue.js sur les composants fonctionnels.

Maintenant que vous avez votre composant conteneur, vous devez ajouter un composant v-text-field pour gérer les noms des nouvelles tâches. Dans le v-card-title composant que vous venez d'ajouter, insérez les lignes en surbrillance :

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title>
              <v-text-field
                v-model="newTask"
                label="Task Name"
                prepend-icon="mdi-content-save"
                clear-icon="mdi-close-circle"
                clearable
                filled
                type="text"
                @click:prepend="addNewTask"
                @click:clear="clearNewTask"
                ></v-text-field>
            </v-card-title>
           ...
        </v-card>
    </v-container>
</v-main>
...

v-text-field est un composant requis pour nommer les nouvelles tâches.

Il a les propriétés suivantes :

  • v-model="newTask" attache le modèle de données au composant. Tout texte que vous mettez dans l'entrée sera également ajouté au modèle de données.
  • label="Task Name" est le texte dans l'espace réservé du type d'entrée.
  • prepend-icon="mdi-content-save" affichera l'icône Enregistrer dans le coin gauche de la zone de texte.
  • clear-icon="mdi-close-circle" est l'icône du bouton Effacer.
  • clearable affiche l'icône Effacer.
  • filled applique un autre style de saisie rempli au composant.
  • type="text" définit le type d'entrée du champ d'entrée HTML sous-jacent. D'autres options incluent email ou password.
  • @click: prepend="addNewTask" attache l'événement de clic du bouton Enregistrer au addNewTask fonction.
  • @click: clear="clearNewTask" connecte l'événement de clic du bouton Save au clearNewTask fonction.

L'étape suivante consiste à afficher chaque tâche dans le modèle de liste de tâches. Pour cela, vous allez utiliser le composant v-timeline, qui est un composant d'affichage pour afficher des informations basées sur le temps ou l'ordre. Vous allez l'ajouter à v-card-text, qui est le v-card composant du corps. À l'intérieur de v-card-text composant que vous avez déjà ajouté, insérez les lignes en surbrillance :

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title>
            ...
            </v-card-title>
            <v-card-text>
              <v-timeline
                  v-if="tasks.length > 0"
                  dense
              ></v-timeline>
            </v-card-text>
            ...
      </v-card>
   </v-container>
</v-main>
...

v-timeline affiche toutes les tâches de la liste. La v-if est d'afficher le composant uniquement si vous avez au moins une tâche dans le modèle de données. dense sert à condenser le contenu (essentiellement, il supprime certains rembourrages et marges du style CSS du composant).

Maintenant, pour afficher le nom de chaque tâche, vous devrez utiliser un v-timeline composant fonctionnel : v-timeline-item. Ajoutez les lignes suivantes à l'intérieur du v-timeline composant:

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title>
            ...
            </v-card-title>
            <v-card-text>
              <v-timeline
                  v-if="tasks.length > 0"
                  dense
                >
                    <v-timeline-item
                        v-for="(t, index) in tasks"
                        :key="index"
                    >
                         {{ t }}
                    </v-timeline-item>
              </v-timeline>
            </v-card-text>
        </v-card>
    </v-container>
</v-main>
...

Ce code utilise une boucle v-for pour afficher un v-timeline-item composant pour chaque tâche de votre modèle de liste de tâches. Comme v-timeline-item est un élément fonctionnel de v-timeline, il sera rendu avec le style d'une liste chronologique.

Vous ajoutez l'index comme clé à la v-for boucle car elle est obligatoire pour le v-for Directive Vue. Pour en savoir plus sur l'utilisation de clés uniques avec v-for, consultez la documentation du produit Vue.

Avec le Modèle:T ligne, vous afficherez le nom de la tâche à l'intérieur de la v-timeline-item composant.

L'étape suivante consiste à ajouter un bouton pour supprimer la tâche de la liste. Mais avant cela, vous devrez ajouter des composants supplémentaires du système de grille pour organiser les noms et les boutons des tâches. Ajoutez les lignes en surbrillance à l'intérieur du v-timeline-item composant:

vuetify-meets-nginx-app/src/App.vue

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title>
            ...
            </v-card-title>
            <v-card-text>
              <v-timeline
                  v-if="tasks.length > 0"
                  dense
                >
                    <v-timeline-item
                        v-for="(t, index) in tasks"
                        :key="index"
                    >
                        <v-row class="display-1 text-capitalize">
                            <v-col cols="7">
                                {{ t }}
                            </v-col>
                            <v-col
                                class="text-right"
                                cols="5"
                            >
                            </v-col>
                        </v-row>
                     </v-timeline-item>
               </v-timeline>
             </v-card-text>
         </v-card>
     </v-container>
</v-main>
...

Avec le code ci-dessus, vous avez ajouté :

  • A v-row composant avec deux classes pour définir la taille du texte de la tâche (display-1, similaire à H1 en HTML) et avec tous les caractères en majuscules (text-capitalize).
  • A v-col composant à l'intérieur de la ligne pour afficher le nom de chaque tâche qui nécessitera 7/12 parties de l'espace (le cols="7" propriété).
  • Une autre v-col composant qui place le bouton de suppression. Il a besoin de 5/12 parties de l'espace (cols="5" propriété) et a tous les composants à l'intérieur alignés à droite, déterminé par le text-right classer.

Enfin, il est temps d'inclure un composant v-btn pour attacher le removeTask fonction à un composant de bouton. Pour faire simple, vous allez utiliser un bouton d'icône, qui est un bouton avec juste une icône et pas de texte. Pour ce faire, vous aurez également besoin d'un composant v-icon.

Ajoutez les lignes en surbrillance :

vuetify-meets-nginx-app/src/App.vue

...
<v-timeline
    v-if="tasks.length > 0"
    dense
>
    <v-timeline-item
        v-for="(t, index) in tasks"
        :key="index"
    >
        <v-row class="display-1 text-capitalize">
            <v-col cols="7">
                {{ t }}
            </v-col>
            <v-col
                class="text-right"
                cols="5"
            >
                <v-btn
                    icon
                    @click="removeTask(index)"
                >
                    <v-icon color="red lighten-1" large>
                        mdi-sticker-remove
                    </v-icon>
                </v-btn>
            </v-col>
        </v-row>
    ...
    </v-timeline-item>
</v-timeline>

Dans le code que vous venez d'ajouter, le icon propriété de la v-btn Le composant spécifie qu'aucun texte n'est requis. Il modifie le composant pour styliser uniquement un v-icon composant.

La @click l'événement de composant lie votre removeTask méthode à l'événement click du bouton. Ainsi, chaque fois que l'événement de clic de bouton sous-jacent est généré, votre méthode sera appelée.

Vous avez utilisé l'index fourni par le v-for boucle comme paramètre de la removeTask méthode.

Finalement, le v-icon la couleur sera red lighten-1, la taille sera large, et vous avez utilisé le mdi-sticker-remove l'icône de la conception matérielle.

Vous avez maintenant mis à jour le modèle avec quelques Vuetify composants, les a configurés pour utiliser et afficher le contenu de vos modèles de données, et a permis aux utilisateurs de votre application d'interagir avec eux à l'aide de vos méthodes de page.

Voici le code final du App.vue dossier:

vuetify-meets-nginx-app/src/App.vue

<template>
    <v-app>
        <v-app-bar
            app
            color="primary"
            dark
        >
        <div class="d-flex align-center">
            <v-img
                alt="Vuetify Logo"
                class="shrink mr-2"
                contain
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
                transition="scale-transition"
                width="40"
            />

            <v-img
                alt="Vuetify Name"
                class="shrink mt-1 hidden-sm-and-down"
                contain
                min-width="100"
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
                width="100"
            />
        </div>

        <v-spacer></v-spacer>

        </v-app-bar>

        <v-main>
            <v-container>
                <v-card elevation="0">
                    <v-card-title>
                        <v-text-field
                            v-model="newTask"
                            label="Task Name"
                            prepend-icon="mdi-content-save"
                            clear-icon="mdi-close-circle"
                            clearable
                            filled
                            type="text"
                            @click:prepend="addNewTask"
                            @click:clear="clearNewTask"
                        ></v-text-field>
                    </v-card-title>
                    <v-card-text>
                        <v-timeline
                            v-if="tasks.length > 0"
                            dense
                        >
                            <v-timeline-item
                                v-for="(t, index) in tasks"
                                :key="index"
                            >
                                <v-row class="display-1 text-capitalize">
                                    <v-col cols="7">
                                        {{ t }}
                                    </v-col>
                                    <v-col
                                        class="text-right"
                                        cols="5"
                                    >
                                        <v-btn
                                            icon
                                            @click="removeTask(index)"
                                        >
                                            <v-icon color="red lighten-1" large>
                                                mdi-sticker-remove
                                            </v-icon>
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-timeline-item>
                        </v-timeline>
                    </v-card-text>
                </v-card>
            </v-container>
        </v-main>
    </v-app>
</template>

<script>

export default {
    name: 'App',

    data: () => ({
        tasks: ['task 1', 'task 2', 'task 3'],
        newTask: null
    }),
    methods: {
        addNewTask() {
            this.tasks.push(this.newTask);
            this.clearNewTask();
        },
        clearNewTask() {
            this.newTask = '';
        },
        removeTask(i) {
            this.tasks.splice(i, 1);
        }
    }
};
</script>

Enregistrez et fermez votre fichier.

Si le serveur de développement n'est pas encore en cours d'exécution, relancez-le :

npm run serve

Vous pouvez maintenant naviguer vers localhost:8080 pour voir votre application fonctionner.

Dans cette étape, vous avez créé une application de tâches. Vous avez ajouté des fonctionnalités et mis à jour l'interface utilisateur. Maintenant que vous avez écrit l'application, vous pouvez générer une version prête pour la production. La prochaine étape consistera à créer l'application pour la production.

Étape 4 - Création de votre application pour la production

À l'étape précédente, vous avez écrit votre application de tâches. Mais avant de le publier avec Nginx, vous devrez préparer l'application pour la production. Cette étape s'appelle construire l'application.

L'étape de construction convertit l'application en quelque chose qui peut être lu par un navigateur. Si vous essayez d'ouvrir votre src fichiers dans un navigateur, vous ne verrez rien. C'est parce qu'il s'agit de fichiers Vue.js, et non HTML, JS, et CSS fichiers, qui sont ce que les navigateurs peuvent lire. Avant de publier votre application avec Nginx, vous devrez créer l'application pour la production, ce que vous ferez dans cette étape.

Vous pouvez utiliser le build commande pour le faire automatiquement. package.json est le fichier de configuration principal de votre application. Il contient des informations sur les dépendances et les commandes disponibles pour exécuter ou créer votre application, telles que build commande, comme illustré ici :

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ...
}

Pour en savoir plus sur le package.json configuration du fichier, veuillez consulter le guide package.json.

Pour démarrer le processus de construction, arrêtez le serveur de développement avec CTRL+C.

Dans le même terminal, accédez au répertoire du projet :

cd vuetify-meets-nginx-app

Exécutez le build commande:

npm run build

Une fois la compilation terminée, vous aurez une version de votre application prête pour la production dans le répertoire dist.

Ensuite, vous configurerez Nginx en tant que proxy inverse pour déployer et accéder à l'application.

Étape 5 - Configuration de Nginx en tant que proxy inverse

Maintenant que vous avez une application fonctionnelle, vous devez configurer Nginx en tant que proxy inverse pour servir les fichiers de votre application et la connecter à votre nom de domaine.

Un reverse proxy est une application ou un service qui s'exécute sur un serveur et transfère les requêtes externes vers un autre emplacement. Dans votre cas, chaque fois qu'un utilisateur visite votre domaine dans un navigateur, Nginx traitera cette demande en répondant avec un fichier de votre application. Il renverra un fichier car lorsque vous compilez l'application, les fichiers HTML, JS et CSS sont générés, que Nginx traitera comme tout autre fichier statique ou site Web que vous pourriez avoir sur votre serveur.

Nginx marche avec sites. Chaque site est un site Web différent configuré dans un seul fichier. Tous les fichiers de configuration sont placés par défaut dans /etc/nginx/sites-available/. Accédez à ce répertoire :

cd /etc/nginx/sites-available/

Créer un fichier nommé vuetify-meets-nginx-app:

sudo nano vuetify-meets-nginx-app

Remarque : Vous pouvez nommer le fichier comme vous le souhaitez, mais le nommer comme l'application ou le site Web que vous souhaitez publier est la convention.


Dans ton vuetify-meets-nginx-app fichier, ajoutez les lignes suivantes, en veillant à mettre à jour server_name avec vos propres informations :

/etc/nginx/sites-available/vuetify-meets-nginx-app

server {
  listen 80;
  listen [::]:80;
  server_name your_domain;
  autoindex on;
  root   /home/sammy/vuetify-meets-nginx-app/dist/;
  index  index.html;
}

Dans ce tutoriel, vous configurez Nginx écouter sur le port 80, mais vous pouvez utiliser n'importe quel port. Remplacer your_domain avec votre nom de domaine. Vous pouvez également utiliser l'adresse IP de votre serveur ou localhost, si vous le testez dans un environnement de développement local.

Avec le root ligne, vous dites à Nginx que tous les fichiers sont dans le /home/sammy/vuetify-meets-nginx-app/dist/ répertoire créé à l'étape précédente. Enfin, avec le index ligne, vous dites à Nginx que le fichier principal est index.html.

Enregistrez et fermez votre fichier.

Ensuite, vous devrez résoudre un problème d'autorisations dans le fichier de configuration Nginx.

Nginx est un service exécuté sur votre serveur. Vous pouvez répertorier tous les processus en cours d'exécution liés à Nginx avec la commande suivante :

ps -fea | grep nginx

La ps commande avec -fea flags répertorie tous les processus en cours dans une liste au format complet. La sortie de cette commande est ensuite filtrée pour ne répertorier que les processus correspondant nginx.

La sortie ressemblera à ce qui suit :

Outputroot       39922       1  0 Jul14 ?        00:00:00 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
www-data   39923   39922  0 Jul14 ?        00:00:01 nginx: worker process
sammy     117909  117434  0 21:27 pts/0    00:00:00 grep --color=auto nginx

Comme indiqué dans la sortie, le nginx le service est en cours d'exécution avec l'utilisateur www-data.

Ensuite, vérifiez les autorisations de /home/sammy/vuetify-meets-nginx-app/dist/ avec cette commande :

ls -l /home/sammy/vuetify-meets-nginx-app/dist/

La sortie ressemblera à ce qui suit :

Outputtotal 20
drwxrwxr-x 2 sammy sammy 4096 Jul 14 18:54 css
-rw-rw-r-- 1 sammy sammy 4286 Jul 14 18:54 favicon.ico
-rw-rw-r-- 1 sammy sammy  853 Jul 14 18:54 index.html
drwxrwxr-x 2 sammy sammy 4096 Jul 14 18:54 js

Tous les fichiers et dossiers sont autorisés à être disponibles pour l'utilisateur sammy. Si vous configurez Nginx pour lire ces fichiers, cela ne fonctionnera pas car l'utilisateur Nginx www-data n'a pas l'autorisation d'exécution.

Il existe quelques options pour résoudre ce problème :

  • Accordez des autorisations de lecture, d'écriture et d'exécution à Nginx dist dossier. Cependant, accorder à un service accessible depuis l'ensemble du réseau des autorisations de lecture des fichiers utilisateur locaux n'est pas sécurisé. De plus, Nginx aura besoin d'une autorisation pour accéder à tous les dossiers parents car il doit accéder au dossier final, ce qui ouvrirait essentiellement le /home répertoire au monde. Ceci n'est pas recommandé.
  • Courir nginx avec sudo. Ce n'est pas non plus sécurisé, puisque vous auriez maintenant un service avec accès à tous les fichiers sur votre serveur.
  • Bouger ton dist contenu vers un emplacement auquel seul Nginx a accès et personne d'autre. C'est l'option la plus sûre.

Pour ce didacticiel, vous utiliserez la troisième option.

Dans Ubuntu et certaines autres distributions basées sur Linux, le lieu partagé pour l'échange de fichiers entre les services est le /var chemin. Vous copierez les fichiers dans /var/www, qui est le chemin par défaut utilisé par Nginx pour les sites Web.

Depuis votre répertoire de projet, exécutez la commande suivante pour copier vos fichiers dans le /var/www chemin:

sudo cp -r /home/sammy/vuetify-meets-nginx-app/dist /var/www/vuetify-meets-nginx-app

Tous les fichiers seront copiés avec les mêmes autorisations qu'auparavant, c'est-à-dire pour sammy utilisateur, vous devrez donc ajouter le sammy utilisateur au même groupe d'autorisations que www-data. Vous pouvez le faire avec la commande suivante :

sudo usermod -aG www-data sammy

À ce stade, Nginx peut accéder aux fichiers nécessaires de manière sécurisée. Cependant, vous devrez copier les fichiers du projet chaque fois que vous générez une nouvelle version de l'application, ce qui compliquerait les déploiements automatiques, les outils CI/CD, etc. Une meilleure solution serait de modifier le build commande pour générer les fichiers directement dans le bon chemin.

Pour ce faire, ouvrez package.json pour éditer et ajouter le texte en surbrillance :

package.json

...
"build": "vue-cli-service build --dest /var/www/vuetify-meets-nginx-app",
...

Enregistrez et fermez votre fichier.

Vous pouvez maintenant terminer la configuration de Nginx. Ouvrez le fichier de configuration Nginx et mettez-le à jour avec le nouveau chemin d'application :

/etc/nginx/sites-available/vuetify-meets-nginx-app

server {
  listen 80;
  listen [::]:80;
  server_name your_domain OR your_server_IP;
  autoindex on;
  root   /var/www/vuetify-meets-nginx-app;
  index  index.html;
}

Enregistrez et fermez votre fichier.

Maintenant que votre fichier de site est prêt, vous devez l'activer. Pour cela, accédez au chemin des sites activés :

cd /etc/nginx/sites-enabled/

Désactivez le site par défaut pour vous assurer que vous n'avez pas deux sites activés et à l'écoute sur le même port (port 80):

sudo rm default

Enfin, créez un fichier simlink vers le fichier de configuration de votre application :

sudo ln -s /etc/nginx/sites-available/vuetify-meets-nginx-app

Nginx ne prendra en compte que les fichiers du site placés dans le répertoire activé. Vous pouvez copier le fichier de configuration directement, mais avoir des fichiers dupliqués n'est pas recommandé car vous pouvez potentiellement avoir des divergences. C'est pourquoi un simlink, un raccourci vers le fichier disponible, est une meilleure approche.

Testez pour vous assurer qu'il n'y a pas d'erreurs de syntaxe dans vos fichiers Nginx :

sudo nginx -t

Votre sortie ressemblera à ceci :

Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is
successful

Pour appliquer les modifications, redémarrez le service Nginx :

sudo systemctl restart nginx

Vous pouvez maintenant accéder à votre domaine (ou à l'adresse IP de votre serveur) pour afficher votre application de tâches prête et publiée.

Dans cette étape, vous avez configuré Nginx en tant que proxy inverse pour publier votre application.

Conclusion

Dans ce tutoriel, vous avez créé une application Vue.js et installé et configuré Vuetify. Vous avez ensuite généré une version statique de votre application prête pour la production et, enfin, configuré le service Nginx pour la publier.

Pour regarder de plus près les fichiers du projet, consultez le dépôt Github.

Dans une prochaine étape, essayez de configurer Nginx pour servir votre application via HTTPS. Pour commencer, suivez notre tutoriel, Comment sécuriser Nginx avec Let's Encrypt sur Ubuntu 20.04.

Pour en savoir plus sur Vuetify, consultez la documentation Vuetify. Si vous souhaitez étendre les fonctionnalités des composants Vuetify, consultez notre didacticiel, Extending Vuetify Form Field Validation.