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