SPlayer : Architecture et déploiement d'un lecteur audio open-source avec Vue 3 et Electron
Présentation de l'architecture SPlayer
SPlayer est une application de bureau de lecture audio open-source conçue avec une stack moderne comprenant Vue 3, TypeScript, Naïve UI et Electron. L'interface utilisateur s'inspire des directives Material Design et intègre des fonctionnalités d'extraction de couleurs dynamiques basées sur les pochettes d ...
Publié le 17 juillet à 07h08
Exploration technique lors d’un entretien réel : Du full-stack Java aux frameworks front-end
Interviewer (I) : Bonjour, je suis en charge de l’évaluation technique. Nous allons discuter de vos projets passés et de votre stack. Présentez-vous brièvement.
Candidat (C) : Bonjour, je suis Lucas, 26 ans, diplômé en informatique d’une université française. Je travaille depuis environ 4 ans comme développeur full‑stack Java chez une entrepris ...
Publié le 14 juillet à 01h32
Composant de Captcha pour la Connexion Frontend
Une solution de captcha de connexion entièrement frontend, proposant deux implémentations en JavaScript natif et Vue 3, incluant trois types de captcha : arithmétique, caractères aléatoires et curseur coulissant.
Démonstration des Effets
Captcha Arithmétique
Captcha à Caractères Aléatoires
Captcha à Curseur Coulissant
Structure des Répertoires
...
Publié le 27 juin à 00h07
Optimisation de l'Interface et Nouvelles Fonctionnalités pour une Application Electron sur OpenHarmony
1. Navigation et Indication de Route Active
Pour améliorer l'orientation de l'utilisateur, une mise en surbrillance dynamique a été ajoutée aux menus de navigation. Plutôt que de dupliquer le code HTML pour chaque élément, une approche basée sur un tableau de configuration et une boucle v-for est utilisée pour rendre le composant plus maintenab ...
Publié le 26 juin à 19h58
Implémentation manuelle des API de Vue 3.0
Dans Vue 2.x, la réactivité était implémentée via Object.defineProperty. Vue 3.x utilise désormais l'objet natif Proxy pour intercetper les opérations sur un objet.
// Objet source
const data = { name: 'js', age: 25 };
// Proxy pour intercepter get/set
const proxy = new Proxy(data, {
get(target, key) {
console.log('Lecture de la propriét ...
Publié le 24 juin à 02h19
Intégration des couches de tuiles OpenLayers dans une application Vue3 avec TypeScript
Dans le développement web contemporain, l'affichage de cartes interactives est une exigence courante. OpenLayers se distingue comme une bibliothèque cartographique open source robuste et performante. Cependant, l'implémentation directe de la logique d'initialisation dans un composant Vue peut mener à un code volumineux et peu maintenable, limit ...
Publié le 22 juin à 20h44
Transformer une application Vue 3 en Exécutable avec Electron
Ce guide détaille le processus d'empaquetage d'une application Vue 3 en un programme exécutable pour Windows en utilisant Electron.
Configuration d'Electron
1. Installation d'Electron
Ajoutez Electron comme dépendance de développement à votre projet.
# Avec npm
npm install --save-dev electron
# Avec yarn
yarn add --dev electron
2. Installat ...
Publié le 21 juin à 22h48
Configuration d'un Projet Vue 3 avec Vite, ESLint, Prettier et Husky
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 ...
Publié le 21 juin à 00h13
Requêtes de tables avec Vue3 et Element Plus : gestion des conditions, liaison de pagination et bonnes pratiques
Problèmes clés des requêtes de tables
Les requêtes de tables dans les applications web présentent trois défis principaux : la gestion des conditions de filtre, la logique de réinitialisation et la synchronisation de la pagination. Voici une approche standardisée pour les résoudre.
Gestion des conditions de requête avec un objet unifié
Utiliser ...
Publié le 17 juin à 19h00
Le cycle de vie dans Vue3
Cycle de vie dans Vue3
6.1 Comprendre le cycle de vie
6.1.1 Diagramme du cycle de vie
Comme illustré dans le schéma, un composant traveres huit étapes distinctes depuis sa créattion jusqu'à sa destruction finale :
beforeCreate : Avant la création de l'instance
created : Après la création de l'insatnce
beforeMount : Avant le montage du DOM
m ...
Publié le 12 juin à 02h59