spa starter kit

Kit inicial de aplicativo de página única do Codecast

Um kit inicial de aplicativo de página única altamente opinativo construído sobre Vue.js e Laravel.

Este pacote contém dois projetos separados para atuar como ponto de partida para um aplicativo de página única: um projeto Vue.js (criado com vue-cli + modelo webpack) e um projeto Laravel 5.3.

Eles não são apenas projetos recém-criados, mas um aplicativo totalmente funcional que pode ser modificado e expandido para se tornar seu próprio aplicativo.

Demonstração

A demonstração ao vivo pode ser encontrada em https://spa.codecasts.rocks/.

Características

1. Lado do cliente
   • Projeto Vue.js 2.0 criado com modelo vue-cli + webpack
   • Gerenciamento centralizado de estado com Vuex
   • Gerenciamento de rotas com roteador Vue
   • Autenticação com JWT
   • Mantenha o usuário conectado usando informações armazenadas localmente
   • Solicitações HTTP com Axios
   • ESLint com predefinição AirBNB
   • Paginação integrada com LengthAwarePaginator do Laravel
   • Alertas e alertas de confirmação fornecidos por SweetAlert
2. Lado do servidor
   • Laravel 5.3
   • Autenticação com JWT
   • Fractal
   • Serviço Web RESTful com Dingo (planejado)

Pré-requisitos

Certifique-se de ter instalado o Node e o Yarn (versões mais recentes), bem como o PHP 7 e o MySQL .

Instalação

Clonagem

Esses comandos irão baixar o repositório e prepará-lo para você.

 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"

Configurar

1. Lado do cliente - este é um projeto Vue.js criado com vue-cli
   • Com Terminal cd client && yarn && yarn run dev .
2. Lado do servidor - este é um projeto Laravel 5.3
   • Com Terminal:
     • Navegue até a pasta webservice e então:
     • composer install para instalar o Laravel e pacotes de terceiros
     • touch database/database.sqlite para criar um arquivo de banco de dados vazio
     • cp .env.example .env para configurar a instalação
     • php artisan key:generate para gerar uma chave exclusiva para o projeto
     • php artisan jwt:secret para gerar uma chave exclusiva para o projeto
     • php artisan migrate para criar todas as tabelas
     • php artisan db:seed para preencher as tabelas com dados falsos
     • php artisan serve para servir aplicação em localhost:8000

Uso

1. Lado do cliente
   • Seu aplicativo estará disponível em http://localhost:8080
2. Lado do servidor
   • O ponto final da API é http:// localhost:8000/api

Teste

Navegue até a pasta webservice e execute o script de teste do compositor

$ composer test 

Coisas que vale a pena mencionar

1. O tratamento de erros é feito globalmente usando os interceptadores do Axios. Mas você ainda pode .catch() erros nos componentes para executar ações relacionadas a esse escopo. Consulte /client/src/plugins/http.js;

2. Da mesma forma que as mensagens de erro residem em um único componente (/client/src/modules/general/alerts.vue) e sua visibilidade é controlada por uma propriedade Vuex. Portanto, para mostrar/ocultar mensagens, basta despachar uma ação Vuex de dentro de qualquer componente;

3. O spinner exibido durante as solicitações do servidor (veja o canto superior direito próximo à identificação do usuário) também é controlado por uma propriedade Vuex. O procedimento para mostrar/ocultar é o mesmo descrito no item 2 acima;

4. rotas e módulos Vuex ficam próximos aos módulos para os quais trabalham. Sempre procure rotas.js e store.js dentro de um diretório de módulo. Veja /client/src/modules/categories;

5. Importante : O projeto Laravel encontrado no diretório webservice foi modificado além de adicionar rotas e controladores. Por exemplo: o webservice/app/Exceptions/Handler.php foi modificado de sua versão original para retornar todas as exceções ao cliente, não apenas HttpExceptions. Outras mudanças também estão em vigor. Portanto nossa recomendação é sempre utilizar este projeto para construir o seu próprio, ao invés de copiar controladores e rotas para um novo projeto.

Contribuindo

1. Garfo!
2. Crie sua ramificação de recursos a partir de desenvolvimento : git checkout -b feature/my-new-feature
3. Escreva seu código. Comente seu código.
4. Confirme suas alterações: git commit -am 'Add some feature'
5. Push para o branch: git push origin feature/my-new-feature
6. Envie uma solicitação pull para desenvolver branch: D

Créditos

Fábio Vedovelli e colaboradores dedicados.

Licença

Licenciado sob a licença MIT.