spa starter kit

Codecast의 단일 페이지 애플리케이션 스타터 키트

Vue.js 및 Laravel을 기반으로 구축된 매우 독보적인 단일 페이지 애플리케이션 스타터 키트입니다.

이 패키지에는 단일 페이지 애플리케이션의 시작점 역할을 하는 두 개의 개별 프로젝트, 즉 Vue.js 프로젝트(vue-cli + webpack 템플릿으로 생성됨)와 Laravel 5.3 프로젝트가 포함되어 있습니다.

이는 새로 생성된 프로젝트일 뿐만 아니라 수정 및 확장하여 자신만의 애플리케이션이 될 수 있는 완벽하게 작동하는 애플리케이션입니다.

데모

라이브 데모는 https://spa.codecasts.rocks/에서 찾을 수 있습니다.

특징

1. 클라이언트 측
   • Vue.js 2.0 프로젝트는 vue-cli + webpack 템플릿으로 생성됩니다.
   • Vuex를 통한 중앙 집중식 상태 관리
   • Vue-router를 이용한 경로 관리
   • JWT로 인증
   • 로컬에 저장된 정보를 사용하여 사용자 로그인 상태 유지
   • Axios를 사용한 HTTP 요청
   • AirBNB가 사전 설정된 ESLint
   • Laravel의 LengthAwarePaginator와 통합된 페이지 매김
   • SweetAlert에서 제공하는 알림 및 확인 알림
2. 서버 측
   • 라라벨 5.3
   • JWT로 인증
   • 프랙탈
   • Dingo를 이용한 RESTful 웹 서비스 (예정)

전제조건

Node 와 Yarn (최신 버전)은 물론 PHP 7 과 MySQL 도 설치했는지 확인하세요.

설치

복제

이 명령은 저장소를 다운로드하여 준비합니다.

 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"

설정

1. 클라이언트 측 - vue-cli로 생성된 Vue.js 프로젝트입니다.
   • 터미널 cd client && yarn && yarn run dev .
2. 서버 측 - 이것은 Laravel 5.3 프로젝트입니다.
   • 터미널 포함:
     • webservice 폴더로 이동한 후 다음을 수행합니다.
     • Laravel 및 타사 패키지를 설치하기 위한 composer install
     • 빈 데이터베이스 파일을 생성하려면 touch database/database.sqlite
     • cp .env.example .env 설치 구성
     • php artisan key:generate
     • php artisan jwt:secret 프로젝트의 고유 키를 생성합니다.
     • php artisan migrate
     • php artisan db:seed
     • php artisan serve localhost:8000에서 애플리케이션을 제공합니다.

용법

1. 클라이언트 측
   • 귀하의 응용 프로그램은 http://localhost:8080 에서 사용할 수 있습니다.
2. 서버 측
   • API 엔드포인트는 http:// localhost:8000/api 입니다.

테스트

webservice 폴더로 이동하여 작성기 테스트 스크립트를 실행하십시오.

$ composer test 

언급할만한 것들

1. 오류 처리는 Axios의 인터셉터를 사용하여 전역적으로 수행됩니다. 그러나 해당 범위와 관련된 작업을 수행하기 위해 구성 요소 내에서 여전히 .catch() 오류를 수행할 수 있습니다. /client/src/plugins/http.js를 참조하세요.

2. 동일한 방식으로 오류 메시지는 하나의 단일 구성 요소(/client/src/modules/general/alerts.vue)에 표시되며 해당 가시성은 Vuex 속성에 의해 제어됩니다. 따라서 메시지를 표시하거나 숨기려면 모든 구성 요소 내에서 Vuex 작업을 전달하기만 하면 됩니다.

3. 서버 요청 중에 표시되는 스피너(사용자 식별에 가까운 오른쪽 상단 참조)도 Vuex 속성에 의해 제어됩니다. 표시/숨기기 절차는 위의 항목 2에 설명된 것과 동일합니다.

4. 경로와 Vuex 모듈은 작동하는 모듈 근처에 있습니다. 항상 모듈 디렉터리 내에서routes.js 및 store.js를 찾으세요. /client/src/modules/categories를 참조하세요.

5. 중요 : webservice 디렉터리에 있는 Laravel 프로젝트는 경로와 컨트롤러를 추가하는 것 이상으로 수정되었습니다. 예를 들어, webservice/app/Exceptions/Handler.php는 HttpExceptions뿐만 아니라 모든 예외를 클라이언트에 반환하도록 원래 버전에서 수정되었습니다. 다른 변경 사항도 적용됩니다. 따라서 컨트롤러와 경로를 새 프로젝트에 복사하는 대신 항상 이 프로젝트를 사용하여 자신만의 프로젝트를 구축하는 것이 좋습니다.

기여

1. 포크해!
2. 개발 에서 기능 브랜치를 생성합니다: git checkout -b feature/my-new-feature
3. 코드를 작성하세요. 코드에 주석을 달아주세요.
4. 변경 사항을 커밋합니다: git commit -am 'Add some feature'
5. 브랜치로 푸시: git push origin feature/my-new-feature
6. 브랜치를 개발 하려면 풀 요청을 제출하세요 :D

크레딧

Fábio Vedovelli 및 헌신적인 기고자.

특허

MIT 라이센스에 따라 라이센스가 부여되었습니다.