개발환경
- Laravel 8
- Laravel mix 6
- node ver → 12.14
- Vue3
기본 세팅은 아래와 동일하다.
[Laravel&Vue.js] 라라벨 개발환경에서 Vue.js 컴포넌트 사용하기
개발환경 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 install npm i vue@next && npm i
joroki.tistory.com
이 포스트 내용은 컴포넌트를 가져오는 것 뿐만이 아니라 개발 환경은 Laravel 모든 프론트 처리는 Vue로 하고싶을때의 방법이다.
Vue.js 프론트 개발 환경을 설정한 후에 , app.blade.php 파일을 생성하고 app.blade.php 에서는 App.vue와 연동이 될 수 있도록 하는 것이다.
1. Laravel 프로젝트를 생성한다.
composer create-project --prefer-dist laravel/laravel laravel-vue3
2. npm 설치 & Vue3 해당 종속 항목 등 설치
npm installnpm i vue@next && npm i vue-loader@next -dev
3. App.vue 파일 생성 & app.blade.php
'resources/js' 경로에 components폴더를 하나 생성하고 그안에 App.vue 파일을 생성하여 Vue기본형태 작성.
// resouces/components/App.vue
<template>
<!-- Router의 기준이되는 App.vue-->
<router-view />
</template>
<script>
export default {
name: "App",
}
</script>
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. app.js 설정
'/resources/js/app.js' 경로에 위치한 app.js 파일을 열어 vue를 가져오고, 필요한 항목들을 작성해준다.
require('./bootstrap');
//vue 가져오기
import { createApp} from "vue";
//App.vue 파일 import
import App from "./components/App.vue";
// axios import
import axios from "axios";
//vue router import
import router from "./router";
//App.vue 등록
const app = createApp(App);
//vue router 사용
app.use(router);
//axios 등록
app.config.globalProperties.axios = axios;
//App.vue mount
app.mount("#app")
5. app.blade.php 생성 및 web.php에서 Laravel Router 설정
이 단계에서는 blade 템플릿에서 설정을 해줘야한다.
5-1. app.blade.php 생성, 기본 세팅 후 Vue3 구성요소 추가.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Laravel & Vue.js </title>
</head>
<body>
// "#app" 에서 App.vue를 불러온다.
<div id="app"></div>
// Vue 구성요소를 아래처럼 스크립트 추가
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
5-2. web.php에서 Laravel Router를 설정해준다.
'routes/web.php' 경로의 web.php 파일을 열어서 설정해준다.
<?php
use App\Models\News;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
// 어떤 url로 입장해도 App.vue기반의 화면으로 이동 될 수 있도록 처리
Route::get('{ any }','app');*) 각각 프로젝트에 맞춰 세팅해줘야하는데, 프론트 개발자 혼자 세팅을 할 수는 없기 때문에 실무시에는 라라벨 개발자와 협업이 필요하다. 아래는 단순히 어떤 url로 들어와도 생성한 app.blade.php로 이동 될 수 있도록 처리 했을 뿐이다.
6. Laravel Mix를 활용한 JS 자산 컴파일 명령어 실행
위 단계를 모두 완료하여 Vue컴포넌트가 적용된 블레이드 템플릿이 모두 세팅되었다면 아래 명령어를 실행해준다.
npm run dev
6-1. 개발 환경일 경우 아래 명령어를 사용하면 새로고침시 실시간으로 확인이 가능하다.
npm run watch
7. 잘 적용되었는지 Laravel 서버를 실행하여 확인
php artisan serve
'Php > laravel' 카테고리의 다른 글
| [Laravel&Vue.js] 라라벨 개발환경에서 Vue.js 컴포넌트 사용하기 (0) | 2023.09.07 |
|---|---|
| [php] 라라벨(laravel) 개발 환경 셋팅(WAMP) (0) | 2022.03.22 |