Ответ 1
Я оставил бы Laravel так, как он есть, с Webpack. Это дает вам возможность добавить хорошую конфигурацию Webpack. Плюс gulp watch работает внутри виртуальной виртуальной виртуальной машины Homestead, так как будет использовать Webpack для просмотра изменений файла. А также проверьте асинхронные компоненты.
Теперь на ваш вопрос относительно отдельных экземпляров Vue на странице... пусть начнется с app.js...
App.js
Когда вы впервые установите Laravel 5.3, вы найдете точку входа app.js. Давайте прокомментируем основной экземпляр Vue:
ресурсы/активы/JS/app.js
/**
* First we will load all of this project JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
// Let comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
// el: '#app'
// });
Файл app.js по-прежнему остается местом для глобального материала, поэтому компоненты, добавленные здесь, доступны (например, компонент example, указанный выше) на любую страницу script, которая включает его.
Приветственная страница Script
Теперь создайте script, который представляет страницу приветствия:
ресурсы/активы/JS/страницы/welcome.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the welcome page component'
}
})
Страница блога Script
Теперь создайте еще один script, который представляет страницу блога:
ресурсы/активы/JS/страницы/blog.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the blog page component'
}
})
Приветственный компонент
ресурсы/активы/JS/компоненты/Greeting.vue
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data: () => {
return {
message: 'This is greeting component'
}
}
}
</script>
Приветственный вид блейда
Обновите приветственное лезвие, которое поставляется с Laravel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<example></example>
@{{ pageMessage }}
<greeting></greeting>
</div>
<script src="/js/welcome.js"></script>
</body>
</html>
Идея будет одинаковой для просмотра блога.
Elixir
Теперь принесите все это в свой файл gulp, используя способность Elixir объединить параметры конфигурации Webpack со своим собственным (подробнее об этом здесь):
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
var config = elixir.webpack.mergeConfig({
entry: {
welcome: './resources/assets/js/pages/welcome.js',
blog: './resources/assets/js/pages/blog.js'
},
output: {
filename: '[name].js' // Template based on keys in entry above
}
});
mix.sass('app.scss')
.webpack('app.js', null, null, null, config);
});
Запустите gulp или gulp watch, и вы увидите как опубликованные welcome.js, так и blog.js.
Мысли
В настоящее время я перехожу на SPA-маршрут, когда дело доходит до "веб-приложений" и просто использует Laravel в качестве базового API (или любого другого языка/фреймворка). Я видел несколько примеров, где Vue SPA построен в Laravel, но я действительно думаю, что это должен быть полностью отдельный репо/проект, независимо от бэкэнда. Там нет шаблонов Laravel/PHP, связанных с SPA, поэтому создавайте SPA отдельно. BTW, SPA будет иметь "страничные" компоненты (которые обычно вызывают VueRouter и, конечно, будут состоять из более вложенных компонентов... см. Мою ссылку на проект ниже).
Однако для "веб-сайта" я думаю, что Laravel по-прежнему является хорошим выбором для просмотра роликов, и для этого нет необходимости идти на SPA. Вы можете сделать то, что я описал в этом ответе. Кроме того, вы можете подключить свой веб-сайт к webapp. На вашем веб-сайте у вас будет ссылка "Войти", в которой пользователь может перейти с веб-сайта в webapp SPA для входа в систему. Ваш сайт остается дружественным к SEO (хотя есть хорошее доказательство того, что Google также просматривает контент на сайтах JavaScript javascript).
Для взгляда на подход SPA я привел пример в Vue 2.0 здесь: https://github.com/prograhammer/example-vue-project (он отлично работает, но все еще продолжается).
Edit:
Возможно, вы захотите также проверить Commons Chunk Plugin. Таким образом, браузеры могут кэшировать отдельные зависимости между отдельными модулями. Webpack автоматически может вытащить общие импортированные зависимости и поместить их в отдельный файл. Так что у вас есть как common.js (общий материал), так и welcome.js на странице. Затем на другой странице вы снова получите common.js и blog.js, и браузер может повторно использовать кешированный common.js.