[Laravel + Vue.js ] 나만의 To Do List만들기 - Vue 설치 및 초기설정

Vue 설치

 

Laravel 에서 Vue를 사용하기 위해서는 우선 npm을 이용해 설치를 해야합니다.

 

npm install --save vue@next && npm install --save-dev vue-loader@next

 

 

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

 

resources/js/components/ToDoList.vue

<template>
    //
</template>

<script>
export default {
    //
}
</script>

 

app.js

import { createApp } from 'vue'
import ToDoList from './components/ToDoList.vue';

const app = createApp({});
app.component('to-do-list', ToDoList)
    .mount('#app');

require('./bootstrap');

main layout

<div id="app" class="h-full">
	<div class="h-full flex flex-col">
    	@yield('content')      
	</div>
</div>

welcome.blade.php

@extends('layout.main')

@section('content')
    <div class="flex-1 h-full bg-gray-700 text-white">
        <to-do-list />        
    </div>    
@endsection

 

Mix

npm run watch

오류가 떠도 다시한번 위의 명령어를 입력하면, 정상적으로 컴파일이 완료됩니다. 

 

 

여기까지가 Laravel에서 Vue설치 및 초기 설정입니다.