URL du dépôt Git :

https://exemple.com/vue3-template.git

Installation du projet

• Documentation officielle Vue.js
• Suivez les instructions selon vos besoins:

Installation d'ESLint: Configuration récente avec approche plate

• Site web : Outil de vérification et correction de problèmes dans le code JavaScript - ESLint - Outil de vérification de code JavaScript modulaire
• pnpm add @typescript-eslint/parser //Analyseur de syntaxe TypeScript
• pnpm add @typescript-eslint/eslint-plugin -D //Règles par défaut pour TypeScript

npm init @eslint/config

Installation de Prettier
-----------

- pnpm add eslint-plugin-prettier eslint-config-prettier prettier -D
- eslint-plugin-prettier : Utilisation de ce plugin
- eslint-config-prettier : Résolution des conflits
- Création du fichier .prettierrc.json
- ```
{
    "semi": true,
    "tabWidth": 2,
    "singleQuote": true,
    "printWidth": 80,
    "bracketSpacing": true,
    "endOfLine": "auto",
    "trailingComma": "all"
}

Activation de Prettier

• Configuration dans le fichier eslint.config.js généré

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettierPlugin from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default defineConfig([
  {
    ignores: ['node_modules', 'dist', 'public', 'src/assets/**/*'],
  },
  // Correspondance avec les types de fichiers ci-dessus et définition des variables globales pour l'environnement navigateur
  {
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
    languageOptions: { globals: globals.browser },
  },
  // Utilisation du plugin js avec l'ensemble de règles 'js/recommended'
  {
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
  },
  // Importation de la configuration recommandée de tseslint
  tseslint.configs.recommended,
  // Importation de la configuration de base du plugin Vue
  pluginVue.configs['flat/essential'],
  // Configuration pour tous les fichiers .vue avec options d'analyseur utilisant tseslint
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } },
  },
  // Configuration pour tous les fichiers .js, .jsx, .ts, .tsx et .vue avec le plugin prettier
  // Règle prettier/prettier définie au niveau avertissement
  {
    files: ['**/*.{js,jsx,ts,tsx,vue}'],
    plugins: { prettierPlugin },
    rules: {
      'prettier/prettier': 'error',
    },
  },
    /**
     * Règles JavaScript
     * @see https://eslint.org/docs/latest/rules
     */
  {
    name: 'Règles JavaScript',
    files: ['**/*.{js,mjs,cjs,vue}'],
    rules: {
      // Avertissement pour console.log
      'no-console': 'warn',
      // Interdiction des déclarations de fonctions en double
      'no-func-assign': 2,
      // Commentaires en ligne serrés
      'no-inline-comments': 2,
      // Utilisation de === au lieu de ==
      eqeqeq: [2, 'allow-null'],
      // Les blocs d'instructions ne peuvent pas être vides
      'no-empty': 0,
      // always-multiline : mode multiligne doit avoir une virgule finale, mode monoligne ne doit pas en avoir
      'comma-dangle': 0,
      // Saut de ligne obligatoire à la fin du fichier
      'eol-last': 2,
      'no-undef': 0,
    },
  },
  // Élimination des conflits
  prettierConfig,
]);

Ajout d'une bibliothèque d'icônes

• Téléchargement depuis : iconfont - Bibliothèque d'icônes vectorielles d'Alibaba
• Ajouter les icônes nécessaires à votre projet
• Télécharger localement avec la méthode Font Class et importer dans le projet. Ici, je les place dans le dossier src/assets.
• Ensuite, importer la feuille de style des icônes dans main.ts.

import './assets/icon/iconfont/iconfont.css';

- Utilisation : dans la balise p avec le class, utiliser iconfont plus le nom dans iconfont.css.

Encapsulation des fonctions utilitaires

Consultez les articles section "utils" pour des explications sur l'encapsulation des fonctions utilitaires courantes.

• La configuration sera mise à jour régulièrement, l'adresse du projet est en haut, si cela vous aide, donnez un pouce.