개발환경
- Laravel 8
- Laravel mix 6
- node ver → 12.14
- Vue3
1.Laravel 프로젝트 생성
composer create-project --prefer-dist laravel/laravel="8.*" laravel-vue3
2.npm 설치 및 Vue3 해당 종속 항목 설치
npm installnpm i vue@next && npm i vue-loader@next -dev
3.Laravel mix 설정
'webpack.mix.js' 파일을 열어서 .vue()를 추가
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
4.Vue3 컴포넌트 생성
라라벨 blade템플릿 환경 기준으로 '/resources/js/components' 경로에 사용 할 vue3 컴포넌트를 생성하고 코드를 작성해준다. 아래 예시의 컴포넌트 파일명은 MyComponent.vue
// MyComponent.vue
<template>
<h2>
{{ message }}
</h2>
</template>
<script>
data() {
return {
message: "How To Install Vue 3 in Laravel 8 From Scratch"
}
}
</script>
5. Vue.js & Vue3 컴포넌트를 사용하기위해 app.js에 등록
'/resources/js/app.js' 경로에 위치한 app.js에 전단계에서 만든 Vue 컴포넌트와 Vue를 등록해준다.
// resources/js/app.js
require('./bootstrap')
import { createApp } from 'vue';
import MyComponent from "./components/MyComponent'
const app = createApp({});
app.component('my-component',MyComponent);
app.mount('#app')
6.Laravel blade 템플릿에 Vue 컴포넌트 추가
Vue3 컴포넌트를 사용하려는 라라벨 블레이드 템플릿 파일에 만든 컴포넌트를 추가 및 구성요소 추가
+) 이 단계에서 컴포넌트는 반드시 <div id="app"></div> 안의 자식요소로 기입
<!-- resources/views/welcome.blade.php (예시) -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head 부분 생략 -->
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
7. Laravel Mix를 활용한 JS 자산 컴파일 명령어 실행
위 단계를 모두 완료하여 Vue컴포넌트가 적용된 블레이드 템플릿이 모두 세팅되었다면 아래 명령어를 실행해준다.
npm run dev
7-1. 개발 환경일 경우 아래 명령어를 사용하면 새로고침시 실시간으로 확인이 가능하다.
npm run watch
8. 잘 적용되었는지 Laravel 서버를 실행하여 확인
php artisan serve
반응형
'Php > laravel' 카테고리의 다른 글
| [Laravel & Vue.js] blade 템플릿에 Vue.js 기반 개발환경 세팅 방법 (0) | 2023.09.08 |
|---|---|
| [php] 라라벨(laravel) 개발 환경 셋팅(WAMP) (0) | 2022.03.22 |