Configuration de l'environnement de développement

La première étape consiste à installer Node.js. Téléchargez le paquet d'installation depuis le site officiel et vérifiez l'installation via le terminal :

node -v
npm -v

Le retour des numéros de version confirme que l'installation est réussie. Pour optimiser la vitesse de téléchargement des dépendances, configurez le registre npm vers un miroir local :

npm config set registry https://registry.npmmirror.com/

Vérifiez la configuration avec npm config get registry. Si vous devez temporairement utiliser le registre officiel pour un paquet spécifique, utilisez l'argument --registry=https://registry.npmjs.org/ lors de l'installation.

Installation de Vue CLI et gestion des permissions

L'installation globale de Vue CLI peut rencontrer des problèmes de permissions sur macOS. L'utilisation de sudo est déconseillée car elle peut corrompre les permissions du répertoire global. La méthode recommandée est de rediriger les installations globales vers un répertoire utilisateur :

mkdir ~/.npm-packages
npm config set prefix '~/.npm-packages'

Ensuite, ajoutez ce chemin à votre variable d'environnement PATH en modifiant votre fichier de configuration shell (par exemple, ~/.zshrc) :

export PATH="$HOME/.npm-packages/bin:$PATH"

Rechargez le profil et installez l'outil :

source ~/.zshrc
npm install -g @vue/cli
vue --version

Génération et configuration du projet

Initialisez une nouvelle application avec la commande vue create mon-projet. L'interface interactive vous proposera plusieurs configurations. Voici les recommandations pour une architecture moderne :

• Babel : Indispensable pour la rétrocompatibilité du JavaScript.
• TypeScript : À activer si votre équipe exige un typage statique.
• Router : Nécessaire pour la gestion des vues et la navigation SPA.
• Vuex / Pinia : Recommandé pour les applications nécessitant un état global complexe.
• CSS Pre-processors : Choisissez Sass/SCSS pour une meilleure maintenabilité des styles.
• Linter / Formatter : L'association d'ESLint et Prettier garantit un code propre et uniforme.

Une fois la générationn terminée, accédez au répertoire et lancez le serveur de développement :

cd mon-projet
npm run serve

Personnalisation du port du serveur

Plutôt que de modifier les scripts dans le fichier package.json, la meilleure pratique avec Vue CLI consiste à utiliser le fichier de configuration dédié. Créez ou modifiez vue.config.js à la racine du projet :

module.exports = {
  devServer: {
    port: 9000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

Cette approche centralise la configuration du serveur de développement et permet d'ajouter facilement des proxys pour les requêtes API.

Architecture du répertoire du projet

Comprendre la structure générée est crucial pour le développement quotidien :

• node_modules/ : Contient toutes les dépendances tierces. Ne jamais modifier ce dossier manuellement ; utilisez npm install pour régénérer.
• public/ : Répertoire des ressources statiques servies telles quelles. Le fichier index.html sert de squelette HTML où l'application Vue sera injectée.
• src/ : Le cœur de l'application.
  • assets/ : Ressources (images, styles) traitées par le bundler.
  • components/ : Composants réutilisables (boutons, formulaires).
  • views/ : Composants représentant des pages entières, liés au routeur.
  • router/ : Configuration des routes et de la navigation.
  • store/ : Gestion de l'état global de l'application.
  • App.vue : Le composant racine.
  • main.js : Le point d'entrée qui initialise l'instance Vue et monte les plugins.
• vue.config.js : Fichier de configuration optionnel pour surcharger les paramètres par défaut de Webpack.

Intégration de la bibliothèque UI Ant Design Vue

Pour enrichir l'interface utilisateur, installez la bibliothèque de composants ainsi que son package d'icônes :

npm install ant-design-vue @ant-design/icons-vue

Ensuite, configurez l'importation globale dans le fichier src/main.js. Voici une approche optimisée pour l'enregistrement des composants et des icônes :

import { createApp } from 'vue';
import RootComponent from './App.vue';
import ApplicationRouter from './router';
import GlobalStore from './store';

import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import * as IconLibrary from '@ant-design/icons-vue';

const vueInstance = createApp(RootComponent);

// Enregistrement des plugins principaux
vueInstance.use(GlobalStore);
vueInstance.use(ApplicationRouter);
vueInstance.use(AntDesignVue);

// Enregistrement dynamique de toutes les icônes
const iconKeys = Object.keys(IconLibrary);
iconKeys.forEach(iconName => {
    vueInstance.component(iconName, IconLibrary[iconName]);
});

// Montage de l'application sur le nœud DOM
vueInstance.mount('#app');

Cette configuration permet d'utiliser n'importe quel composant ou icône d'Ant Design directement dans vos templates Vue sans avoir à les importer individuellement dans chaque fichier.