L'article précédent sur la mise en place d'une application VueJS existant sur un cluster Kubernetes m'a fortement donné envie de m'attaquer au framework Javascript tendance en ce moment.

Nous allons ainsi coder un site Web réaliste en utilisant Vue.js. Dans ce tutoriel, je vais vous apprendre à créer un site Web d'une agence de voyages spécialisée en sports extrêmes avec Vue, Vuex, Vue Router, Vuetify et Docker.

Ce didacticiel est présenté sous la forme d’une série d’articles qui vous guideront de la première installation de Vue à la création d’un site Web entièrement fonctionnel pour l'agence de voyage. L'image d'en-tête ci-dessus montre le site Web que nous allons créer.  Ce tutoriel est divisé en une série de quatre parties. Voici les liens vers chaque partie de la série:

Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ce qui donne :

Vue CLI v3.4.1
✨  Creating project in /Users/admin/my-website.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.13.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 52.30s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 15.77s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-website.
👉  Get started with the following commands:

 $ cd my-website
 $ yarn serve

Placez-vous dans le dossier qui vient d'être crée et utilisez la commande serve pour lancer l'application sur l'adresse http://localhost:8080

MBP-de-admin:~ admin$ cd my-website
MBP-de-admin:my-website admin$ yarn serve
yarn run v1.13.0
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                   

 DONE  Compiled successfully in 3104ms                                                                                                                 15:02:43


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

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

Résultat :

localhost:8080


Vue a monté une application SPA pour nous et a installé Vue Router et Vuex. Nous pouvons voir le Routeur Vue en action en cliquant sur about de dans le menu en haut de la page. Cela charge la page about.

Ajouter Vuetify

MBP-de-admin:my-website admin$ vue add vuetify

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

yarn add v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.4.6
info All dependencies
└─ vue-cli-plugin-vuetify@0.4.6
✨  Done in 3.26s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 7.44s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     src/assets/logo.svg
     src/plugins/vuetify.js
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue
     yarn.lock

   You should review these changes with git diff and commit them.

in package.json :

    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "tabWidth": 4,
    "singleQuote": true
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

MBP-de-admin:my-website admin$ npm run lint

> my-website@0.1.0 lint /Users/admin/my-website
> vue-cli-service lint

The following files have been auto-fixed:

  src/App.vue
  src/components/HelloWorld.vue
  src/main.js
  src/plugins/vuetify.js
  src/views/Home.vue

 DONE  All lint errors auto-fixed.