vue2-elm

# Aperçu du projet Il s'agit d'un exemple d'application monopage (SPA) à grande échelle écrite avec vue2 + vuex, utilisant le scénario de livraison de repas d'Ele.me comme matériau. Le fichier README indique que l'auteur a mis environ deux mois pour concevoir et réaliser le projet, de zéro, durant son temps libre. Le projet se positionne comme un exercice pratique aux fonctionnalités complètes et à la logique complexe, plutôt que comme un simple démo. L'auteur précise que ce projet n'a aucun lien avec le cours Ele.me de Mooc.com et qu'il s'agit d'un exercice personnel ; pour des commandes réelles, le client officiel doit être utilisé. # Pile technique vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg. Le README signale que, en raison de l'utilisation intensive des nouvelles fonctionnalités ES6/7, une version de node supérieure à 6.0 est requise. # Exécution du projet ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install ou yarn (recommandé) npm run dev ``` # Données d'interface et projets associés Toutes les données d'interface proviennent du système backend associé node-elm. Pour expérimenter le développement simultané du front-end et du back-end, vous pouvez télécharger le système backend, auquel cas la commande de démarrage est `npm run local` au lieu de `npm run dev`. De plus, une page de gestion backend basée sur element-ui, vue2-manage, est fournie. Elle peut être ignorée pour le développement front-end uniquement. Le README mentionne également que l'adresse de prévisualisation et les interfaces doivent être accédées via https. # Fonctionnalités implémentées - Fonction de localisation - Sélection de la ville - Recherche d'adresse - Affichage de la liste des commerçants à proximité de l'adresse sélectionnée - Recherche de nourriture et de restaurants - Tri et filtrage par distance, ventes, notes, plats signatures, mode de livraison, etc. - Page de liste des aliments du restaurant - Fonctionnalité de panier - Page d'évaluation du magasin - Page de détails d'un aliment - Page de détails du commerçant - Connexion et inscription - Modification du mot de passe - Centre personnel - Envoi de SMS et vérification vocale - Fonction de commande - Liste des commandes - Détails de la commande - Téléchargement de l'App - Ajout, suppression et modification de l'adresse de livraison - Informations sur le compte - Centre de service - Coupons - Téléchargement de photo de profil Fonctionnalité non implémentée : le paiement (marqué dans le README comme étant irréalisable). # Structure du projet Le code source se trouve dans le répertoire src, comprenant components (composants communs common, footer, header tels que pop-ups, panier, compte à rebours, animation de chargement, étoiles de notation, liste de restaurants, composants de pied et d'en-tête), config (commutation d'environnement env.js, récupération de données fetch.js, méthodes courantes mUtils.js, conversion d'unités rem.js), images, page (répertoires de pages divisés par métier, tels que balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcard), plugins, router, service (gestion unifiée des interfaces getData.js, données temporaires tempdata), store (action, getters, index, modules, mutation-types, mutations de vuex) et style (common.scss, mixin.scss, swiper.min.css). Le répertoire racine contient également build (configuration webpack), config (chemins de packaging), elm (fichiers de mise en ligne), screenshots (captures d'écran), App.vue, main.js, index.html, etc. Le README dénombre 56 répertoires et 203 fichiers. # Résumé de l'auteur et objectifs futurs Le README mentionne que la logique web impliquant l'argent est complexe, avec de nombreux types de commerçants et d'aliments, et des interactions de page complexes. La gestion des données et de la logique lors de l'écriture du panier et des commandes a été difficile, d'autant plus qu'il n'y avait pas de design ni de documentation API, obligeant l'auteur à explorer progressivement. L'auteur estime que vuex est indispensable pour traiter des logiques d'interaction complexes et que vue + vuex peut tout à fait servir à créer de grands projets monopages. Les objectifs futurs incluent : construire un système backend pour simuler la plateforme de livraison avec node.js, créer une version APP native cross-platform Android et iOS, et si le temps le permet, sortir une version pour les vendeurs. # Démonstration et licence Le README fournit une adresse de démo en ligne (prévisualisation via le mode mobile de Chrome recommandée) et un code QR pour mobile, ainsi que des captures d'écran de la liste des magasins, du filtrage, de la liste des aliments, du panier, de la confirmation de commande, de la recherche, de la connexion et du centre personnel. Les échanges sur le projet peuvent se faire via le groupe Gitter ou via Issues/PR. La licence est GPL.