[Vue] Laravel에 Vue 설치하기 및 실행 예제 (Laravel 7.x)

* 노드 버전 확인

node -v

 

Node 최신버전으로 셋팅

https://velopert.com/1351

[Node.js] TIP: Node.js 와 NPM 최신버전으로 업그레이드 하기 | VELOPERT.LOG

* PhpStorm vue plugin 설치

Setting -> Plugins -> vue검색 -> install 클릭 -> restart IDE

 

 

• 설치

1. 새로운 라라벨 프로젝트 생성

laravel new vue_test

 

2. Compoer에 laravel/ui 설치

composer require laravel/ui

 

 

3. Vue 스캐폴딩

php artisan ui vue

성공적으로 설치가 끝났다면 아래와 같은 경로에 파일이 생성된다.

   > resource/js/components/ExampleComponent.vue

 

package.json 파일에 vue추가됨.

 

4. js와 css 컴파일

npm install

npm run dev

실행

 

 

• 예제 실행

welcome.blade.php 에서

<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<script src="{{ asset('js/app.js') }}"></script>

추가

 

app.js 에서 기존에 있던 내용을 다 지우고 아래와 같이 작성한다.

import Vue from 'vue';

new Vue({
	el: '#app', 
});

 

다시 welcome.blade.php로 돌아와서 엘리먼트를 추가.

app.js에서 적었던 #app 즉, id가 app인 엘리먼트 필요.

<div id="app"></div>

 

resources/js에 App.vue 파일 생성 후 아래와 같이 작성.

<template> 
	<main> 
    	<h3> Vue Test Page</h3> 
    </main> 
</template>

 

app.js에 App.vue파일을 import한다.

import App from './App.vue';

그리고 render: h => h(App) 추가

new Vue({
	el: '#app', 
   	render: h => h(App) 
});

 

npm run watch로 실행.

npm run watch

 

실행 화면 01 - 텍스트 출력

bootstrap도 사용 가능.

vue.js파일에 bootstrap import

import 'bootstrap/dist/css/bootstrap.css'; 
import 'bootstrap';

 

App.vue파일에서 버튼 요소 추가 후 부트스트랩 클래스 추가

<button class="btn btn-primary"> complete! </button>

 

실행화면 02 - bootstrap 스타일이 적용됨.

* 참고 영상

youtu.be/3nLdc0NBiH8