4. Vue 설정 component 생성, 등록

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

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

https://nodejs.org/ko/

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

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

4. web.php 수정

<?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></example-component>

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

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

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

11. TaskComponent.vue

<template>

<div class="container">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">Example Component</div>

<div class="card-body">

I'm an Task Component

</div>

</div>

</div>

</div>

</div>

</template>

<script>

export default {

mounted() {

console.log('Component mounted.')

}

}

</script>

12. npm run watch 빌드해준다.

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

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

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

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