spa starter kit

Kit de démarrage d'application d'une seule page de Codecast

Un kit de démarrage d'application à page unique très avisé, construit sur Vue.js et Laravel.

Ce package contient deux projets distincts pour servir de point de départ à une application à page unique : un projet Vue.js (créé avec le modèle vue-cli + webpack) et un projet Laravel 5.3.

Il ne s'agit pas seulement de projets fraîchement créés, mais d'une application entièrement fonctionnelle qui peut être modifiée et étendue pour devenir votre propre application.

Démo

La démo en direct peut être trouvée sur https://spa.codecasts.rocks/.

Caractéristiques

1. Côté client
   • Projet Vue.js 2.0 créé avec le modèle vue-cli + webpack
   • Gestion centralisée de l'état avec Vuex
   • Gestion d'itinéraire avec Vue-router
   • Authentification avec JWT
   • Garder l'utilisateur connecté à l'aide des informations stockées localement
   • Requêtes HTTP avec Axios
   • ESLint avec préréglage AirBNB
   • Pagination intégrée à LengthAwarePaginator de Laravel
   • Alertes et alertes de confirmation fournies par SweetAlert
2. Côté serveur
   • Laravel 5.3
   • Authentification avec JWT
   • Fractale
   • Service web RESTful avec Dingo (en projet)

Conditions préalables

Assurez-vous d'avoir installé Node et Yarn (dernières versions) ainsi que PHP 7 et MySQL .

Installation

Clonage

Ces commandes téléchargeront le référentiel et le prépareront pour vous.

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

Installation

1. Côté client - il s'agit d'un projet Vue.js créé avec vue-cli
   • Avec cd client && yarn && yarn run dev .
2. Côté serveur - il s'agit d'un projet Laravel 5.3
   • Avec terminal :
     • Accédez au dossier du service Web , puis :
     • composer install pour installer Laravel et les packages tiers
     • touch database/database.sqlite pour créer un fichier de base de données vide
     • cp .env.example .env pour configurer l'installation
     • php artisan key:generate pour générer une clé unique pour le projet
     • php artisan jwt:secret pour générer une clé unique pour le projet
     • php artisan migrate pour créer toutes les tables
     • php artisan db:seed pour remplir les tables avec de fausses données
     • php artisan serve pour servir l'application sur localhost : 8000

Usage

1. Côté client
   • Votre application sera disponible sur http://localhost:8080
2. Côté serveur
   • Le point de terminaison de l'API est http:// localhost:8000/api

Essai

Accédez au dossier du service Web et exécutez le script de test du compositeur

$ composer test 

Choses à mentionner

1. La gestion des erreurs se fait globalement en utilisant les intercepteurs d'Axios. Mais vous pouvez toujours .catch() erreurs dans les composants pour effectuer des actions liées à cette portée. Voir /client/src/plugins/http.js ;

2. De la même manière, les messages d'erreur résident dans un seul composant (/client/src/modules/general/alerts.vue) et leur visibilité est contrôlée par une propriété Vuex. Donc, pour afficher/masquer les messages, il suffit de diffuser une action Vuex depuis n'importe quel composant ;

3. Le spinner affiché lors des requêtes du serveur (voir en haut à droite à côté de l'identification de l'utilisateur) est également contrôlé par une propriété Vuex. La procédure pour l'afficher/le masquer est la même que celle décrite au point 2 ci-dessus ;

4. les itinéraires et les modules Vuex vivent à proximité des modules pour lesquels ils travaillent. Recherchez toujours routes.js et store.js dans un répertoire de module. Voir /client/src/modules/categories ;

5. Important : le projet Laravel trouvé dans le webservice d'annuaire a été modifié au-delà de l'ajout de routes et de contrôleurs. Par exemple : le webservice/app/Exceptions/Handler.php a été modifié par rapport à sa version originale pour renvoyer toutes les exceptions au client, pas seulement les HttpExceptions. D'autres changements sont également en place. Notre recommandation est donc de toujours utiliser ce projet pour créer le vôtre, au lieu de copier les contrôleurs et les routes vers un nouveau projet.

Contribuer

1. Fourchette-le !
2. Créez votre branche de fonctionnalités à partir de develop : git checkout -b feature/my-new-feature
3. Écrivez votre code. Commentez votre code.
4. Validez vos modifications : git commit -am 'Add some feature'
5. Push vers la branche : git push origin feature/my-new-feature
6. Soumettre une pull request pour développer une branche :D

Crédits

Fábio Vedovelli et contributeurs dévoués.

Licence

Sous licence MIT.