8 Vue CLI

Arborescence

node_modules

Ce dossier reprend l’ensemble des plugins de vue.js

public

components

Ce dossier comprends l’ensemble des composants réutilisable par d’autres composants.
Il représente des parties de pages par exemple: une barre de navigation ou un menu.

router

Ce dossier reprend l’ensemble des routes pour une single page application.

index.js

import { createRouter, createWebHistory } from 'vue-router' //importe le router de vue.js
import LoginView from '@/views/home/LoginView.vue' //ajoute la page LoginView
import RegisterView from '@/views/home/RegisterView.vue' //ajoute la page RegisterView
import LostView from '@/views/home/LostView.vue' //ajoute la page LostView
import DashboardView from '@/views/modules/DashboardView.vue' //ajoute la page DashboardView

const routes = [ //Liste l'ensemble des routes
  {
    path: '/',  //route d'arrivé sur le / page d'acceuil
    name: 'home',
    component: LoginView
  },
  {
    path: '/register',  // route qui mène vers le /register -> soit la page RegisterView
    name: 'register',
    component: RegisterView
  },
  {
    path: '/lost', // route qui mène vers le /lost -> soit la page LostView
    name: 'lost',
    component: LostView
  },
  {
    path: '/dashboard', // route qui mène vers le /dashboard -> soit la page DashboardView
    name: 'dashboard',
    component: DashboardView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),  // utilise la version avec / plutôt que #
  routes
})

export default router  // export le router pour qu'il puisse être utilisé sur d'autres pages

views

Contient l’ensemble des pages Vue.
Les pages sont diviser par 3 :
-> Une section template qui reprend le code HTML.
-> Une partie script qui reprend les fonctions et les variables Javascript.
-> Une partie style pouvant être scoped (pour limité à la page), cette partie contient le css

________________HTML________________
<template>
<form class="form-signin" method="POST" action="/login">
  <div class="imgcontainer">
    <img src="@/assets/img/logo.png" alt="Logo" class="logo">
  </div>

  <div class="container">
    <label for="uname"><b>Nom de compte</b></label>
    <input type="text" placeholder="Entrez votre nom de compte" name="username" pattern="(?=[a-z]).{4,}" required>

    <label for="psw"><b>Mot de passe</b></label>
    <input type="password" placeholder="Entrez votre mot de passe" name="password" required>
    <button type="submit">Login</button>
    <span class="psw"><a href="/lost">Mot de passe oublié?</a></span>
    <span class="register"><a href="/register">S'enregistrer</a></span>
  </div>

</form>
</template>
________________CSS________________
<style> 
  @import '@/assets/css/login.sass'; //Import le css d'un fichier externe

</style>
_____________Javascript_____________
<script>

export default {
  name: 'LoginView' //rend la page accessible sur les autres pages
}
</script>

App.vue

équivalent d’un header ou d’un footer à la création d’un projet vue cli.

_________________HTML_________________
<template>
  <nav> //router-link est une balise permettant d'utiliser les route définie dans index.js
    <router-link to="/">Home</router-link> |
    <router-link to="/register">register</router-link> |
    <router-link to="/dashboard">dashboard</router-link>
  </nav>
  <router-view/> //indique d'utiliser le router de vue
</template>
__________________CSS__________________
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

main.js

Comporte le code permettant de construire l’application.

import { createApp } from 'vue' //importe les librairies
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

createApp(App).use(router).mount('#app') //créer l'application

tests

?