요즘, 프론트 엔드 개발로 뜨는 Vue와 PHP Framwork인 Laravel을 연동해 보는 방법을 알아보겠습니다.
Laravel에서는 Vue와 쉽게 연동할 수 있도록 지원해 주는데, 차근차근 알아보도록 해요!
컴포져와 PHP는 세팅 되어 있다는 가정 하에 시작 하도록 하겠습니다.
먼저, 컴포져로 새로운 라라벨 프로젝트를 만들어 줍니다.
composer create-project laravel/laravel vue-sample
프로젝트가 완성되면, 해당 프로젝트로 이동하여
laravel ui 를 컴포져에 추가 해 줍니다.
cd vue-sample
composer require laravel/ui
그다음, vue 설치와 연동을 합니다.
php artisan ui vuenpm installnpm install이 끝나면 일단 npm으로 컴파일을 구동해야 하고, php artisan serve로 서버도 구동해 줍시다.
npm run watch다른 터미널을 킨 뒤
php artisan serve
이제 실제 소스코드에 뷰를 연동 합니다.
일단 지금은 뷰와 라라벨 연동이 목적이니 기본 코드를 수정 하기 위하여 welcome.blade.php 파일을 열어
기존 코드는 전부 지우고 코드를 아래와 같이 수정 합니다.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel - Vue test</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="{{asset('js/app.js')}}"></script>
</html>
그 후 resources/js/app.js 의 소스 코드를 아래와 같이 수정 합니다.
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
import App from './App.vue'
const app = new Vue({
el: '#app',
render: h => h(App)
});
여기서 el은 welcome.blade.php에 추가한 app div 입니다.
위에 코드를 보면 알겠지만 아직 App.vue를 생성 하지 않았는데 호출 하였습니다.
따라서, resource/js 폴더 밑에 App.vue를 생성해 준 뒤 아래와 같은 코드를 넣어 주도록 합니다.
<template>
<div>
<h1>Laravel + Vue Test</h1>
</div>
</template>그리고 결과물을 확인하면
연동이 된 것을 확인 할 수 있습니다.
다음에는 연동된 Laravel + Vue 프로젝트에서, Vue route를 연동하는 방법을 알아 보도록 하겠습니다.
도움이 되셨다면 광고 한번씩 눌러 주시면 감사합니다!
'PHP > PHP' 카테고리의 다른 글
| Laravel, Laravel Octane 그냥 공부 메모.. (0) | 2023.04.04 |
|---|---|
| Laravel - passport를 이용한 로그인 구현 (Oauth) (2) | 2022.05.03 |
| [Laravel] AWS S3 연동하기 및 파일 업로드 구현 (0) | 2019.12.11 |
| [PHP Mailer] PHP 메일 발송하기 (0) | 2019.11.27 |
| PHP를 이용한 동영상 썸네일 추출 (2) | 2018.03.13 |
