laravel에서 vueify를 구성하는 방법은 무엇입니까?

Question

내 Laravel 프로젝트에서 Vueify를 사용하고 싶습니다. Vueify (* .vue 파일)를 사용하여 다른 Vuejs 구성 요소를 가지고 있습니다. 내 질문은 필요한 파일을 가장 잘 구성하고 브라우저로 보낸 JS 코드를 최적화하는 방법에 관한 것입니다.

기본적으로 내 Vue 인스턴스가 포함 된 블레이드 템플릿에서 직접 이러한 구성 요소를 사용하고 싶습니다. 그러나 * .vue 파일을 컴파일해야하므로 템플릿에서 직접 참조 할 수는 없습니다. 두고, 내가 좋아하는 물건을 의미 : 내 블레이드 템플릿 내에서

import Timeline from "./components/Timeline.vue";

가 작동하지 않습니다.

따라서 구성 요소가 포함 된 Vue 객체를 저장하는 각 블레이드 템플릿에 대한 전용 JS 파일을 만들었습니다. 이것은 옳다고 생각하지 않습니다. 예를 들어이 만들어처럼 내 꿀꺽 파일이 보인다 : 나는 당신이 무슨 뜻인지 아시죠 희망

mix.browserify('models.js', 'public/js/compiled-models.js'); 
mix.browserify('campaigns.js', 'public/js/compiled-campaigns.js'); 
mix.browserify('campaigns_edit.js', 'public/js/compiled-campaigns_edit.js'); 
mix.browserify('product.js', 'public/js/compiled-product.js'); 
... 

. 모든 구성 요소를 단일 app.js 파일에 결합하는 것이 두려웠 기 때문에 그렇게했습니다. 나는 여기에 갈 길이 란 것에 대한 어떤 정보도 찾지 못했습니다.

기본적으로 나는 모든 * .js 파일을 제거하는 것이 좋겠다. 왜냐하면 그것들은 컴파일 된 구성 요소를 얻는 나의 방법 일 뿐이 기 때문이다. 또는 적어도 "페이지"당 하나의 파일을 만들고 싶지 않습니다.

구성 방법?

Answer 1

마지막으로 나는 내가 찾고 있던 해결책을 발견했다. 이미 언급했듯이, 나는 그것들을 하나의 파일에 함께 묶을 수있다. 그러나 정확히 어떻게 할 지 알 수 없었다. NPM 사용하는 동안,

window.Vue = require('vue'); 
require('vue-resource'); 

Vue.component('Repository', require('./product_images/Repository.vue')); 

또는 :

나는 이제 app.js는 다음과 같이보고했다

import vSelect from "vue-select" 
Vue.component('v-select', vSelect); 

는 또한, 내가 그 파일에 vuejs 필터 및 지침을 등록을

그리고 마침내 내 꿀꺽 꿀꺽 소리 :

elixir(function (mix) { 
    mix.webpack('app.js', { 
     outputDir: "public/js", 
     output: { 
      filename: "compiled-[name].js" 
     }, 
     module: { 
      loaders: [{ 
       test: /\.vue$/, 
       loader: 'vue' 
      }, { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      }] 
     }, 
     watchOptions: { 
      poll: true 
     } 
    }) 

그러면 모든 구성 요소가 충돌없이 등록되는 app-compiled.js로 연결됩니다. 내 블레이드 파일에서 나는 명시 적으로 아무것도 가져 오지 않고 단순히 HTML로 사용한다.

BTW : 이것은 Laravel 5.3의 목표입니다. 거기에서 나는 마침내 그것을 알아 냈다. 충돌없이 모든 vuejs 구성 요소를 "사전 컴파일"하는 방법.

Answer 2

모두를 하나의 dist 파일로 묶어서 Laravel보기에 필요한 Vue.js 구성 요소 만 사용하는 것이 어떻습니까?