입문

Vue.이것은 js와 Laravel이 SPA를 실시하는 강좌 문장이다.
이 기사는 4편의 연재 기사의 첫 편이다.
Vue.간단한 SPA 구축 강좌: 개술편
지금 여기↑
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue 전단편
Vue.js+Laravel 간단한 SPA 구축 강좌: LaravelAPI 편
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue와 API 결합편
Vue.js 2.5
Laravel 6.7
활용단어참조
다른 버전이라도 큰 틀은 똑같다고 생각해요.
교과서로 참고할 수 있다.

애플리케이션 구성

임무를 완수하다
찾아보기
상세 표시
등록
갱신
삭제
기능
간단한 응용 프로그램.
가장 간단한 상황에서 CRUD 구현
한 번 실천할 수 있다.

Vue.js에 프런트엔드 설치
Laravel에서 API를 구현합니다.
각 구성 요소에서
ajax에서 Laravel API 요청
데이터를 가져오고 업데이트합니다.
스파니까.
프론트 데스크의 모든 구성 요소
페이지를 다시 로드할 필요가 없습니다.js를 통해 디스플레이 전환을 진행합니다.

프로세스 구축

우선 이 문장에서
환경을 구축하고 설치하는 데 필요한 패키지입니다.
그리고
１、Vue.js로 정적 SPA 구현
2. Laravel에서 API 구현
3. 프런트엔드와 API의 결합
의 순서로 설치됩니다.
위 구조도에서
우선 파란색 Vue입니다.js 프런트엔드만 설치
녹색 LaravelAPI 설치
마지막으로 빨간색 앞부분의 Ajax 통신 부분을 실현하고 API와 결합
이런 절차.
길어지니까.
상기 3단계는 각각 다른 Qiita 보도입니다.
성품 소스 코드는 GitHub에 공개됩니다.
https://github.com/MinatoNaka/VueLaravelSpa
또한 구축 절차에 따라 한 걸음 한 걸음 제출한다
제출 목록 순서대로 진행하면...
나는 설치 절차가 이해하기 쉽다고 생각한다.
https://github.com/MinatoNaka/VueLaravelSpa/commits/master

환경 구축

그럼, 이 기사에서
환경 구축과 필요한 패키지 설치 및 설정을 완료합니다.
전제 조건은 PHP, Composer, NPM이 사용할 수 있는 환경에서 구축하는 것이다.
(필자는 Windows PC에서 구축)

Laravel 프로젝트 만들기

먼저
새 레벨 항목을 만듭니다.
디렉토리에서 다음 명령을 실행합니다.

composer create-project --prefer-dist laravel/laravel vue-laravel-spa

commit: Laravel 프로젝트 만들기
새 항목 상태에서
디스플레이 확인해 볼게요.
우선 서버 시작

cd vue-laravel-spa

php artisan serve

이 URL로 액세스합니다.
http://localhost:8000/
Laravel의 환영 페이지를 보셨다면
정상적으로 운행하다.

laravel/ui 설치

그리고composer에laravel/ui라는 패키지를 설치합니다.
이것은
Laravel에서 프론트 엔드 개발을 하기 위해서.
이것은 간단하게 기초를 제공하는 도구다.
다음 명령을 실행합니다.

composer require laravel/ui

※ 이 명령에 오류가 발생하면 여기 설명을 참조하십시오.
commit: laravel/ui 설치

laravel/ui vue 설치

방금 설치한laravel/ui 사용하기
bootstrap,vue,react 등 각양각색
전단의 기본 코드를 생성할 수 있습니다.
Laravel 6.xJavaScript 및 CSS 슬롯
이번 vue 제작의 기초.

php artisan ui vue

이 명령을 실행할 때
package.json에 다양한 프론트 백을 추가했습니다.
기본 js 파일과 샘플의 Vue 구성 요소
Laravel Mix의 구성 파일 등을 자동으로 배치합니다.
commit: laravel/ui vue 설치

프런트엔드 패키지 설치

laravel/ui의 vue 기초를 설치할 때
필요한 전단 포장은 패키지입니다.제이슨을 추적했습니다.
그것은 bootstrap, jquery, vue 등을 추적했다.
패키지를 설치합니다.

npm install

자세한 내용을 확인한 후/node_modules/ 디렉터리 만들기
부하에 각종 패키지의 디렉터리와 파일을 추가했습니다.
commit: 프런트엔드 패키지 설치
※ /node_modules/ 디렉터리는gitignore이므로 제출에 포함되지 않습니다.

Vue Router 설치

이번엔 Vue야.왜냐하면 js로 스파를 만들어요.
가상 라우터라는 패키지가 추가로 설치됩니다.
Vue Router란 무엇입니까?
Vue.js에서 SPA 루트 구축에 사용
Vue 공식의 도구입니다.

npm install --save vue-router

commit: Vue Router 설치

프런트엔드 구축 실행

필요한 소프트웨어 패키지 설치 완료
마지막으로 전방 소스 코드를 구축하려고 시도합니다.

npm run dev

※
특정 버전 또는 환경에서 이 명령이 오류를 일으킬 수 있다는 보고가 있습니다.
오류가 발생하면 여기 또는 여기 의 설명을 참조하십시오.
명령을 실행하여
Laravel Mix 구축 프로세스 수행
컴파일된 js, css/public/jspublic/css를 내보냅니다.
※ Laravel Mix에 대해서는 자세히 언급하지 않습니다.모르시는 분들은 이쪽 기사를 참조해주세요.
Laravel Mix란 무엇입니까?웹 팩을 더욱 편리하고 간단하게 합니다.라벨 이외에도 사용할 수 있습니다.
나중에 HTML 파일 설치
이 컴파일된 js, css를 읽을 것입니다.
컴파일된 파일은git 관리가 필요하지 않기 때문이다
gitignore에 추가합니다.
.gitignore

+ /public/js
+ /public/css

프런트엔드 구축 실행
앞으로 js 파일, css 파일, vue 구성 요소를 업데이트할 때
매번 npm run dev 원본 코드를 만들지 않으면 화면에 반영되지 않습니다.
하면, 만약, 만약...
실행npm run watch 시 모니터링 모드로 변경
빌드 객체 파일을 업데이트하고 저장하면 자동으로 빌드가 수행되므로 유용합니다.

끝내다

현재 환경 구축과 필요한 패키지 클래스 설치가 완료되었습니다.
다음은 "Vue.js로 정적 SPA 설치"를 시작합니다.
(다음 단계로 가기 전에 LGTM를 얻게 된다면 기쁠 것이다)
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue 전단편