spa starter kit

Kit de inicio de aplicaciones de una sola página de Codecast

Un kit de inicio de aplicación de página única muy testarudo construido sobre Vue.js y Laravel.

Este paquete contiene dos proyectos separados que actúan como punto de partida para una aplicación de página única: un proyecto Vue.js (creado con vue-cli + plantilla de paquete web) y un proyecto Laravel 5.3.

No son sólo proyectos recién creados, sino una aplicación completamente funcional que puede modificarse y ampliarse para convertirse en su propia aplicación.

Manifestación

La demostración en vivo se puede encontrar en https://spa.codecasts.rocks/.

Características

1. Lado del cliente
   • Proyecto Vue.js 2.0 creado con vue-cli + plantilla de paquete web
   • Gestión de estado centralizada con Vuex
   • Gestión de rutas con Vue-router
   • Autenticación con JWT
   • Mantener al usuario conectado utilizando información almacenada localmente
   • Solicitudes HTTP con Axios
   • ESLint con ajuste preestablecido de AirBNB
   • Paginación integrada con LongitudAwarePaginator de Laravel
   • Alertas y alertas de confirmación proporcionadas por SweetAlert
2. Lado del servidor
   • Laravel 5.3
   • Autenticación con JWT
   • fractales
   • Servicio web RESTful con Dingo (planificado)

Requisitos previos

Asegúrese de haber instalado Node y Yarn (últimas versiones), así como PHP 7 y MySQL .

Instalación

Clonación

Estos comandos descargarán el repositorio y lo prepararán para usted.

 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"

Configuración

1. Lado del cliente: este es un proyecto Vue.js creado con vue-cli
   • Con Terminal cd client && yarn && yarn run dev .
2. Lado del servidor: este es un proyecto Laravel 5.3
   • Con terminal:
     • Navegue a la carpeta del servicio web y luego:
     • composer install para instalar Laravel y paquetes de terceros
     • touch database/database.sqlite para crear un archivo de base de datos vacío
     • cp .env.example .env para configurar la instalación
     • php artisan key:generate para generar una clave única para el proyecto
     • php artisan jwt:secret para generar una clave única para el proyecto
     • php artisan migrate para crear todas las tablas
     • php artisan db:seed para llenar las tablas con datos falsos
     • php artisan serve para servir la aplicación en localhost:8000

Uso

1. Lado del cliente
   • Su aplicación estará disponible en http://localhost:8080
2. Lado del servidor
   • El punto final de la API es http:// localhost:8000/api

Pruebas

Navegue a la carpeta del servicio web y ejecute el script de prueba del compositor.

$ composer test 

Cosas que vale la pena mencionar

1. El manejo de errores se realiza globalmente mediante el uso de interceptores de Axios. Pero aún puede detectar errores .catch() dentro de los componentes para realizar acciones relacionadas con ese alcance. Consulte /client/src/plugins/http.js;

2. De la misma manera, los mensajes de error se encuentran en un solo componente (/client/src/modules/general/alerts.vue) y su visibilidad está controlada por una propiedad de Vuex. Entonces, para mostrar/ocultar mensajes es solo cuestión de enviar una acción de Vuex desde cualquier componente;

3. El control giratorio que se muestra durante las solicitudes del servidor (ver arriba a la derecha cerca de la identificación del usuario) también está controlado por una propiedad de Vuex. El procedimiento para mostrarlo/ocultarlo es el mismo que se describe en el punto 2 anterior;

4. Las rutas y los módulos Vuex viven cerca de los módulos para los que trabajan. Busque siempre route.js y store.js dentro de un directorio de módulo. Consulte /client/src/modules/categories;

5. Importante : el proyecto Laravel que se encuentra en el directorio del servicio web se modificó más allá de agregar rutas y controladores. Por ejemplo: webservice/app/Exceptions/Handler.php se modificó desde su versión original para devolver todas las excepciones al cliente, no solo HttpExceptions. También se han implementado otros cambios. Por eso, nuestra recomendación es utilizar siempre este proyecto para crear el suyo propio, en lugar de copiar controladores y rutas a un nuevo proyecto.

Contribuyendo

1. ¡Bifurcarlo!
2. Cree su rama de funciones desde desarrollo : git checkout -b feature/my-new-feature
3. Escribe tu código. Comenta tu código.
4. Confirme sus cambios: git commit -am 'Add some feature'
5. Empujar a la rama: git push origin feature/my-new-feature
6. Envíe una solicitud de extracción para desarrollar la rama: D

Créditos

Fábio Vedovelli y colaboradores dedicados.

Licencia

Licenciado bajo la licencia MIT.