Adakah laravel mempunyai vue terbina dalam?

Laravel tidak mempunyai vue terbina dalam; laravel ialah rangka kerja pembangunan program web yang ditulis dalam bahasa PHP, dan vue ialah rangka kerja JavaScript sumber terbuka untuk mencipta antara muka pengguna boleh digunakan dalam laravel, tetapi ia ada tidak wujud dalam laravel vue terbina dalam.

Persekitaran pengendalian artikel ini: sistem Windows 10, Laravel versi 9, komputer Dell G3.

Adakah laravel mempunyai vue terbina dalam?

Laravel ialah rangka kerja pembangunan program web yang ditulis dalam bahasa PHP. Ia bertujuan untuk menyediakan pembangun dengan komponen biasa dan memudahkan pembangunan program web. Dengan menulis kurang kod, anda boleh mencapai ciri yang sukar dicapai dengan bahasa pengaturcaraan atau rangka kerja lain. Pengaturcara PHP yang berpengalaman akan mendapati bahawa Laravel menjadikan pembangunan program lebih menyeronokkan.

vue ialah rangka kerja JavaScript sumber terbuka untuk mencipta antara muka pengguna dan rangka kerja aplikasi Web untuk membuat aplikasi satu halaman Teras Vue ialah lapisan paparan dalam corak MVC mudah Dapatkan kemas kini data dan berinteraksi dengan paparan dan model melalui kaedah khusus dalam komponen.

Laravel

Laravel ialah rangka kerja aplikasi web ekspresif dengan sintaks yang ringkas. Kami percaya proses pembangunan harus menjadi pengalaman yang menyeronokkan dan kreatif. Laravel berusaha untuk mengurangkan kesulitan semasa proses pembangunan, jadi kami menyediakan alatan atau fungsi yang kerap digunakan dalam proses pembangunan seperti pengesahan, penghalaan, sesi dan caching.

Matlamat Laravel adalah untuk mencipta proses pembangunan yang menyenangkan untuk pembangun tanpa mengorbankan fungsi aplikasi. Pembangun gembira mencipta kod terbaik. Untuk tujuan ini, kami telah mengambil kelebihan pelbagai rangka kerja dan menumpukan mereka kepada Laravel Rangka kerja ini termasuk tetapi tidak terhad kepada Ruby on Rails, ASP.NET MVC dan Sinatra.

vue

Vue.js (/vjuː/, atau ringkasnya Vue) ialah rangka kerja JavaScript sumber terbuka untuk mencipta antara muka pengguna dan aplikasi Web satu halaman rangka kerja. Tinjauan JavaScript 2016 menunjukkan bahawa Vue mempunyai 89% kepuasan pembangun. Di GitHub, projek itu menerima purata 95 bintang setiap hari, menjadikannya projek ketiga paling berbintang dalam sejarah Github.

Vue.js ialah rangka kerja bahagian hadapan JavaScript popular yang direka untuk mengatur dan memudahkan pembangunan web dengan lebih baik. Fokus teras Vue ialah lapisan paparan dalam corak MVC Pada masa yang sama, ia juga boleh mendapatkan kemas kini data dengan mudah dan merealisasikan interaksi antara paparan dan model melalui kaedah tertentu dalam komponen.

Cara untuk menggunakan vue dalam Laravel

Buat laravel

Pertama, anda memerlukan komposer, dan kemudian, anda Dengan sebuah 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 bermula, atas pelbagai sebab anda tahu, npm dipasang sebagai gudang nod asing Pelbagai masalah seperti kelajuan perlahan mungkin berlaku semasa operasi alat Secara amnya disyorkan untuk menggunakan sumber taobao untuk pecutan Hanya tambahkan akhiran pada kod berikut.

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

Muat turun pengurusan penghalaan vue, kodnya adalah seperti berikut.

npm install vue-router --save-dev

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

<template>
    <div>
        <h1 id="Hello-nbsp-World">Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

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 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: '/',
            component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
        },
    ]
})

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 id="Hello">Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

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

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

Buat hello.blade.php baharu 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>

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

Route::view('/hello','/hello');

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

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

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');});

[Cadangan berkaitan: tutorial video laravel]

Atas ialah kandungan terperinci Adakah laravel mempunyai vue terbina dalam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!