Penjelasan terperinci tentang cara menggunakan vue dalam Laravel
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
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>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>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 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('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') }}"></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');});
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Cara menambah fungsi ke butang untuk vue
Apr 08, 2025 am 08:51 AM
Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara merujuk fail js dengan vue.js
Apr 07, 2025 pm 11:27 PM
Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.
Cara Menggunakan Watch di Vue
Apr 07, 2025 pm 11:36 PM
Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.
Cara kembali ke halaman sebelumnya oleh Vue
Apr 07, 2025 pm 11:30 PM
Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.
Geospatial Laravel: Pengoptimuman peta interaktif dan sejumlah besar data
Apr 08, 2025 pm 12:24 PM
Cecair memproses 7 juta rekod dan membuat peta interaktif dengan teknologi geospatial. Artikel ini meneroka cara memproses lebih dari 7 juta rekod menggunakan Laravel dan MySQL dan mengubahnya menjadi visualisasi peta interaktif. Keperluan Projek Cabaran Awal: Ekstrak Wawasan berharga menggunakan 7 juta rekod dalam pangkalan data MySQL. Ramai orang mula -mula mempertimbangkan bahasa pengaturcaraan, tetapi mengabaikan pangkalan data itu sendiri: Bolehkah ia memenuhi keperluan? Adakah penghijrahan data atau pelarasan struktur diperlukan? Bolehkah MySQL menahan beban data yang besar? Analisis awal: Penapis utama dan sifat perlu dikenalpasti. Selepas analisis, didapati bahawa hanya beberapa atribut yang berkaitan dengan penyelesaiannya. Kami mengesahkan kemungkinan penapis dan menetapkan beberapa sekatan untuk mengoptimumkan carian. Carian Peta Berdasarkan Bandar
Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page?
Apr 07, 2025 pm 11:57 PM
Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.
Cara melompat ke Div Vue
Apr 08, 2025 am 09:18 AM
Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.
