laravel 5 vue Setup unklar

Ich habe jetzt über alles versucht, aber ich kann nicht vue.js auf Laravel arbeiten, da scheint nichts Konkretes dabei zu sein sagt, setze x in Datei y, damit es funktioniert .laravel 5 vue Setup unklar

Ich habe über alles mit Npm, Komponist versucht, aber ich kann nicht einmal ein grundlegendes Beispiel zur Arbeit bekommen. Es ist mir sehr unklar, was ich brauche und wohin es gehen soll.

Ich benutze Blade, um von einer app.layout Ansicht zu erweitern, aber es ist unklar, ob ich Code zu Assets/js/app.js hinzufügen oder einfach Skript src = "" Tags in meinem Standard-App-Layout verwenden muss.

app.js

require('./bootstrap'); 

window.Vue = require('vue'); 

Vue.component('example', require('./components/Example.vue')); 

const app = new Vue({ 
    el: '#app' 
}); 

var app5 = new Vue({ 
    el: '#app-5', 
    data: { 
    message: 'Hello Vue.js!' 
    } , 
    methods: { 
    reverseMessage: function() { 
     this.message = this.message.split('').reverse().join('') 
    } 
    } 
})

app.layout.blade.php

<script src="{{asset('/js/app.js')}}"/></script> 

..some more html 

<body id="app"> 
    <div id="app-5"> 
    <p>@{{ message }}</p> 
    <button v-on:click="reverseMessage">Reverse Message</button> 
    </div> 
    </body> 

..more html

Quelle

2017-07-03 Florian

warum definieren Sie zwei Vue const?

dieser Teil von js-Code ist nicht erforderlich:

const app = new Vue({ 
    el: '#app' 
});

diese Zeile entfernen und testen:

require('./bootstrap'); 

window.Vue = require('vue'); 

Vue.component('example', require('./components/Example.vue')); 



var app5 = new Vue({ 
    el: '#app-5', 
    data: { 
    message: 'Hello Vue.js!' 
    } , 
    methods: { 
    reverseMessage: function() { 
     this.message = this.message.split('').reverse().join('') 
    } 
    } 
})

aber remmember sollten Ihre vuejs Arbeit beetween:

<div id="app-5"> vuejs codes should be run here </div>

Vergessen Sie nicht, npm run watch oder npm run dev laufen zu kompilieren

wenn Sie Fehler und Probleme mit dieser Art und Weise haben, können Sie auf dem zweiten Weg

Second Way überspringen:

erstellen vue-script.js Datei in public/js/ Verzeichnis

vue-script.js :

var app5 = new Vue({ 
    el: '#app', 
    data: { 
    message: 'Hello Vue.js!' 
    } , 
    methods: { 
    reverseMessage: function() { 
     this.message = this.message.split('').reverse().join('') 
    } 
    } 
})

erstellen sample.blade.php Datei in resources/views/ Verzeichnis

sample.blade.php:

<!DOCTYPE html> 
<html> 
<head> 
<title>test page</title> 
</head> 

<body> 
    <div id="app"> 
    @{{ message }} 
    <button v-on:click="reverseMessage">Reverse Message</button> 
    </div> 
<script src="https://unpkg.com/vue"></script> 
<script src="{{ asset('js/vue-script.js') }}"></script> 

</body> 
</html>

dann in routes/web.php:

Route::get('testvue', function() { 
    return view('sample'); 
});

und gehen Sie zu url: /testvue in Ihrem Browser

Quelle

2017-07-03 09:47:19

es nach wie vor nur zeigt {{message}} als Text an – Florian

Läuft npm run watch oder npm run dev zum kompilieren? –

Ich erhalte eine Fehlermeldung: npm ERR! errno 1 npm ERR! @ Entwicklung: 'cross-env NODE_ENV = Entwicklung node_modules/webpack/bin/webpack.js --progress --hide-modules --config = Knotenmodule/Laravel-Mix/setup/webpack.config.js' – Florian

laravel 5 vue Setup unklar

Antwort

Verwandte Themen