4. Vue 설정 component 생성, 등록

4. Vue 설정 component 생성, 등록

1. 라라벨 프로젝트에 이미 Vue관련 파일이 있다.

2. node가 설치를 해야한다. (설치 생략)

https://nodejs.org/ko/

3. 프로젝트 폴더안에서 npm install을 입력한다.

아래와 같이 노드모듈이 설치가된다.

4. web.php 수정

Auth :: routes ();

Route :: get ( ' / ' , ' HomeController@index ' ) -> name ( ' home ' );

Route :: resource ( ' /tasks ' , ' TaskController ' );

5. app/Http/Controllers/Auth/LoginController.php

로그인 후 이동할 주소를 설정해준다.

protected $redirectTo = ' / ' ;

[수정할 파일 목록]

LoginController.php

RegisterController.php

6. views/welcome.blade.php 파일을 삭제한다.(라우터에서 삭제를 했기 때문에 필요가 없다.)

7. resources/views/home.blade.php 파일에 component 를 삽입한다.

< example - component >

8. 브라우저에서 컴포넌트가 삽입되어있는지 확인해본다. ExampleComponent.vue는 기본파일로 생성되어 있다.

9. components폴더에 TaskComponent.vue 파일을 신규로 생성한다.

10. app.js 파일에서 TaskComponent.vue 컴포넌트파일을 추가해준다.

11. TaskComponent.vue

Example Component

I'm an Task Component

export default { mounted () { console . log ( ' Component mounted. ' ) } }

12. npm run watch 빌드해준다.

아래는 참고사항, 해당스크립트 명령 설명

13. home.blade.php 파일에서 컴포넌트명을 변경한다.

14. 브라우저에서 확인해보자

15. npm run watch 실시간 빌드감시 해준다.

from http://anko3899.tistory.com/381 by ccl(A) rewrite - 2020-04-02 15:01:40