Les projets front-end peuvent être classés en plusieurs catégories : mini-programmes, pages H5 (notamment dans les WebViews), sites institutionnels PC, systèmes de gestion back-office, et applications natives via des technologies comme Electron ou Weex. Certains frameworks, tels qu’uni-app, permettent même de cibler plusieurs plateformes à partir d’une seule base de code.

Cet article se concentre sur la mise en place d’un système de gestion administrative avec Vue.js, en utilisant @vue/cli comme point de départ.

Choix techniques initiaux

Pour ce type d’application, vue-router et vuex sont indispensables. D’autres décisions influencent fortement l’architecture :

• TypeScript vs JavaScript : TypeScript apporte une meilleure robustesse grâce au typage statique et à l’autocomplétion dans les IDE. Cependant, son adoption dépend de la familiarité de l’équipe et du calendrier du projet. Dans les gros projets, on peut envisager inversify pour l’injection de dépendances.
• Préprocesseurs CSS : Sass, Less ou Stylus peuvent être utilisés directement dans les balises <style lang="...">. L’utilisation de PostCSS est possible mais nécessite une configuration manuelle.
• Normes de code : Prettier combiné à ESLint (ou TSLint pour TypeScript) permet de standardiser le style. Les règles doivent couvrir les points critiques comme l’usage des points-virgules, les variables non définies ou inutilisées.
• Tests : Bien que souvent négligés en contexte métier, les tests unitaires (Jest, Mocha) et end-to-end (Cypress, Puppeteer) sont essentiels pour la qualité, surtout dans les projets open source.

Fichiers de configuration essentiels

Après l’initialisation via vue create, voici les fichiers à ajouter ou personnaliser :

• .editorconfig : uniformise les paramètres d’indentation entre éditeurs.
• .gitignore : exclut les dossiers comme node_modules/ ou dist/.
• .eslintrc.js : configure les règles de linting. Exemple simplifié :

module.exports = {
  root: true,
  env: { node: true },
  extends: ['plugin:vue/recommended'],
  parserOptions: { parser: 'babel-eslint' },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    semi: [0],
    quotes: [1, 'single'],
    'no-unused-vars': [2, { vars: 'local', args: 'none' }],
    'vue/prop-name-casing': ['error', 'camelCase'],
    'vue/max-attributes-per-line': ['error', {
      singleline: 3,
      multiline: { max: 1, allowFirstLine: true }
    }]
  }
};

• postcss.config.js : active autoprefixer selon les navigateurs cibles.
• babel.config.js : gère les transformations JS modernes.
• .stylelintrc (optionnel) :

{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-scss"]
}

• vue.config.js : personnalise le comportement de @vue/cli, notammeent le proxy de développement :

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

• webpack.config.js (pour les outils externes comme VS Code) :

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '_c': path.resolve(__dirname, 'src/components')
    }
  }
};

• Dossier .vscode/ : contient des réglages spécifiques à l’IDE (débogage, formatage).

Gestion de version avec Git

Une stratégie claire améliore la collaboration :

• Flux Git : que ce soit Git Flow, GitHub Flow ou une branche unique, il faut documenter la méthode retenue.
• Messages de commit : adopter une convention comme Conventional Commits permet de générer automatiquement un journal des modifications (CHANGELOG.md).
• Hooks Git : avec husky et lint-staged, on peut exécuter des vérifications avant chaque commit :

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "git add"],
    "*.{css,scss,vue}": ["stylelint --fix", "git add"]
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

Documentation et tests des composants

Outre le fichier README.md, il est utile de maintenir :

• CHANGELOG.md : historique des versions.
• Une documentation interactive des composants via Storybook ou Vue Styleguidist.

Intégration et déploiement continus

En entreprise, Jenkins ou GitLab CI sont courants. Pour les projets publics, Travis CI ou GitHub Actions sont privilégiés. Le déploiement s’appuie souvent sur Docker et Kubernetes.

Mocking et proxy API

Pendant le développement, les appels API sont redirigés via le proxy de vue.config.js. Pour simuler des réponses sans backend, mockjs ou axios-mock-adapter sont efficaces.

Bibliothèques courantes

• UI : Element Plus, Ant Design Vue
• Date : dayjs (léger), moment.js (legacy)
• Utilitaires : lodash, js-cookie, hashids
• Requêtes : axios
• Graphiques : ECharts, Chart.js
• Glisser-déposer : Vue.Draggable
• Gestion des balises meta : vue-meta

Organisation des dossiers

src/
├── assets/          # Images, polices, etc.
├── components/      # Composants réutilisables
├── layouts/         # Composants de mise en page
├── views/           # Pages principales (une par route)
├── router/          # Configuration de vue-router
├── store/           # Modules Vuex (state, mutations, actions)
├── utils/           # Fonctions utilitaires
├── styles/          # Feuilles de style globales
├── config/          # Constantes, URLs d’API
└── shared/          # Code partagé entre modules

Gestion des permissions

Les permissions se divisent en :

• Accès aux routes : contrôlé via des gardes de navigation dans vue-router.
• Permissions fonctionnelles : affichage conditionnel d’éléments UI selon le rôle utilisateur.

La structure des menus et les droits sont généralement fournis par une API au démarrage de l’application.