Как добавить компонент Vuejs в приложение Laravel Spark?

Question

Я работаю над проектом Laravel 5.2 с Laravel Spark (который все еще находится в бета-версии на момент написания статьи) и пытается добавить некоторую функциональность Vuejs, используя макеты и представления по умолчанию.

Моя первая попытка не удалась, потому что я просто попытался создать новый div в домашнем виде и привязать код Vue к этому div. Вот div:

<div id="my-stuff"> 
     <p>@{{ test }}</p> 
    </div> 

А вот соответствующий JS код:

new Vue({ 
    el: '#my-stuff', 
    data: { 
     test: 'This is a test' 
    } 
}); 

То, что я ожидал увидеть, были слова «Это тест» появляется в этом DIV на главном экране, но, конечно, ничего не появилось, потому что, как уже упоминалось, Vue привязывается к div сразу после тега body (ну, я предполагаю, что это так или иначе).

Я думаю, что решение моей проблемы - использовать компоненты Vue, которые сами выглядят довольно просто, но я понятия не имею, куда поместить мой код, как интегрировать мой код с процессом Gulp, какой файл Spark мне нужно изменить (если есть?), чтобы зарегистрировать мой компонент и как обеспечить, чтобы мой компонент регистрировался до создания экземпляра Vue.

Любая помощь будет высоко оценена.

Добавление 1

Чтобы воспроизвести точно такую ​​же настройку, как я использую, можно было бы необходимо установить новую копию Laravel 5.2, а затем использовать свечу установки, чтобы добавить искры материал, то добавьте app.js, содержащий код ниже в папку public, добавьте соответствующий div в любом месте в окне home и добавьте тег скрипта, который будет содержать app.js прямо под тегом скрипта, который импортирует основной файл javascript, созданный gulp.

Хотя это непрактично воспроизвести, что все настройки в скрипке, я думаю, что следующий скрипку иллюстрирует суть проблемы:

https://jsfiddle.net/5oLLte2e/

Из памяти у вас есть такое же ограничение в AngularJS. Для меня вполне резонно, почему это не сработает, и решение в Vuejs, скорее всего, будет использовать компоненты, но проблема в этой ситуации - это знать, как связать компонент и где его сохранить, чтобы интегрировать его с глотком config, или если это даже необходимо.

Answer 1

Vuejs Компонента

Если вы хотите иметь более одного VUE экземпляру короткий ответ: да, вам нужна компонента.

<div id="main-app"> 
<p>{{ mainMessage }}</p> 
    <my-app> 
     <p>Some composable content</p> 
    </my-app> 
</div> 

И сценарии должны быть загружены компоненты первого:

Vue.component('my-app', { 
    template: '<div>{{myMessage}}<br/><slot></slot></div>', 
    data: function() { 
    return { 
     myMessage: 'This is my message' 
    } 
    } 
}); 

new Vue({ 
    el: '#main-app', 
    data: { 
    mainMessage: 'This is the main module' 
    } 
}); 

Выход будет:

This is the main module 
This is my message 
Some composable content 

Вот скрипка: Components with Vue

Помните, что вы всегда можно поместить шаблон на страницу с помощью уникального идентификатора или, более идиоматически используя что-то вроде:

<script type="x/template" id="my-app"> 
    Your template here 
    {{ your component variables }} 
</script> 

---

Laravel Спарк Интеграция

шаги, чтобы добавить компонент в приложении Sparkified Laravel являются следующие:

(1) Добавьте замещающий HTML с пользовательский тег в любом месте страницы, даже если окружающий div уже был Vue-ified. HTML с пользовательским компонентом может выглядеть следующим образом:

<div id="example"> 
    <my-component></my-component> 
</div> 

(2) Реализация компоненты Vue и сохраните файл JavaScript в resources/assets/js. В качестве примера, мы можем сохранить следующий код в my-component.js:

var MyComponent = Vue.extend({ 
    data: function() { 
     return { message: 'This is a test' } 
    }, 

    template: '{{ message }}' 
}) 

Vue.component('my-component', MyComponent) 

new Vue({ 
    el: '#example' 
}) 

(3) Добавьте одну require заявление (вторая строка ниже) кода в resources/assets/js/app.js так, что файл выглядит следующим образом:

require('laravel-spark/core/bootstrap'); 
require('./my-component.js'); // This is the key! 

new Vue(require('laravel-spark')); 

Обратите внимание, что перед именем файла важно включить ведущий ./, иначе Browserify предположит, что он ищет модуль npm вместо необработанного файла и сработает.

(4) Запустите gulp и как только он закончит, обновите страницу. Gulp вызовет Browserify, который обрабатывает resources/assets/js/app.js, который теперь включает в себя наш пользовательский JavaScript, который будет обрабатываться и включен в окончательный файл public/js/app.js.

Если вы выполните эти шаги на чистой установке Laravel, у которой была процедура установки Spark (я сделал свои моды до home.blade.php), вы должны увидеть, что образец текста появляется на странице.