Rumah > Artikel > rangka kerja php > Penjelasan terperinci tentang cara menggunakan vue dalam Laravel
Penjelasan terperinci tentang cara menggunakan vue dalam Laravel
- 藏色散人ke hadapan
- 2021-10-28 15:48:448042semak imbas
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!