laravel 5.2 elixir, gulp, browserify 로 vue.js 사용해보자

laravel 프레임워크가 5.4버전부터는 vue.js가 webpack과 함께 기본적으로 세팅이 되어있는데요.

그 이하버전에서는 elixir와 gulp, browserify를 써야하고 vue.js도 직접 추가해야합니다.

요즘 핫한 vue.js를 laravel 5.2에서도 써보겠습니다.

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.0.0",
    "gulp": "^3.9.1",
    "jquery": "^3.2.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "1.0.6",
    "lodash": "^4.17.4",
    "vue": "^2.4.2",
    "vue-resource": "^1.3.4"
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

최소한의 구성은 위와 같습니다.

참고하실것은 elixir 5.x  버전은 vueify를 1.x를 사용하셔야 하고

elixir 6.x 버전은 vueify를 2.x 를 사용하셔야 합니다.

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
});

gulpfile 설정은 보다 간단합니다.

laravel-elixir-vueify를 포함하고 app.js를 browserify 하시면 됩니다.

app.js

window.Vue = require('vue');

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

이제 남은일은 app.js 에 여러분이 작성한 파일들을 넣으시면 됩니다.