Laravel + vue : API(1)

laravel, vue를 이용해서 api 작성을 해보겠습니다.

 

 

 

laravel new app-name 명령어로 프로젝트를 하나 만들어줍니다.

 

다음으로 vue를 설치하겠습니다.

https://laravel.kr/docs/7.x/frontend#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20&%20CSS%20%EC%8A%A4%EC%BA%90%ED%8F%B4%EB%94%A9

라라벨 7.x - 프론트엔드 스캐폴딩

 

위 링크를 보고하시면 편합니다.

 

composer require laravel/ui 명령어 입력

laravel/ui

이렇게 설치가 되고

php artsian ui vue 명령어를 입력한 후

npm install 명령어 입력

npm run watch 명령어 입력

 

install

저 처럼 이런 문구가 뜨시는 분들은 저기 나오는

npm install vue-loadernpm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps를 해주세요.

 

그리고 다시 npm run watch를 해줍니다.

npm run watch를 해주는 이유는  vue 컴포넌트가 바뀔 때마다 npm run dev를 해야하는데

npm run watch를 하면 모니터링하고 있다가 자동으로 컴파일 해주기 때문입니다.

성공

그러면 이렇게 성공했다고 표시가 됩니다.

resources\js 폴더에 들어가면 components 폴더가 있고 그 안에 ExampleComponent.vue가 생깁니다.

그리고 app.js 파일을 열어서 아래 처럼 나오면 성공입니다.

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

 

 

이렇게 하면 기본적인 준비는 끝났습니다.