반응형
1단계 : 라라벨 프로젝트 디렉토리에서 Vue3 설치
라라벨 프로젝트 디렉토리에 진입하여 아래의 코드를 실행합니다.
npm install --save vue@next && npm install --save-dev vue-loader@next
2단계 : webpack 믹스 설정 ( webpack.mix.js 설정)
라라벨 프로젝트 디렉토리 하단 경로에 webpack.mix.js파일이 있습니다. 파일을 열어서 .vue()를 추가해 줍니다.
만약, 오류가 발생이 된다면 라라벨 믹스 버전이 6 이상인지 확인하시길 바랍니다.
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
3단계 : 작동 확인을 위한 테스트 컴포넌트 작성
[라라벨 프로젝트 경로]/resources/js/components/Test.vue 컴포넌트 파일을 생성하여 아래코드를 참조하여 작성합니다.
<template>
<h1>{{ hello }}</h1>
</template>
<script>
export default {
setup: () => ({
hello: '안녕하세요~!'
})
}
</script>
[라라벨 프로젝트 경로]/resources/js/app.js파일을 아래처럼 수정합니다.
import { createApp } from 'vue'
import HelloWorld from './components/Test.vue';
const app = createApp({});
app.component('hello-world', HelloWorld)
.mount('#app');
require('./bootstrap');
[라라벨 프로젝트 경로]/resources/welcome.blade.php파일을 아래처럼 수정합니다.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<body class="antialiased">
<div id="app">
<hello-world/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
4단계 : 리소스 컴파일
변경된 파일을 감지하여 리소스 파일을 컴파일합니다.
npm run watch
5단계 : 작업 확인
구축한 로컬 호스트 서버로 접근하여 확인합니다.
반응형
'소프트웨어 개발 > PHP' 카테고리의 다른 글
| PHP - 한글만 입력했는지 체크 (0) | 2022.02.09 |
|---|---|
| [코드이그나이터4] 시간설정 appTimezone (0) | 2022.02.06 |
| PDO MYSQL/Mariadb DB 접속 (0) | 2022.02.02 |
| laravel.log" could not be opened in append mode: Failed to open stream: Permission denied (0) | 2022.01.20 |
| [Laravel] 라라벨 프로젝트 생성 (0) | 2021.12.18 |
댓글