Zostawię Laravel tak, jak to jest, z Webpakiem. Daje to możliwość dodania dobrej konfiguracji Webpack. Plus gulp watch działa teraz w maszynie wirtualnej Homestead Vagrant, ponieważ będzie używać Webpacka do oglądania zmian w plikach. A także sprawdź komponenty async.
Teraz na swoje pytanie odnośnie oddzielnych przypadkach Vue na stronie ... Zacznijmy app.js ...
App.js
Po pierwszym zainstalowaniu laravel 5.3, można znaleźć app.js punkt wejścia. Załóżmy wykomentuj główną instancję Vue:
resources/aktywa/js/app.js
/**
* First we will load all of this project's 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's comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
// el: '#app'
// });
Plik app.js nadal pozostaje miejsce dla globalnego rzeczy, więc dostępne są tu elementy dodane (takie jako składnik example widziany powyżej) do dowolnego skryptu strony, który go zawiera.
Zapraszamy Script Strona
Teraz utworzyć skrypt, który reprezentuje strony powitalnej:
resources/assets/js/pages/powitanie.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'
}
})
Blog Script Strona
Teraz stwórzmy inny skrypt, który reprezentuje Blog Strona:
Zasoby/aktywa/js/pages/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'
}
})
Pozdrowienie Komponent
Zasoby/aktywa/js/komponenty/Greeting.vue
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data:() => {
return {
message: 'This is greeting component'
}
}
}
</script>
Witamy Blade Zobacz
Załóżmy zaktualizować powitalny widok ostrza, że statki z 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>
Pomysł byłoby to samo dla widoku blogu.
Elixir
Teraz przynieść to wszystko razem w pliku haustem używając eliksiru zdolność do scalania opcje konfiguracyjne WebPACK z własną (czytaj więcej na ten temat here):
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);
});
Uruchom gulp lub gulp watch, a zobaczysz zarówno welcome.js i blog.js opublikowane.
Myśli
Jestem obecnie dzieje trasę SPA, jeśli chodzi o „aplikacji internetowych” i tylko przy użyciu API laravel jako backend (lub jakiegokolwiek innego języka/ram). Widziałem kilka przykładów, gdzie Vue SPA powstało w Laravel, ale naprawdę uważam, że powinno to być całkowicie oddzielne repo/projekt, niezależnie od zaplecza. W SPA nie ma szablonowych widoków Laravel/PHP, więc buduj SPA oddzielnie. BTW, SPA miałoby komponenty "strony" (które są zwykle wywoływane przez VueRoutera i oczywiście składałyby się z większej ilości komponentów zagnieżdżonych ... zobacz mój przykładowy link do projektu poniżej).
Jednak dla "strony internetowej" uważam, że Laravel jest nadal dobrym wyborem do serwowania widoków z ostrzami i nie ma potrzeby korzystania z tego SPA. Możesz zrobić to, co opisałem w tej odpowiedzi. Możesz także podłączyć swoją witrynę do swojej aplikacji internetowej. Na swojej stronie internetowej masz link "login", który przeniesie użytkownika z witryny do SPA Webapp, aby się zalogować. Twoja strona internetowa jest przyjazna dla SEO (chociaż istnieje dobry dowód na to, że Google widzi treści na stronach javascript SPA).
Aby zapoznać się z podejściem SPA, podałem przykład w Vue 2.0 tutaj: https://github.com/prograhammer/example-vue-project (działa świetnie, ale wciąż trwa).
Edit:
Możesz również wyewidencjonowania Commons Chunk Plugin. W ten sposób przeglądarki mogą osobno buforować niektóre współdzielone zależności modułów. Webpack automatycznie może wyciągnąć współdzielone importowane zależności i umieścić je w osobnym pliku.Tak więc masz jedną stronę: common.js (udostępnione) i welcome.js. Następnie na innej stronie znowu masz common.js i blog.js, a przeglądarka może ponownie użyć buforowanej common.js.
Warto wspomnieć, że 'php rzemieślnik marka: auth' szafuje układ i widoki, które sprawiają, że korzystanie z pakietu" app.js "i" app.scss "... –