Rumah >rangka kerja php >ThinkPHP >Bagaimana untuk menggunakan vue dalam thinkphp
Bagaimana untuk menggunakan vue dalam thinkphp
- 王林asal
- 2023-05-28 22:30:071504semak imbas
Dengan pembangunan berterusan teknologi web, pemisahan bahagian hadapan dan belakang telah menjadi satu trend. Rangka kerja bahagian hadapan Vue.js semakin popular sekarang, jadi bagaimana untuk menggunakan Vue dalam ThinkPHP? Artikel ini akan memperkenalkan cara mengintegrasikan Vue.js menggunakan rangka kerja ThinkPHP5.1.
1. Pasang Node.js
Sebelum anda mula, pastikan anda telah memasang persekitaran Node.js, anda boleh pergi ke tapak web rasmi untuk memuat turun dan memasangnya.
2. Cipta projek baharu
Gunakan arahan Komposer dan masukkan arahan berikut dalam terminal:
composer create-project topthink/think=5.1.* myapp
Selepas menjalankan arahan di atas, folder myapp akan dihasilkan dalam laluan semasa. Kemudian jalankan yang berikut untuk memasuki direktori dan memasang kebergantungan ThinkPHP:
cd myapp composer install
3. Pasang kebergantungan bahagian hadapan
Selepas mengesahkan bahawa anda telah memasuki direktori myapp, masukkan arahan berikut dalam arahan alat baris untuk memasang kebergantungan bahagian hadapan yang diperlukan :
npm install
Selepas pemasangan selesai, anda boleh melihat pakej kebergantungan yang berjaya dipasang dalam folder node_modules di bawah direktori myapp.
4. Konfigurasi webpack.mix.js
Fail webpack.mix.js digunakan untuk memperkenalkan sambungan antara pengkompil tersuai dan pakej kebergantungan bahagian hadapan. Melalui fail webpack.mix.js, anda boleh menyesuaikan cara kod bahagian hadapan dibina dan dibungkus.
Dalam folder projek myapp, cipta fail baharu webpack.mix.js dan tambah kod berikut:
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');Fungsi kod di atas ialah:
- Pengenalan Alat Laravel Mix
- Nyatakan sumber fail masukan/js/app.js dan laluan keluaran kompilasi sumber public/js
- Tentukan sumber laluan fail masukan Sass/sass/app.scss dan laluan keluaran kompilasi public /css
Sebenarnya, Laravel Mix ialah alat yang menggabungkan Webpack dengan alatan binaan lain untuk menyatukan aliran kerja bahagian hadapan.
5. Cipta komponen Vue.js
Sebelum mula menulis komponen Vue.js, anda perlu mencipta direktori sumber/pandangan dan mencipta indeks folder baharu di bawahnya, dalam fail indeks Cipta fail baharu bernama vue.blade.php dalam folder. Fail ini akan menjadi templat pemaparan komponen Vue.js Kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Vue component - ThinkPHP</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>Dalam kod di atas:
-
b5b92cce0821c3bee9a20511635af1b3digunakan untuk merentas domain. pertahanan serangan; -
4ad18ce1a6ba3ce77702a0160620e402memperkenalkan gaya; -
0668f9b9672fb8bee085b6d77157e8a9berfungsi sebagai bekas untuk komponen Vue.js; -
f669a2fb010860baaa34b3e329e9ddc39711b247f42f43ca3168f4ff0acf0adfSeterusnya, cipta komponen folder baharu dalam direktori resources/js/ dan buat fail ExampleComponent.vue baharu di dalamnya. Fail ini ialah komponen fail tunggal Vue yang akan diberikan kepada fail vue.blade.php. Kodnya adalah seperti berikut:
<template>
<div class="container">
<h1 class="title">Vue component - ThinkPHP</h1>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello, Vue!'
}
}
}
</script>
<style>
.container {
margin: 0 auto;
max-width: 640px;
}
.title {
font-size: 32px;
color: #333;
}
</style> Dalam kod di atas:
teg digunakan untuk memasukkan templat HTML; untuk memasukkan kod JavaScript, melalui eksport lalai eksport komponen fail tunggal Vue teg -
d477f9ce7bf77f53fbcf36bec1b69b7adigunakan untuk memasukkan gaya komponen fail tunggal. -
3f1c4e4b6b16bbbd69b2ee476dc4f83a6 Gunakan komponen Vue.js dalam templat Blade - Selepas melengkapkan langkah di atas, anda boleh menggunakan komponen Vue.js dalam templat Blade untuk menambah kod berikut :
c9ccee2e6ea535a969eb3f532ad9fe89@extends('index.vue') @section('content') <example-component></example-component> @endsection
menentukan kedudukan pemaparan untuk komponen Vue.js dan
menentukan nama komponen yang akan dipanggil. 7. Susun kod bahagian hadapan@extends('index.vue')Apabila anda melaksanakan perintah berikut untuk menyusun, public/js/app.js dan public/css/app.css akan dijana secara automatik. Kesannya boleh dilihat melalui fail HTML dalam direktori awam. @section('content')
npm run dev
example-component8. Integrasikan Vue.js
Selepas menyepadukan Laravel Mix ke dalam projek ThinkPHP, langkah seterusnya ialah menyepadukan Vue.js. Kebergantungan Laravel Mix dan Lodash.debounce digunakan di sini Kodnya adalah seperti berikut:
let mix = require('laravel-mix');
let debounce = require('lodash.debounce');
// styles
mix.sass('resources/assets/sass/app.scss', 'public/css');
// scripts
mix.js('resources/assets/js/app.js', 'public/js')
.vue({ version: 2 })
.babel(['public/js/app.js'], 'public/js/app.js')
.webpackConfig({
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
}
]
}
});
// browserSync
if (process.env.NODE_ENV !== 'production') {
mix.browserSync({
proxy: process.env.APP_URL || 'localhost:8000',
notify: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'public/**/*.{css,js}'
],
snippetOptions: {
rule: {
match: /</body>/i
}
}
});
}Dalam kod di atas:
.vue({ version: 2 }) digunakan untuk. beritahu projek Laravel Mix untuk menggunakan Versi Vue.js; .babel() digunakan untuk menjalankan Vue.js dalam IE8; dan item konfigurasi kepada pembina.- 9 Bersedia
- Selepas melengkapkan semua langkah di atas, anda boleh berjaya menggunakan Vue.js dalam projek ThinkPHP. Jalankan arahan berikut untuk memulakan pelayan setempat untuk melihat kesannya:
php think run
Di atas adalah beberapa kaedah dan langkah untuk menggunakan Vue.js dalam ThinkPHP. Atas dasar ini, anda juga boleh menyelesaikan masalah yang lebih kompleks melalui konfigurasi yang lebih terperinci, seperti menghantar data melalui API, mengkonfigurasi penghalaan, dsb. Saya harap kaedah di atas dapat membantu anda dalam amalan anda.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan vue dalam thinkphp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!