Utilisation de Vue.js dans Laravel 5.3
Dans les projets Laravel antérieurs à 5.3, j'ai utilisé Vue.js en utilisant la balise script comme ceci:
<script type="text/javascript" src="../js/vue.js"></script>
Je créerais ensuite une instance Vue spécifique à cette page, comme ceci:
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
et le lier ensuite au div # id correspondant dans mon code HTML.
Maintenant, dans Laravel 5.3, Vue.js est fourni et je suis tout à fait conscient que je peux utiliser les composants décrits dans la documentation en utilisant gulp/elixir. Cependant, ma question est si je veux créer une instance Vue.js comme I je viens de mentionner, c’est-à-dire lorsque je crée une instance Vue.js strictement pour une page donnée (et non un composant),
Dois-je le configurer comme avant en important la bibliothèque vue.js dans une balise script ou puis-je utiliser app.js généré?
Est-ce que je ne suis pas censé le faire de cette façon, devrais-je créer des composants pour tout?
Pour moi, cela n'a aucun sens de créer un composant pour quelque chose que je n'utilise qu'une fois - je pensais que le but des composants était qu'ils soient réutilisables - vous pouvez l'utiliser à plus d'un endroit. Comme mentionné dans les documents Vue.js:
Les composants sont l’une des fonctionnalités les plus puissantes de Vue.js. Ils vous aident à étendre les éléments HTML de base pour encapsuler code réutilisable .
Tout conseil serait apprécié, merci!
Je laisserais Laravel comme ça vient, avec Webpack. Cela vous permet d’ajouter une bonne configuration Webpack. De plus, gulp watch fonctionne maintenant dans le vagant Homestead VM, car il utilisera Webpack pour surveiller les modifications du fichier. Et vérifiez également les composants asynchrones.
Passons maintenant à votre question concernant les instances Vue séparées par page ... commençons par app.js ...
App.js
Lorsque vous installez Laravel 5.3 pour la première fois, vous trouverez un point d’entrée app.js. Commentons l'instance principale de Vue:
resources/assets/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'
// });
Le fichier app.js reste toujours un emplacement pour les éléments globaux. Par conséquent, les composants ajoutés ici sont disponibles (tels que le composant example ci-dessus) pour tout script de page l'incluant.
Script de page d'accueil
Créons maintenant un script qui représente une page d’accueil:
ressources/assets/js/pages/bienvenue.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 de page de blog
Créons maintenant un autre script représentant une page de blog:
_ {resources/assets/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'
}
})
Composant de salutation
resources/assets/js/components/Greeting.vue
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data: () => {
return {
message: 'This is greeting component'
}
}
}
</script>
Welcome Blade View
Mettons à jour la vue de la lame de bienvenue fournie avec 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>
L'idée serait la même pour la vue blog.
Elixir
Maintenant, rassemblez le tout dans votre fichier gulp en utilisant la capacité d’Elixir de fusionner les options de configuration de Webpack avec les siennes (en savoir plus à ce sujet ici ):
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);
});
Exécutez gulp ou gulp watch et vous verrez les welcome.js et blog.js publiés.
Pensées
Je suis actuellement sur la voie du SPA en ce qui concerne les "applications Web" et j'utilise simplement Laravel comme API backend (ou tout autre langage/framework). J'ai vu quelques exemples de la construction de Vue SPA à Laravel, mais je pense vraiment que ce devrait être un rapport/projet totalement séparé, indépendant du backend. Il n'y a pas de vues de modèles Laravel/PHP impliquées dans un SPA, alors créez le SPA séparément. En passant, le SPA aurait des composants "page" (qui sont généralement appelés par VueRouter et seraient bien sûr composés de plusieurs composants imbriqués ... voir mon exemple de lien de projet ci-dessous).
Cependant, pour le "site Web", je pense que Laravel est toujours un bon choix pour servir des vues de lame et qu’il n’est pas nécessaire d’utiliser SPA pour cela. Vous pouvez faire ce que j'ai décrit dans cette réponse. Vous pouvez également connecter votre site Web à votre application Web. Sur votre site Web, vous disposerez d'un lien de "connexion" qui conduira un utilisateur du site Web à l'application Web SPA pour se connecter. Votre site Web reste convivial pour le référencement (bien qu'il existe une bonne preuve que Google voit également du contenu sur les sites javascript de SPA).
Pour un aperçu d'une approche SPA, j'ai donné un exemple dans Vue 2.0 ici: https://github.com/prograhammer/example-vue-project (cela fonctionne très bien, mais est toujours en cours).
Modifier:
Vous voudrez peut-être aussi acheter le Commons Chunk Plugin . De cette façon, les navigateurs peuvent mettre en cache certaines dépendances de modules partagés séparément. Webpack peut automatiquement extraire les dépendances importées partagées et les placer dans un fichier séparé. Donc, vous avez à la fois un common.js (contenu partagé) et un welcome.js sur une page. Ensuite, sur une autre page, vous aurez à nouveau common.js et blog.js et le navigateur peut réutiliser le common.js mis en cache.
Si vous voulez incorporer vuejs dans app.js en utilisant gulp, vous pouvez le faire avec elixir:
Tout d’abord, vous avez besoin de laravel-elixir-browserify-official de npm:
npm installe laravel-elixir-browserify-official
Placez ensuite les éléments suivants dans package.json:
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
Votre fichier resources/assets/js/app.js aurait alors simplement besoin de:
require('./bootstrap');
Le fichier bootstrap.js doit se trouver dans le dossier "resources/assets/js". Je ne me souviens pas si mon passeport a été installé avec mon passeport. Par conséquent, si vous ne l'avez pas, laravel a fourni le code suivant pour "bootstrap.js":
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
/**
* Vue is a modern JavaScript library for building interactive web interfaces
* using reactive data binding and reusable components. Vue's API is clean
* and simple, leaving you to focus on building your next great project.
*/
window.Vue = require('vue');
require('vue-resource');
/**
* We'll register a HTTP interceptor to attach the "CSRF" header to each of
* the outgoing requests issued by this application. The CSRF middleware
* included with Laravel will automatically verify the header's value.
*/
Vue.http.interceptors.Push((request, next) => {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from "laravel-echo"
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
Maintenant, dans gulpfile.js, vous pouvez utiliser:
elixir(function(mix) {
mix.browserify('app.js');
});
Et dans votre HTML, vous auriez:
...
<div id="app">
@{{message}}
</div>
...
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
Maintenant, lancez gulp
Si vous n'utilisez pas elixir, vous devriez pouvoir faire la même chose avec les packages browserify ou webpack de npm.
Modifier
Pour répondre à votre question mise à jour, vous pouvez bien sûr utiliser vue.js pour une seule page. Personnellement, j’utilise knock-out pour ce matériel (j’utilise View car le passeport Laravel l’utilise), mais sur le plan architectural, c’est la même chose: ce sont des bibliothèques MVVM.
L’intérêt de MVVM est de lier votre vue à un modèle de données sous-jacent, ainsi lorsqu’une mise à jour de l’autre est automatiquement mise à jour (c’est-à-dire que les mises à jour dans le dom mettent à jour automatiquement le modèle et vice versa). Les composants Vue sont un moyen simple de réutiliser des blocs de code, ce qui est très utile pour créer des widgets ou des composants complexes, mais si vous cherchez simplement à restituer les données d'un modèle de vue sur votre page, vous n'avez généralement pas besoin de créer un composant pour cela.
Quant à générer app.js, cela dépend entièrement de votre projet. Vous ne pouvez pas lier plus d'un modèle de vue à une vue. Par conséquent, si vous prévoyez d'utiliser plusieurs modèles de vue dans votre projet, vous devrez trouver un moyen d'inclure le modèle de vue spécifique pour votre page. Pour ce faire, je supprimerais probablement le modèle de vue de app.js et conserverais le composant d'amorçage et les composants enregistrés, puis créerais des modèles de vue distincts devant être inclus sur chaque page.
Si vous êtes sur Laravel 5.5 et au-delà, voici la meilleure solution si vous souhaitez utiliser la puissance de Blade tout en profitant de la réactivité de VueJS