2015-10-27 3 views
0

Я использовал elixir & browserify раньше. Тем не менее, я хочу начать использовать Vueify, поэтому у меня могут быть все детали моего компонента (HTML/CSS/JS) в 1 файле.Vueify, Browserify and (disabling) Hot Reload

Кажется, что-то изменилось с laravel-browserify

общепринятого (что я нашел) ответ следующее:

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

var vueify = require('laravel-elixir-browserify').init("vueify"); 

elixir(function(mix) { 
    // resources/assets/js/main.js 
    mix.vueify('main.js', {insertGlobals: true, transform: "vueify", output: "public/js"}); 
}); 

Это бросает ошибку:

Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities' 
//...// 
at Object.<anonymous> (C:\Users\BLANKED\Code\Project\node_modules\laravel-elixir-browserify\index.js:5:17) 

Так, некоторые больше искать не нужно, и я нахожу
https://github.com/laravel/elixir/issues/203

elixir.config.js.browserify.transformers.push({ 
    name: 'vueify' 
}); 

elixir(function(mix) { 
    mix.browserify('main.js'); 
}); 

JeffreyWay «s метод теперь gulp, однако, кажется, не включают в себя какой-либо из *.vue файлов, и вместо того, чтобы заменить их с vue-hot-reload-api функции предположительно получить его.

Что кажется отличным, и что-то, что, без сомнения, я найду очень полезным.
Но это не работает, и я не могу понять, как его отключить.
И очень простой VueПриложение не работает. Или что я делаю неправильно.

Edit:
Для того, чтобы понять, я был бы рад gulp*.vue файлов без горячей перезагрузки работы.
Возможно, это что-то, что просто работает при использовании усадьбы, но я надеюсь провести небольшое грязное тестирование без необходимости запускать homestead.

Заключительный изменить:

//gulpfile.js 
var elixir = require('laravel-elixir'); 
elixir.config.js.browserify.transformers.push({ 
name: 'vueify' 
}); 

elixir(function(mix) { 
mix.browserify('main.js'); 
}); 


// main.js 
var Vue = require('vue') 
var App = require('./app.vue') 

new Vue({ 
    el: 'body', 
    components: { 
     app: App 
    } 
}) 

// app.vue 
<style> 
    .red { 
    color: #f00; 
    } 
</style> 

<template> 
    <h1 class="red">{{msg}}</h1> 
</template> 

<script> 
    module.exports = { 
    data: function() { 
     return { 
     msg: 'Hello world!' 
     } 
    } 
    } 
</script> 

ответ

2

По this commit Vueify теперь входит в Laravel Elixr. Я обнаружил, что при включении трансформатора Vueify вручную он запускается дважды, заставляя шаблон неправильно создаваться, оставляя только код горячей перезагрузки.

Чтобы устранить проблему, я просто удалил следующие строки из моего gulpfile.js.

elixir.config.js.browserify.transformers.push({ 
    name: 'vueify' 
}); 

Вы можете также обеспечить вашу версию Laravel-elixr закончилась версии 3.4.0.

+0

Я проверил это позже на этой неделе. От копания через папку 'node_modules' я видел, что там было' vueify'. Я не думал, что не скажу «эликсиру» использовать его. Это имеет смысл. Как я уже сказал, я проведу тест на этой неделе, и отметьте решение :) –

Смежные вопросы