Penjelasan terperinci tentang cara menggunakan vue dalam Laravel-Laravel-php.cn

Penjelasan terperinci tentang cara menggunakan vue dalam Laravel

藏色散人

Lepaskan： 2021-10-28 15:49:27

ke hadapan

8092 orang telah melayarinya

Penyerahan persekitaran Laravel vue

Tutorial ini memperkenalkan penggunaan vue dalam Laravel termasuk beberapa perancah asas untuk memudahkan anda mula menulis JavaScript moden menggunakan pustaka Vue. Vue menyediakan API ekspresif untuk membina aplikasi JavaScript yang berkuasa menggunakan komponen. Kita boleh menggunakan Laravel Mix untuk menyusun komponen JavaScript dengan mudah ke dalam fail JavaScript sedia pelayar.

Cadangan berkaitan: Lima tutorial video Laravel terbaharu, Lima tutorial video vue.js terbaharu dipilih

Buat laravel

Pertama, anda memerlukan komposer, dan kemudian anda mempunyai laravel. Jalankan komposer arahan create-project --prefer-dist laravel/laravel blog untuk mencipta projek laravel baharu (sila pergi ke tapak web rasmi untuk mengetahui cara mencipta laravel secara khusus).

Hello world!

Buka baris arahan dan masukkan cd blog projek anda

Sebelum anda bermula, kerana pelbagai perkara yang anda tahu Sebabnya ialah npm, sebagai alat pemasangan gudang nod asing, mungkin menghadapi pelbagai masalah seperti kelajuan perlahan semasa operasi Ia secara amnya disyorkan untuk menggunakan sumber taobao untuk pecutan Kod berikut juga boleh ditambah dengan akhiran projek bergantung padanya secara lalai Kodnya adalah seperti berikut.

npm install  --registry=https://registry.npm.taobao.org

Salin selepas log masuk

Muat turun pengurusan penghalaan vue, kodnya adalah seperti berikut.

npm install vue-router --save-dev

Salin selepas log masuk

Buat fail komponen tersuai HelloComponent.vue baharu dalam /resources/assets/js/components dengan kod berikut.

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Salin selepas log masuk

Buat penghala folder baharu di bawah /resources/assets/js, dan cipta hello.js di dalamnya, dan petakan laluan hello kepada komponen HelloComponent yang baru dibuat melalui konfigurasi penghalaan bersarang, kod seperti berikut .

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], resolve))
        },
    ]
})

Salin selepas log masuk

Buat hello.vue baharu di bawah /resources/assets/js dalam projek laravel semasa sebagai antara muka utama dan paparan penghalaan bersarang Kodnya adalah seperti berikut.

<template>
    <div>
        <h1>Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Salin selepas log masuk

Kemudian buat hello.js di bawah /resources/assets/js, kodnya adalah seperti berikut.

require(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    router,
    render: h=>h(App)
});

Salin selepas log masuk

Buat hello.blade.php di bawah /resources/views dengan kod berikut.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

Salin selepas log masuk

Tambah laluan baharu dalam /resources/routes/web.php, kodnya adalah seperti berikut.

Route::view(&#39;/hello&#39;,&#39;/hello&#39;);

Salin selepas log masuk

Ubah suai webpack.mix.js, kodnya adalah seperti berikut.

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);

Salin selepas log masuk

Selepas menyimpan, laksanakan npm run watch dalam direktori projek pada baris arahan untuk menyusun semula

Anda boleh memasukkan php artisan serve dalam direktori projek pada baris arahan untuk mengakses http: //127.0.0.1:8000/hello untuk melihat kesan

Laravel 5.5 telah menambah kaedah Route::view dan Route::redirect Route dalam 5.4 dan ke bawah boleh ditulis seperti Route::get ('. /hello', function () {return view('hello');});

Akhir sekali

Kadangkala ralat Write EIO akan digesa semasa menjalankan npm , mungkin disebabkan oleh masalah pengekodan Pada masa ini, anda boleh menjalankan fail baris arahan sebagai pentadbir, atau menjalankan chcp 850 untuk menetapkan nombor halaman kod aktif mengetahui lebih lanjut tentang Untuk menulis maklumat tentang komponen Vue, anda boleh membaca dokumentasi Vue.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan vue dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!