1. Installation globale de Vue CLI 3.0

Commencez par installer Vue CLI 3.0 en ligne de commande. Si vous possédez encore la version 2.0, désinstallez-la avant de procéder.

// Désinstallation de l'ancienne version Vue CLI 2.0
npm uninstall -g vue-cli

// Installation de Vue CLI 3.0
npm install -g @vue/cli

// Vérification de l'installation
vue --version

2. Création d'un nouveau projet

La création d'un projet suit un assistant interactif, similaire à la méthode utilisée pour créer un projet React. Pour une première utilisation, les options s'affichent dans un menu. Choisissez Manually select features pour configurer vos besoins.

Utilisez les flèches haut/bas pour naviguer et la barre d'espace pour sélectionner ou désélectionner des options. Appuyez sur Entrée pour passer à l'étape suivante.

Ensuite, choisissez un préprocesseur CSS (par exemple, Less, Sass, ou Stylus).

Sélectionnez ensuite l'outil de formatage et de linting (tel que ESLint avec Prettier pour la compatibilité avec VS Code).

L'assistant vous demande si vous souhaitez sauvegarder vos choix de configuration pour les prochains projets. Cochez Oui pour éviter de refaire la configuration.

On vous demande ensuite où placer les fichiers de configuration (Babel, PostCSS, ESLint). Les options sont :

• In dedicated config files : pour des fichiers séparés.
• In package.json : tout regrouper dans le fichier principal.

Il est généralement recommandé de choisir des fichiers dédiés pour plus de clarté.

Enfin, un message vous demande si vous voulez sauvegarder ces paramètres comme configuration préétablie pour les futurs projets, ainsi qu'un champ pour décrire le nouveau projet. Confirmez pour lancer le téléchargement du template.

Structure du projet

Après création, la structure du projet ressemble à ceci :

• Vue CLI 2.x : dossier plus volumineux, fichiers éparpillés.
• Vue CLI 3.0 : dossier allégé. La plupart des configurations de base sont stockées dans le dossier @vue/.

Pour accéder au projet : cd nom-du-projet puis lancez le serveur avec npm run serve.

Remarque : Le fichier vue.config.js n'est pas créé par défaut. Vous devez le créer manuellement à la racine du projet pour personnaliser la configuration.

Compatibilité avec Vue CLI 2.0

Vous pouvez toujours utiliser Vue CLI 2.0 si vous le souhaitez. La documentation officielle précise qu'il est possible de basculer entre les versions en utilisant des packages distincts.

Exemple de configuration dans vue.config.js

Pour accéder aux variables d'environnement dans main.js ou dans tout fichier dédié :

var env = process.env.NODE_ENV;
console.log(env);

Voici un exemple de fichier de configuration avec quelques options :

// Configuration personnalisée de Vue CLI 3.0
module.exports = {
  // baseUrl : définir l'URL de base de l'application
  baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

  // outputDir : répertoire de sortie pour la construction (valeur par défaut : 'dist')
  // outputDir: 'dist',

  // pages : configuration pour une application multi-pages
  /*
  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    subpage: 'src/subpage/main.js'
  },
  */

  // lintOnSave : activer ou désactiver ESLint
  lintOnSave: true,

  // productionSourceMap : désactiver les source maps en production pour accélérer la construction
  productionSourceMap: false,

  // devServer : configuration du serveur de développement
  devServer: {
    port: 8085,
    host: 'localhost',
    https: false,
    open: true, // Ouvre automatiquement le navigateur
    // proxy : gérer le proxy pour éviter les problèmes CORS
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
};

Ces réglages vous permettent de contrôler le comportement du build, du serveur de développement et des outils de qualité de code.